Armazenamento de Fragmentos de Código no AWS S3
Criamos um código HTML que permite alimentar a tartaruga, e nesse código, utilizamos uma imagem que enviamos para o AWS S3 em um bucket público. No entanto, você pode ter notado que ler o código diretamente de lá era bastante inconveniente devido à grande quantidade de estilos.
Isso nos leva à ideia de que também podemos enviar determinados trechos de código para o AWS S3, assim como fazemos com imagens. Por exemplo, no nosso caso, seria muito conveniente enviar estilos CSS das nossas páginas HTML ou aplicações para a AWS, ajudando a manter o código mais limpo e organizado.
A gestão desses estilos será simples, pois se for necessário atualizar os estilos em todas as instâncias, basta editar algumas linhas de código no arquivo S3, o que aplicará as alterações a todas as páginas que referenciam o link.
Vamos analisar o arquivo de estilo que desejo enviar para o armazenamento:
style.css
Para adicionar um arquivo com estilos ao AWS S3, primeiro é necessário criar o arquivo e enviá-lo para o nosso bucket público:
Para aplicar esses estilos CSS em seu código HTML, basta utilizar uma sintaxe simples:
<link rel="stylesheet" href="link to your CSS styles here">
No caso de vincular aos nossos estilos, esta linha ficará assim:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Vamos analisar quanto nosso código será reduzido após essas alterações e como ele ficará agora:
index.html
Se você clicar e seguir este link, você verá o conteúdo deste arquivo, especificamente os estilos que escrevi anteriormente. Dessa forma, tanto nós quanto os visitantes do nosso site podem visualizar os estilos armazenados na AWS e podem querer utilizá-los.
Também vale destacar que podemos fazer upload de scripts JavaScript no S3. Embora isso não seja a melhor prática, pois scripts geralmente exigem edição e manipulação, no nosso caso, estamos aprendendo, então vamos em frente para facilitar ainda mais nosso código!
Abaixo está o script que faremos upload para o nosso bucket público:
script.js
Agora, é necessário fazer o upload do arquivo JavaScript script para o bucket público:
Agora, é necessário utilizar a seguinte sintaxe para adicionar o script ao código por meio do link:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Após adicionar o script do AWS S3, o código para a tartaruga ficará assim:
index.html
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Incrível!
Completion taxa melhorada para 4.55Armazenamento de Fragmentos de Código no AWS S3
Deslize para mostrar o menu
Criamos um código HTML que permite alimentar a tartaruga, e nesse código, utilizamos uma imagem que enviamos para o AWS S3 em um bucket público. No entanto, você pode ter notado que ler o código diretamente de lá era bastante inconveniente devido à grande quantidade de estilos.
Isso nos leva à ideia de que também podemos enviar determinados trechos de código para o AWS S3, assim como fazemos com imagens. Por exemplo, no nosso caso, seria muito conveniente enviar estilos CSS das nossas páginas HTML ou aplicações para a AWS, ajudando a manter o código mais limpo e organizado.
A gestão desses estilos será simples, pois se for necessário atualizar os estilos em todas as instâncias, basta editar algumas linhas de código no arquivo S3, o que aplicará as alterações a todas as páginas que referenciam o link.
Vamos analisar o arquivo de estilo que desejo enviar para o armazenamento:
style.css
Para adicionar um arquivo com estilos ao AWS S3, primeiro é necessário criar o arquivo e enviá-lo para o nosso bucket público:
Para aplicar esses estilos CSS em seu código HTML, basta utilizar uma sintaxe simples:
<link rel="stylesheet" href="link to your CSS styles here">
No caso de vincular aos nossos estilos, esta linha ficará assim:
<link rel="stylesheet" href="https://codefinity-aws-course.s3.eu-north-1.amazonaws.com/styles_for_turtle.css">
Vamos analisar quanto nosso código será reduzido após essas alterações e como ele ficará agora:
index.html
Se você clicar e seguir este link, você verá o conteúdo deste arquivo, especificamente os estilos que escrevi anteriormente. Dessa forma, tanto nós quanto os visitantes do nosso site podem visualizar os estilos armazenados na AWS e podem querer utilizá-los.
Também vale destacar que podemos fazer upload de scripts JavaScript no S3. Embora isso não seja a melhor prática, pois scripts geralmente exigem edição e manipulação, no nosso caso, estamos aprendendo, então vamos em frente para facilitar ainda mais nosso código!
Abaixo está o script que faremos upload para o nosso bucket público:
script.js
Agora, é necessário fazer o upload do arquivo JavaScript script para o bucket público:
Agora, é necessário utilizar a seguinte sintaxe para adicionar o script ao código por meio do link:
<script src="https://staging-content-media-cdn.codefinity.com/courses/1118a13a-0288-43c5-8ff9-d51da25c903e/Section2/codefinity-aws-tutor/script-for-turtle.js"></script>
Após adicionar o script do AWS S3, o código para a tartaruga ficará assim:
index.html
Obrigado pelo seu feedback!
