[Guia] Como hospedar um site estático gratuitamente usando o AWS S3

Esta é a pequena joia que aprendi em um curso sobre o AWS Developer Associate Certificate. Normalmente, hospedar um site em hospedagem normal custará pelo menos US $ 5 / mês, mas o AWS S3 oferece o nível gratuito de 1 ano de armazenamento de 5 GB e largura de banda de 15 GB. Depois de um ano, torna-se US $ 0,025 por GB de armazenamento e US $ 0,14 por GB de largura de banda, o que ainda é super barato. Este artigo orientará você na etapa de configuração de um novo site estático vinculado a um subdomínio.

Antes de começarmos o guia passo a passo, deixe-me dar uma base sobre o que é um site estático e o que é S3. Sinta-se livre para pular essas partes, se você já sabe.

O que é um site estático?

Em um desenvolvimento web tradicional, criamos um site em linguagens de programação como PHP, Ruby, Python, NodeJS, .NET etc. Sempre que um usuário entra em nosso site, essas linguagens de programação recuperam as informações do banco de dados, renderizam a web página (HTML, CSS, JavaScript) e a enviou para nós.

Um problema com o desenvolvimento da Web tradicional é que o usuário precisa aguardar o servidor da Web calcular e renderizar a página da Web. Com a maturidade do JavaScript e suas bibliotecas, poderíamos acelerar esse tempo de espera, dissociando o front-end (HTML, CSS, JavaScript) e o back-end (PHP, Ruby, Python, NodeJS, .NET etc.).

O usuário agora verá o frontend quase imediatamente após a solicitação, e o frontend solicitará as informações do servidor da web. Se a Internet do usuário estiver lenta, o site ficará vazio enquanto aguarda os dados do servidor da web. Mas como o front-end precisa apenas dos dados, e não do código fonte da página da Web no desenvolvimento tradicional da Web, será muito mais rápido recuperar os dados do servidor.

O site estático = o front-end na última arquitetura. Ele contém apenas conteúdo estático e sempre pode obter o conteúdo dinâmico do servidor da Web, se necessário. Observe que você pode não precisar da conexão com o servidor da Web. Por exemplo, ao criar um site pessoal simples, as informações podem ser armazenadas na página estática da Web, pois não as alteramos muito.

Para hospedar um site estático, não precisamos de um servidor web sofisticado e caro. O armazenamento simples de objetos, como o AWS S3, é mais que suficiente.

O que é o AWS S3?

S3 significa “Serviço de armazenamento simples” = um serviço de armazenamento na nuvem da Amazon. Pense nisso como o Dropbox ou o Google Drive sem o recurso de sincronização de arquivos. (Curiosidade: o Dropbox estava em execução no AWS S3 até por volta de 2016)

Podemos usar o S3 para armazenar arquivos para fins de backup, aplicativos ou hospedagem de sites estáticos. Mas como a hospedagem de um site no S3 difere da hospedagem em outros serviços de hospedagem? Na minha opinião, o principal benefício de hospedar um site no S3 é a capacidade de aproveitar a infraestrutura escalável da AWS, como:

Armazenamento ilimitado – Ao contrário da hospedagem normal na web, não há limite de quanto você pode armazenar

99.999999999% de durabilidade – O backup de seus arquivos é feito em vários data centers, portanto quase nunca será perdido (1 em 10.000 objetos será perdido em 10 milhões de anos)

Capaz de lidar com o tráfego intenso – o S3 foi desenvolvido para atender negócios de nível empresarial. Assim, você não precisará se preocupar com o aumento do tráfego no site. Será capaz de lidar com alto tráfego sem problemas

Preços flexíveis – quando o site é pequeno, você não precisa pagar nada. E mesmo que cresça, você paga muito pouco.

Funciona bem com outros serviços da AWS – Podemos configurar o AWS CloudFront (CDN) para acelerar o site, conectar o S3 ao AWS Lambda (função como serviço) para calcular algo em segundo plano, etc.

Espero que isso o interesse em hospedar um site na AWS S3. Na próxima seção, deixe-me guiá-lo pelas etapas de hospedagem de um site no AWS S3.

Um guia passo a passo sobre como hospedar um site na AWS S3

Nota: no meu caso, o domínio não estava hospedado na AWS. Comprei no Name.com. Pode haver uma maneira mais fácil se o seu domínio foi comprado na AWS Route 53 (Serviço DNS da AWS). Para mim, prefiro não ficar com apenas um provedor de serviços para tudo (por exemplo, nome de domínio, hospedagem na web), para ter mais controle sobre os diferentes componentes.

Etapa 1) Criar uma conta da AWS

Se você não tiver feito isso, poderá seguir o Guia sobre como criar uma nova conta da AWS. Você precisará colocar o número do cartão de crédito, mas a Amazon não cobrará nada no processo.

Etapa 2) Crie um novo balde S3

Acesse o AWS S3 Console. Em seguida, crie um novo S3 Bucket com o mesmo nome do site sem HTTP / HTTPS, por exemplo. se eu quiser que o domínio seja http://s3.byperth.com, nomearei meu bucket como s3.byperth.com

“Balde” no S3 é o mesmo conceito de uma pasta no Windows. Você também pode criar uma subpasta (chamada “pasta” no S3) dentro de cada bloco.

Clique no botão “Criar bloco” para criar um novo bloco.

Temos que definir a permissão como “pública” ao criar (você também pode alterar a permissão após a criação do bloco). Isso pode ser feito configurando “Gerenciar permissões públicas” para “Conceder acesso público de leitura a este bloco”.

Etapa 3) Configurar o bucket S3 como hospedagem estática na Web

Na página de lista do depósito S3, clique no nome do depósito para entrar na página da lista de arquivos do depósito. Deve aparecer como abaixo.

Vá para Propriedades> Hospedagem Estática na Web para transformar esse depósito em hospedagem na web.

Você precisará especificar a página de índice e a página de erro. Basta inserir “index.html” na página de índice.

Etapa 4) Criar e carregar uma página de índice

Crie uma página HTML usando seu editor de texto favorito. Estou testando usando este código simples para minha página da web:

<! DOCTYPE html>

<html lang = “pt”>

<head>

<meta charset = “UTF-8”>

<meta name = “viewport” content = “width = largura do dispositivo, escala inicial = 1.0”>

<meta http-equiv = “Conteúdo compatível com X-UA” = “ie = borda”>

<title> Bem-vindo ao site de Perth </title>

</head>

<body>

<h1> Olá mundo </h1>

</body>

</html>

Salve esta página da web como index.html. Em seguida, faça o upload deste arquivo no bucket S3.

Podemos facilmente fazer upload do arquivo através da interface da web. Vá para a guia “Visão geral” e clique no botão “Enviar”.

Igual à permissão de bucket, também precisamos definir a permissão de arquivo como pública. Você pode fazer isso selecionando ‘Conceder acesso público de leitura a este objeto’ enquanto faz o upload do arquivo (você também pode alterar a permissão do arquivo após o upload)

Etapa 5) Aponte o domínio para o bucket

Este é o último passo! Vá para as configurações de DNS no site em que você registrou seu domínio (no meu caso, é name.com).

Adicione o novo registro DNS com as seguintes informações:

Tipo de Registro: CNAME

Host: (seu subdomínio) p. no meu caso, é s3

Resposta (ou valor): cole o terminal na última imagem na etapa 3, sem o seu nome de domínio, por exemplo. no meu caso, o nó de extremidade é “http://s3.byperth.com.s3-website-ap-southeast-2.amazonaws.com/”, então eu uso o valor s3-website-ap-southeast-2.amazonaws .com.

Ao acessar seu domínio, você verá o site hospedado no S3 imediatamente. Observe que às vezes são necessárias de 3 a 24 horas para atualizar o registro DNS, especialmente se você já usou o mesmo domínio para outra coisa antes. Mas, no meu caso, é o novo domínio, por isso aparece imediatamente.