Considerando que hospedamos vários elementos como scripts e estilos em nosso bucket público S3, você pode ter pensado em hospedar uma página HTML completa ou um site estático no bucket S3. Neste capítulo, você aprenderá como fazer isso em um bucket público S3, acessível via link. Vamos começar!

Nota

Estaremos hospedando uma página da web que você pode criar fazendo o curso Bootstrap: Construa Sites Estilosos. Este curso cobre o uso de vários estilos com Bootstrap, e ao final, você terá seu próprio site de portfólio, que usaremos neste capítulo!

Hospedando uma Página HTML no AWS S3

Para começar, sugiro criar uma pasta separada no bucket onde colocaremos todos os recursos relacionados a esta página da web para facilitar o gerenciamento e desenvolvimento:

Agora, como de costume, precisamos fazer o upload do arquivo HTML para nosso bucket público.

O arquivo HTML que vamos fazer o upload é assim:

Nota

Observe que mesmo neste código, tecnologias de nuvem são usadas para importar o Bootstrap, bem como para a imagem, que serve como nosso avatar no portfólio.

Agora vamos carregá-lo no bucket S3:

Agora tudo o que precisamos fazer é seguir o link para este bucket, e teremos nossa página HTML, que serve como nosso portfólio, bem na nossa frente.

A coisa mais interessante é que esta página está na nuvem, e sempre teremos acesso a ela.

Página Web Estática

Há outra maneira de hospedar uma página web no S3, e este método será mais especializado para páginas web. Vamos ver como fazer isso.

Primeiro, precisamos criar um novo bucket e carregar o arquivo HTML que será a página principal do nosso site estático.

Nota

É uma boa prática criar uma pasta separada e carregar estilos CSS, scripts JavaScript, vários meios de comunicação e outros materiais relacionados ao seu site estático lá.

Para fazer isso, vamos criar um novo bucket e carregar o arquivo HTML com o portfólio:

Em seguida, navegamos para a aba Propriedades e rolamos até o final da página. Estamos interessados na seção chamada Hospedagem de site estático, como mostrado na captura de tela abaixo:

Abrimos esta seção e selecionamos 'Habilitar' na linha de Hospedagem de site estático.

Em seguida, precisamos especificar o documento de índice, que, no nosso caso, é portfolio.html. Se você tiver uma página de tratamento de erros, também pode especificá-la. Então, simplesmente salve a página.

Nota

Observe que, para que a página seja acessível aos usuários e a você na internet, você precisa configurar sua acessibilidade assim como fizemos com nosso bucket anterior.

Em seguida, precisamos salvar as alterações, e a Amazon nos fornecerá um link para nosso site estático, que você pode ver na parte inferior:

Agora, quando você acessar este link, poderá ver nossa página HTML hospedada no AWS S3:

Observe que esta não é a melhor maneira de hospedar um site; existem serviços dedicados para isso, como o Amazon EC2.

No S3, podemos hospedar pequenos sites estáticos, mas pode não ser suficiente para aplicações maiores.

Fazer isso no S3 é bastante simples, e agora você sabe como fazer upload e armazenar seus arquivos de mídia lá.