Armazenando Fragmentos de Código no AWS S3

No capítulo anterior, escrevemos um código HTML que nos permite alimentar a tartaruga, e nesse código, usamos uma imagem que carregamos no AWS S3 em um bucket público. Mas você pode ter notado que ler o código de lá era bastante inconveniente devido ao grande número de estilos.

Estou levando ao ponto de que também podemos carregar certos trechos de código no AWS S3, assim como imagens. Por exemplo, no nosso caso, seria conveniente carregar estilos CSS para nossas páginas HTML ou aplicações no AWS para economizar espaço no código.

Nota

Esses estilos serão bastante fáceis de gerenciar porque, se precisarmos mudar os estilos em todos os lugares onde são usados, simplesmente modificamos algumas linhas de código no arquivo no S3, assim mudando os estilos em todas as páginas onde referenciamos o link. Muito conveniente!

Vamos dar uma olhada no arquivo de estilo que quero carregar no armazenamento:

Nota

Esses estilos estão localizados na aba index.css. Certifique-se de selecionar a aba correta.

Para adicionar um arquivo com estilos ao AWS S3, primeiro precisamos criar este arquivo e carregá-lo no nosso bucket público:

Agora, para usar esses estilos CSS no código HTML, precisamos usar uma sintaxe muito simples:

No caso de vincular aos nossos estilos, esta linha ficará assim:

Vamos ver quanto nosso código será reduzido após nossas mudanças e como ele ficará agora:

Se você clicar e seguir este link, você verá o conteúdo deste arquivo, ou seja, os estilos que escrevi anteriormente. Desta forma, tanto nós quanto os usuários do nosso site podemos ver quais estilos estão armazenados na AWS e podem querer pegá-los emprestados de nós.

Além disso, vale mencionar que também podemos carregar scripts JavaScript para o S3. Isso não é a melhor prática porque os scripts geralmente precisam de edição e trabalhar com eles, mas no nosso caso, estamos aprendendo, então vamos fazer isso e otimizar ainda mais nosso código!

Abaixo está o script que vamos carregar para nosso bucket público:

Agora, precisamos carregar o arquivo de script JavaScript para nosso bucket público:

E agora precisamos usar a seguinte sintaxe para adicionar o script ao código via o link:

Após adicionar o script do AWS S3, nosso código para a tartaruga ficará assim:

Nota

A propósito, você pode mais uma vez visualizar o script diretamente via o link.

O código parece bom, não é?

Nos próximos capítulos, aprenderemos como hospedar páginas HTML inteiras e criar sites de várias páginas usando AWS S3, então fique ligado!