Utilizando seu primeiro serviço na AWS para hospedar um site estático no S3

Chegou a hora de utilizar o seu primeiro serviço da AWS: o AWS S3.

Mas, afinal, o que é e para que serve o S3?¶

O Amazon Simple Storage Service (Amazon S3) é um serviço de armazenamento de objetos que oferece escalabilidade, disponibilidade de dados, segurança e performance líderes do setor. Clientes de todos os portes e setores podem armazenar e proteger qualquer quantidade de dados de praticamente qualquer caso de uso, como data lakes, aplicações nativas da nuvem e aplicações móveis. Com classes de armazenamento econômicas e recursos de gerenciamento fáceis de usar, você pode otimizar custos, organizar dados e configurar controles de acesso ajustados para atender a requisitos específicos de negócios, organizacionais e de conformidade. (Texto extraído da página do S3 na AWS)

Exemplos de uso do S3¶

Armazenamento de backup: Você pode usar o S3 para armazenar backups de bancos de dados, servidores, arquivos de log e outros dados importantes. Ele oferece alta durabilidade, redundância e segurança para garantir a proteção dos seus backups.

Hospedagem de sites estáticos: O S3 pode ser usado para hospedar sites estáticos, como páginas HTML, CSS e JavaScript. Você pode configurar o S3 para servir os arquivos diretamente para os visitantes do site, proporcionando um armazenamento de baixo custo e escalável para o seu conteúdo estático.

Armazenamento de dados para aplicativos: Muitos aplicativos usam o S3 para armazenar e acessar arquivos de dados, como imagens, vídeos, documentos e arquivos de configuração. Ele fornece uma interface simples e APIs poderosas para manipulação de objetos, permitindo que os desenvolvedores integrem facilmente o armazenamento de objetos em seus aplicativos.

Esses são apenas alguns exemplos de uso do AWS S3. A flexibilidade e a escalabilidade do serviço o tornam adequado para uma ampla variedade de casos de uso, desde armazenamento simples até aplicativos complexos de big data e distribuição de conteúdo.

Hospedando site estático no S3¶

Começaremos a colocar a mão na massa hospedando um site estático simples no S3 de forma manual via dashboard da AWS.

Criando um bucket S3¶

O primeiro passo será criarmos um bucket S3. Um bucket, que na traduação literal significa "balde", de fato pode ser entendido como um "balde armazenador de informações", sendo as "informações" o seu site estático.

No dashboard da AWS, procure pelo "Amazon S3".

Ao entrar na página do S3, clique em "Criar Bucket".

Agora daremos início à criação do bucket do S3!

Todas as demais configurações deixaremos padrão, como nas imagens a seguir:

E, após verificarmos as etapas acima, clicaremos em "Criar Bucket".

Após a criação do bucket ter sido bem sucedida, conseguiremos ver nosso bucket no dashboard do S3:

Ao entrar no nosso bucket, podemos ver que não há nenhum objeto/arquivo dentro dele:

Alterando as permissões do bucket¶

Vamos agora entrar na aba "Permissões" do nosso bucket e desbloquear o acesso clicando em "Editar":

Em seguida, desmarque a caixa com a opção "Bloquear todo o acesso público" e salve as alterações.

Em seguida, procure por "Propriedade de Objeto", selecione a opção "ACLs habilitadas" e salve as alterações:

Agora procure por "Lista de controle de acesso (ACL)" e clique em "Editar":

Nessa página nós NÃO faremos nenhuma alteração. Chegamos até aqui apenas para você ver que nosso bucket não está com a opção de "Acesso público para todos" ativada, ou seja, seguimos a boa prática de não liberar o bucket como um todo para acesso público. Assim sendo, você já pode sair dessa página.

Carregando arquivos dentro do seu bucket¶

Agora sim iremos armazenar algo dentro do nosso bucket. Dentro do seu bucket, na aba "Objetos", clique em "Carregar" e suba o(s) aquivo(s) que você desejar. Isso pode ir desde uma imagem, até um html, css etc. Neste tutorial optei por subir no bucket o logotipo do Insper.

Verifique se o(s) arquivo(s) que você selecionou para armazenar no seu bucket está(ão) correto(s) e, caso sim, clique em "Carregar".

Após caregar, você deverá ver uma página com um link para o seu bucket do S3, clique nele.

Vish, deu ruim!¶

Ao clicar no link, é esperado que você entre em uma página semelhante a da imagem a seguir e não consiga acessar o conteúdo do bucket (pense um pouco em tudo o que falamos sobre "boas práticas de acesso ao bucket" como um todo e aos arquivos para entender o que houve).

Habemus site!¶

É isso mesmo, agora você consegue ver o conteúdo do seu bucket porque ele está publicamente acessível! Incrível, não é mesmo?! Sim, se você mandar esse link para qualquer pessoa, ela conseguirá acessar o seu site (afinal, ela estará acessando o conteúdo do seu bucket)! No meu caso, coloquei apenas o logotipo do Insper, mas você poderia ter subido seu próprio site estático de forma rápida, fácil e simples!

Algns dias antes de eu escrever esse tutorial eu também havia criado um site estático um pouco mais robusto utilizando um html que recebia um nome, sobrenome e enviava essas informações para a minha base de dados da AWS. Para essa aplicação, utilizei o AWS S3, API Gateway para a proteção da API, Lambda para as requisições e o DynamoDB para armazenar as informações de input do usuário.

Se você desejar criar seu próprio site estático apenas com o S3 subindo o mesmo html que eu utilizei para o exemplo acima, deixarei o código disponível para você testar:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello, Insper!</title>
    <style>
      body {
        background-color: #232f3e;
      }
      label,
      button {
        color: #ff9900;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 40px;
      }
      input {
        color: #232f3e;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        margin-left: 20px;
      }
    </style>
    <script>
      var callAPI = (firstName, lastName) => {
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        var raw = JSON.stringify({ firstName: firstName, lastName: lastName });
        var requestOptions = {
          method: "POST",
          headers: myHeaders,
          body: raw,
          redirect: "follow",
        };
        fetch(
          "https://v1xfbqbit0.execute-api.us-east-1.amazonaws.com/dev",
          requestOptions
        )
          .then((response) => response.text())
          .then((result) => alert(JSON.parse(result).body))
          .catch((error) => console.log("error", error));
      };
    </script>
  </head>
  <body>
    <form>
      <label>Nome : </label>
      <input type="text" id="fName" />
      <label>Sobrenome : </label>
      <input type="text" id="lName" />
      <button
        type="button"
        onclick="callAPI(document.getElementById('fName').value, document.getElementById('lName').value)"
      >
        Enviar
      </button>
    </form>
  </body>
</html>

Vamos tornar tudo mais rápido?¶

Criar seu primeiro bucket no S3 de forma manual via dashboard da AWS foi fácil, não é mesmo? Mas será que é realmente viável sempre que você desejar criar um bucket, fazer todo esse procedimento várias e várias vezes? E se agora você precisasse criar o ambiente completo dessa mesma forma, criando um por um, o bucket do S3, a função Lambda, o API Gateway e o banco de dados DynamoDB, parece um pouco exaustivo e demorado, não é mesmo? Saiba que não parece, é! Mas, para nossa sorte, já temos à disposição ferramentas poderosas que criam toda nossa infraestrutura em segundos, sem que tenhamos que criar manualmente, serviço por serviço, regra por regra. Chegou a hora de conhecer e construir sua primeira Infraestrutura como código! Preparado?