Como criar e publicar uma aplicação Angular no Amazon S3
Tags: awss3, angular, serverless
Published: 2021-10-04 00:20:39

---
title: Como criar e publicar uma aplicação Angular no Amazon S3
published: true
date: 2021-10-04 00:14:14 UTC
tags: awss3,angular,serverless
---

#### E porque você não deveria subir um servidor pra isso

![Angular + AWS S3 Logos](https://cdn-images-1.medium.com/max/1024/1*6hG9ziB1aGx4ZS1Hegy1Ng.png)

Se você ainda hospeda as suas aplicações frontend em servidores web como apache ou nginx, sinto dizer mas você provavelmente está perdendo dinheiro.

Quando se fala em serverless, sempre pensamos no Lambda da AWS, no Google Cloud Functions, App Engine, etc. Eu mesmo hospedei aplicações Angular usando contêineres por bastante tempo, até surgir a seguinte dúvida:

> Se servimos arquivos estáticos, pra que diabos a gente precisa subir um servidor?

No começo, ferramentas como S3 e Google Cloud Storage não serviam pra muita coisa senão armazenar e servir arquivos, mas conforme a nuvem foi evoluindo, esses serviços se tornaram ferramentas bastante poderosas a ponto de podermos utilizá-las para hospedar uma Single Page Application, eliminando a necessidade de subirmos servidores pra isso.

Mas chega de papo furado. Mão na massa!

### Criando a aplicação

Nesse artigo, vamos usar o "hello world" do Angular como exemplo, que é o app gerado com o ng new. Antes de continuar, você precisa dos seguintes requisitos:

- Possuir a [versão LTS do Node.js](http://nodejs.org) instalada
- Instalar o Angular CLI com o comando npm install -g @angular/cli

Com o node e o CLI instalado, basta rodar o comando ng new my-s3-app para criar o seu app. Ele vai te perguntar duas coisas:

- **Would you like to add Angular routing? (y/N)**
- **Which stylesheet format would you like to use?**

Na prática não faz muita diferença o que escolhermos aqui, mas por força do hábito eu sempre escolho adicionar o routing (preencha y e aperte enter) e selecionar o SCSS (use as setas e pressione enter) para os estilos.

Feito isso o Angular vai gerar a aplicação e instalar as dependências necessárias pro seu projeto ser executado. Abra a pasta do projeto no terminal e digite um ng serve para executar o servidor localmente e ver se está tudo certo. Acesse localhost:4200 no navegador, você deve ver a seguinte página:

![Uma captura de tela da página que o Angular cria quando geramos uma aplicação com o Angular CLI.](https://cdn-images-1.medium.com/max/1024/1*fzWLVri_VjPMDsaqI2ALFQ.png)

Rode o comando ng build no terminal. Ele deve gerar uma pasta **dist** dentro do projeto com a versão de produção do seu app. Lembra dessa pasta porque são os arquivos dela que nós vamos subir pro S3. O meu gerou assim:

![Captura de tela do console indicando os arquivos que foram gerados: main, polyfills, runtime e styles.](https://cdn-images-1.medium.com/max/1024/1*GwduQBE-U_T9OyRH4jfnuw.png)

### Publicando no Amazon S3

Agora, vamos publicar a nossa aplicação no S3. Antes disso você vai precisar de uma conta AWS para continuar. Caso não tenha, você pode se cadastrar em [https://aws.amazon.com](https://aws.amazon.com). No primeiro ano, você vai poder testar vários serviços sem pagar nada por causa da camada gratuita. É uma ótima oportunidade pra experimentar diferentes serviços e configurações.

#### Criando o Bucket

Uma vez logado no console, selecione o menu **Services** > **Storage** > **S3** para acessar o console do S3. No console, precisaremos criar um bucket, que é onde vamos armazenar a nossa aplicação. O nome do bucket é único entre todas as contas da AWS, e além disso ele fará parte do nome de domínio, então precisamos escolher um nome específico que ainda não tenha sido usado, mas ao mesmo tempo não usarmos um nome esquisito porque ele vai ficar exposto.

Dependendo da região, o S3 pode usar dois formatos de URL:

- **s3-website dash (-) Region** ‐ [http://nomedobucket.s3-website-](http://bucket-name.s3-website-Region.amazonaws.com)[_Region_](http://bucket-name.s3-website-Region.amazonaws.com)[.amazonaws.com](http://bucket-name.s3-website-Region.amazonaws.com)
- **s3-website dot (.) Region** ‐ [http://](http://bucket-name.s3-website.Region.amazonaws.com)[_nomedobucket_](http://bucket-name.s3-website.Region.amazonaws.com)[.s3-website.](http://bucket-name.s3-website.Region.amazonaws.com)[_Region_](http://bucket-name.s3-website.Region.amazonaws.com)[.amazonaws.com](http://bucket-name.s3-website.Region.amazonaws.com)

Segue abaixo a minha configuração. Essa página tem várias outras opções, mas você pode ignorar e clicar em **Create Bucket** no rodapé.

![Captura de tela da minha configuração de bucket do S3](https://cdn-images-1.medium.com/max/1024/1*LD4EHVRbZWqKwJcxVkRC-A.png)

Eu criei um bucket com o nome **my-angular-s3-app** na Region **us-west-2**. Todas as outras opções podem permanecer com seus valores default.

Ao clicar em **Create Bucket** , ele deve ficar disponível pra você no console do S3:

![Captura de tela do console do S3 listando o bucket recém criado.](https://cdn-images-1.medium.com/max/1024/1*f7YpkuMSdB07WnkBAzz-4g.png)

#### Subindo os arquivos

Clique no bucket que acabamos de criar, depois clique em upload e depois em add files. Vá para a pasta **dist** > **my-s3-app** que o ng build acabou de gerar e selecione todos os arquivos usando o mouse, ctrl+a (windows) ou cmd+a (mac). Você deve ver esse resultado:

![Captura da tela de upload com os arquivos selecionados, listando os arquivos: 3rdpartylicences.txt, favicon.icon, index.html, etc.](https://cdn-images-1.medium.com/max/1024/1*EP4ZAClL6s71n4RuCZbyjA.png)

Se tudo estiver certo, basta clicar em upload, esperar a confirmação e partir pra próxima.

#### Ativando a hospedagem

Agora, para ativarmos a hospedagem de sites estáticos, vá em **Properties** > **Static website hosting** >  **Edit**.

Na página de edição, selecione **enable** para habilitar a hospedagem de sites estáticos. Preencha index.html nos campos Index e Error document e salve as alterações.

Ao voltar na aba properties, uma URL terá sido criada:

![Captura de tela da área Static website hosting com a url criada](https://cdn-images-1.medium.com/max/1024/1*fPJNbS5Ewzf8-o8uoKObdQ.png)

Porém, ao tentar acessar, você verá a seguinte mensagem:

![Erro ao tentar acessar o bucket porque ele ainda está sem permissões de visualização.](https://cdn-images-1.medium.com/max/1024/1*oD5s03DWkDhQGWZuohPYMg.png)

Isso acontece porque todos os buckets são privados por padrão, tornando-os inacessíveis.

Para alterar isso, ainda no Bucket, vamos precisar ir na aba **Permissions** > **Block public access** >  **Edit**.

![Captura de tela das alterações feitas nas configurações de acesso do bucket. As alterações estão descritas logo abaixo.](https://cdn-images-1.medium.com/max/1024/1*Km-JcEf_MlqWImkY94Yk2g.png)

Nessa tela, desmarcamos a opção **Block _all_ public access** e deixamos marcado somente as opções:

- **Block public access to buckets and objects granted through _new_ access control lists (ACLs)**
- **Block public access to buckets and objects granted through _any_ access control lists (ACLs)**

Além disso, vamos precisar criar uma policy para garantir acesso anônimo para que os usuários possam acessar o bucket. Ainda na aba **Permissions** , vá em **Bucket policy** > **Edit**. Cole o conteúdo abaixo, substituindo a tag pelo nome do seu bucket:

```
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowPublicAccess",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::my-angular-s3-app/*",
      "Principal": "*"
    }
  ]
}
```

A minha ficou assim:

![Captura de tela da minha policy feita seguindo as instruções](https://cdn-images-1.medium.com/max/1024/1*xrx7GFoF4TuLeFfHWpIviA.png)

É importante permitir somente o GetObject, assim os usuários poderão visualizar a aplicação mas não vão conseguir alterar nenhum conteúdo do nosso bucket.

#### Sucesso!

Agora é correr pro abraço. Acesse o link fornecido em static web hosting novamente e você vai ver a página rodando:

![Captura de tela do site rodando no link do S3.](https://cdn-images-1.medium.com/max/1024/1*8lWrwkEoOxb2xCgFpdOHXg.png)

E aí, curtiu? Tem alguma dúvida? Se tiver qualquer coisa que eu possa fazer pra tornar esse artigo melhor, se quiser reclamar, elogiar ou sugerir outro artigo, manda ver nos comentários ou no [twitter](https://twitter.com/_ricardomello_). Feedbacks são sempre super bem vindos.