Como hospedar um site estático na nuvem com AWS S3

Para a maioria dos sites focados em conteúdo, a hospedagem estática é uma alternativa fácil e econômica para estruturas dinâmicas mais pesadas.

A nuvem pública é uma escolha comum para sites e aplicativos modernos, antes da hospedagem privada. Isso se deve a fatores como custo-benefício e escalabilidade.

Um site estático exibe arquivos HTML, CSS e JavaScript pré-construídos em um servidor. É diferente de um site dinâmico que gera conteúdo com base nas ações ou preferências do usuário.

As plataformas em nuvem tornam a hospedagem de sites estáticos simples e barata. Você pode implantar um site estático na nuvem usando o provedor de nuvem AWS.

O que é AWS S3?

Amazon Simple Storage Service (S3) é um serviço de armazenamento de dados oferecido pela Amazon. Você pode pensar no S3 como uma plataforma web fornecida pela Amazon onde você pode armazenar arquivos e qualquer outro tipo de dados na nuvem.

AWS S3 é um dos mecanismos de armazenamento em nuvem mais populares disponíveis na Internet. É o depósito de muitos aplicativos da web de pequeno e grande porte hoje. Um exemplo é o Netflix, que hospeda todo o seu conteúdo de streaming nele.

O AWS S3 adota uma arquitetura de armazenamento de objetos que o torna durável, escalável e altamente disponível para uso em qualquer instância. Você pode usá-lo para armazenamento de aplicativos da web, backup, arquivamento de dados, recuperação de desastres e, curiosamente, hospedagem de sites.

O que é um balde S3?

No AWS S3, as unidades de armazenamento são de diferentes tipos, e o mais básico é o objeto – simplesmente um arquivo. Um bucket S3 é uma coleção de objetos de diferentes tipos. Você pode imaginar um bucket S3 como a pasta raiz de um sistema inteiro que compreende muitos arquivos e pastas de vários tipos.

Você pode gerenciar buckets S3 de várias maneiras. Você pode fazer isso no console AWS, via AWS CLI, usando o AWS SDK e enviando ou obtendo dados em seu aplicativo por meio da API REST.

O S3 é escalonável, portanto, um bucket pode conter praticamente qualquer arquivo, independentemente do tipo ou tamanho. Na verdade, um único objeto pode ter até 5 Terabytes. É por isso que um bucket S3 é adequado para backups e recuperação de desastres.

Os objetos armazenados em um bucket S3 geralmente são acessíveis (somente leitura) por meio de um URL exclusivo para cada objeto. Você também pode usar buckets S3 para hospedagem estática na web porque eles podem servir objetos por HTTP.

Como então você pode usar o S3 e talvez torná-lo sua plataforma padrão para hospedar sites estáticos?

Como criar um bucket S3 e configurá-lo para hospedagem na web

Aqui está um procedimento passo a passo para criar e configurar um bucket do Amazon S3. Você também aprenderá como habilitar hospedagem estática na web em um bucket.

Para acompanhar, você deve se inscrever em uma conta AWS, caso ainda não tenha uma. Para criar um bucket S3 para hospedar seu site estático, faça login no console AWS e siga as cinco etapas abaixo.

1. Procure o serviço S3 e navegue até o painel S3.

   

2. Clique no botão Criar bucket para configurar e criar um novo bucket.

   

3. A primeira coisa a fazer na tela de configuração do bucket é dar ao seu bucket um nome globalmente exclusivo. O S3 impedirá que você crie um bucket se o nome já estiver em uso. Selecione uma região preferida para seu bucket ou deixe a região selecionada por padrão. Além disso, deixe a seção “Propriedade do objeto” como padrão.

   

4. Para hospedar sites estáticos no S3, você precisa disponibilizar o bucket publicamente. Portanto, na próxima etapa, desmarque a opção Bloquear todo o acesso público. Em seguida, confirme no aviso abaixo que você concorda em torná-lo público. O controle de versão do bucket não é necessário, portanto você deve desativá-lo.

   

5. As últimas três etapas não exigem necessariamente uma ação sua. Você pode adicionar tags se desejar, como a tag de exemplo aqui que é “descrição”. Mantenha a criptografia padrão desativada e clique no botão Criar bucket para criar seu novo bucket.

   

A próxima etapa é configurar o novo bucket S3 para hospedagem estática na web. Para isso, clique no nome do bucket no dashboard do S3 e, na nova tela que for carregada, navegue até a aba Propriedades.

Role para baixo até a seção Hospedagem estática de sites e clique no botão Editar. Isso abrirá a tela de configuração de hospedagem de site estático.

Habilite-o e deixe o tipo de hospedagem como padrão. Uma nota nesta tela diz: “Para que seus clientes acessem o conteúdo no endpoint do site, você deve tornar todo o seu conteúdo legível publicamente…”. É por isso que foi necessário permitir o acesso público anteriormente ao criar o bucket.

O campo Documento de índice é onde você especifica o arquivo de índice do seu site, que geralmente é index.html. O documento de erro é a página que você deseja exibir sempre que ocorrer um erro, como um erro 404.

Salve as alterações e retorne à tela de propriedades. Você deverá notar um novo endpoint de site de bucket na seção Hospedagem estática de site. Você poderá usar este URL para acessar seu site assim que terminar de configurá-lo.

Agora você tem seu bucket configurado e pronto para hospedar um site estático. Como então você adiciona os arquivos do seu site ao intervalo e visualiza o seu site?

Como fazer upload de arquivos e pastas para um bucket S3

Para hospedar seu site estático na nuvem no S3, você precisa fazer upload de seus arquivos e pastas para o bucket S3 configurado. Navegue de volta para a guia de objetos e clique em qualquer um dos botões de upload para fazer upload dos arquivos do seu site.

A próxima tela é onde você pode adicionar os arquivos e pastas que deseja carregar no bucket. Certifique-se de adicionar seu arquivo index.html e todos os outros arquivos ou pastas associados ao seu site aqui. As pastas que você pode querer adicionar são CSS, JavaScript e pastas de imagens.

Você pode adicionar arquivos e pastas arrastando e soltando ou usando o botão “Adicionar arquivos” ou “Adicionar pastas”. Depois de adicionar todos os arquivos e pastas, clique no botão de upload no final da tela. Aguarde o upload dos arquivos e clique no botão Fechar para retornar à tela "Objetos".

Como proteger e visualizar o site implantado

Nesta fase, estamos quase terminando e o site está quase pronto para visualização em um navegador. O site ainda não pode ser aberto devido às políticas de gerenciamento de identidade e acesso da Amazon que impedem o acesso aos recursos em um bucket.

Você mesmo precisa permitir o acesso aos recursos do bucket. Navegue até a guia de permissões no painel do bucket e edite a política do bucket. Copie e cole o código abaixo e substitua “nome do site” pelo nome do seu bucket.

{
 "Version": "2012-10-17",
 "Statement": [ {
   "Sid": "AddPerm",
   "Effect": "Allow",
   "Principal": "*",
   "Action": "s3:GetObject",
   "Resource": "arn:aws:s3:::website-name/*"
 } ] 
}

Salve as alterações e revisite a guia de propriedades mais uma vez para obter o URL do site na seção estática do site. Copie e cole o URL em um navegador e você verá seu site estático.

Hospedar sites estáticos na nuvem é uma alternativa mais segura e escalonável à hospedagem de sites estáticos nas páginas do Github. Principalmente para sites com arquivos multimídia pesados.

Implantando sites estáticos na nuvem

É muito fácil implantar um site estático na nuvem usando AWS S3. Você deve considerar obter um nome de domínio personalizado para um site de produção final.

A Amazon oferece seu próprio serviço de nome de domínio, Route 53. Você também pode verificar outros provedores de DNS para obter um nome de domínio de sua escolha.

A nuvem é muito econômica e fácil de usar. Considere torná-lo sua escolha padrão para hospedagem de sites estáticos.