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
Can you explain how to make a file public in an AWS S3 bucket?
What are the benefits of separating CSS and JavaScript into different files?
Is it safe to link scripts and styles directly from AWS S3 in production?
Awesome!
Completion rate improved to 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!
