Deploy de um App Next.JS no AWS S3 - Tutorial
Tags: react, nextjs, aws, cloud
Published: 2022-08-24 05:02:51

Neste post iremos aprender como fazer o deploy de uma aplicação estática Next.js no AWS S3. Mas antes de por a mão na massa, vamos entender melhor alguns conceitos básicos. 

**O que é Next.js?**

De acordo com a documentação oficial, Next.js é uma framework React flexível que fornece blocos de construção para criar aplicativos Web rápidos.
![Next.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p08tgpebruxdpfefc71g.png)
 
Ok, Mas o que é React? 
React é uma biblioteca JavaScript para construir interfaces de usuário interativas. Por interfaces de usuário, queremos dizer os elementos que os usuários veem e interagem na tela. Por biblioteca, queremos dizer que o React fornece funções úteis para construir a interface do usuário, mas deixa para o desenvolvedor onde usar essas funções em seu aplicativo.
![React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o63u1iq0ib97sudlrwy.png)

Voltamos então para o começo, o que é Next.js?
Next.js é um framework React que fornece blocos de construção para criar aplicativos da web (sim, eu já tinha escrito isso antes). Por Framework, queremos dizer que o Next.js lida com as ferramentas e configurações necessárias para o React e fornece estrutura, recursos e otimizações adicionais para seu aplicativo.

**O que é AWS S3?**

A Amazon Web Services (AWS) é a plataforma de nuvem mais adotada e mais abrangente do mundo, oferecendo mais de 200 serviços completos de datacenters em todo o mundo.
![Amazon Web Services](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4gmhcjhggvufh8ljmp9.png)
 
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.
![AWS S3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njchvm2copv7kyf3n0rz.png)

**Criando a aplicação Next.js**

Chegou a hora de criarmos a nossa aplicação Next.js. 
Primeiro, vamos garantir que seu ambiente de desenvolvimento esteja pronto. Para isso, precisamos de duas coisas:
- Ter o Node.js instalado (caso não tenha, [instale-o a partir daqui](https://nodejs.org/en/)). 
- Um editor de texto e aplicativo de terminal para este tutorial (recomendo o uso do Visual Studio Code, que é um editor de texto que já possui um terminal integrado e que pode ser baixado [aqui](https://code.visualstudio.com/download)).

Com o VS Code aberto, escolha ou crie uma pasta no local de sua escolha. Neste exemplo, irei criar uma pasta chamada NextJS dentro de da Pasta "C" do windows.
![Local onde foi criado a pasta NextJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmzve4ojcwz5tlp2tltc.png)

Vamos criar um novo aplicativo Next.js usando _create-next-app_, que configura tudo automaticamente para você. Para criar um projeto, execute:

```
npx create-next-app@latest
# ou
yarn create next-app
# ou
pnpm create next-app
```
Em seguida, escolha o nome da sua aplicação (neste caso, irei usar s3-app) e aguarde a instalação das dependências. Após a instalação, poderemos ver que várias pastas e aquivos foram criados dentro da nossa pasta:
![Organização das pastas e arquivos criados.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7uk33ycefsspjtfbl64.png)

Que tal testar o nosso recém criado app localmente? Para isso, basta entrar na pasta do seu aplicativo digitando o seguinte código no terminal:

```
cd .\s3-app\
```
Em seguida, inicie a sua aplicação localmente digitando um dos comandos a seguir:

```
# Caso tenha criado a aplicação com npm:
npm run dev
# Caso tenha criado a aplicação com yarn:
yarn dev
# Caso tenha criado a aplicação com pnpm:
pnpm dev
```

Pronto, agora é só acessar a url http://localhost:3000/ e ver a aplicação Next.js rodando localmente.
![Página Inicial do app Next.JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eutszswbpkje6gts9ccc.png)

Antes de seguir com o deploy no AWS S3, temos que fazer algumas alterações em duas partes do nosso código. No arquivo package.json, encontrado na raiz do nosso projeto, altere o comando de build que está dentro de scripts com o seguinte comando:
```
"build": "next build && next export"
```

 O package.json deve ficar da seguinte maneira:
![package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxoir55kwmmm9q8ssgq9.png)

Por último, temos que alterar o arquivo next.config.js e adicionar o seguinte código nele:

```
  experimental: {
    images: {
        unoptimized: true
    }
  } 
```

O arquivo next.config.js deve ficar da seguinte maneira:
![next.config.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mek6tpqppwlgiisa6cyz.png)

Agora que já fizemos todas alterações necessárias, resta apenas fazer o build da aplicação. Para isto, basta digitar o seguinte comando de build no terminal do VS Code:
```
# Caso tenha criado a aplicação com npm:
npm run build
# Caso tenha criado a aplicação com yarn:
yarn build
# Caso tenha criado a aplicação com pnpm:
pnpm build
```
Após o comando finalizar, podemos vizualizar uma nova pasta chamada "out". Dentro desta página se encontra o build de nossa aplicação.
![Build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ai2oxndo7g9v569q3qn.png)
 
Terminamos então a criação e configuração da nossa aplicação Next.JS. Agora vamos configurar o S3 para receber o nosso código!
 
**Upload do Next.js App no AWS S3**

Chegou a hora de levar nosso projeto para a nuvem. Para começar, faça [login na sua conta AWS](https://aws.amazon.com/pt/) e entre no S3 Management Console (você pode achar ele simplesmente digitando S3 na barra de pesquisa da página inicial).

Neste momento, precisamos criar um bucket. Um bucket não é nada mais, nada a menos que um contêiner de objetos. Um objeto é um arquivo e qualquer metadado que descreva esse arquivo. No nosso caso, o nosso arquivo será o build da nossa aplicação Next.js. Para criar um bucket, basta clicar no botão "Criar Bucket":
![Criar Bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h80ssvn27r08lf1hncnz.png)

Agora, vamos configurar o nosso bucket. Na configuração geral, digite o nome do bucket (Neste exemplo irei usar deploy-next-app)
![Configuração Geral Bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idwdqnlokxjxskcim8va.png)
 
Em configurações de bloqueio do acesso público deste bucket desmarque todos os acessos públicos, marque Eu reconheço e clique em "Criar bucket". 
![Configurações de bloqueio do acesso público do bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83aa81ybqu0vbnhhb9vr.png)

Selecione o bucket que acabamos de criar e clique na guia de "Permissões". 
![Permissões do Bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7mo0i4pdsvf77op8np7.png)

Nesta mesma página, procure por "Política de bucket", onde vamos editar a mesma. Uma política de bucket é baseada em recursos que você pode usar para conceder permissões de acesso ao bucket e aos objetos contidos nele. Só o proprietário do bucket pode associar uma política a um bucket. Vamos editar esta política para conceder acesso a qualquer pessoa que queira acessar o nosso site. Clique em "Editar" para adicinar a permissão.
![Editar política do bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ye4f1zi90ij7wjlutjq5.png)

Na parte de editar instrução, coloque a seguinte permissão, caso tenha criado o nome do bucket como deploy-next-app. Caso contrário, substitua "deploy-next-app" pelo nome do seu bucket. Em seguida clique em "Salvar alterações"

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1380877761162",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::deploy-next-app/*"
        }
    ]
}
```

Agora que já editamos as permissões, clique em "Propriedades", procure por "Hospedagem de site estático" e clique em editar. Nele
Ative a opção de "Hospedagem de site estático", em "Tipo de hospedagem" selecione a opção "Hospedar um site estático" e por último coloque "index.html" e "404.html" como "Documento de índice" e "Documento de erro", respectivamente. Em seguida clique em "Salvar alterações".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivjbm71bp9x8wwcwc27d.png)

Após salvar as alterações, ainda na parte de propriedades do bucket, procure por "Hospedagem de site estático" e salve o endpoint que foi criado. Este será o link para acessar o site.
![Endpoint do bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ri1nxstipoy6307r45v.png)

Precisamos colocar o arquivo de build que geramos na nossa aplicação Next.js (a pasta out, lembra dela?). Para isso, dentro do seu bucket, selecione a aba "Objetos" e clique em "Carregar".
![Upload de objetos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts97s9aa6s6iyh2zt6om.png)

Selecione todos os arquivos que estão dentro da pasta "out" do diretório da sua aplicação Next.js (São os objetos que estão DENTRO da pasta, e não a pasta). Em seguida clique em "Carregar".
![Upload arquivos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9od87ubn3hssnjyeufz.png)

É isso! Basta acessar o link que está disponível em Propriedades e acessar a site na nuvem AWS.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrhloz5165hdjc14qs0a.png)

**Importante! Como deletar o bucket**

Agora que você já sabe como colocar a sua aplicação Next.js no AWS S3, é importante também saber como excluir o mesmo e evitar qualquer tipo de cobrança pela parte da AWS. Para fazer isso, entre no seu bucket e selecione todos os objetos que estão dentro dele e clique em "Excluir".
 ![Objetos dentro do bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkki4nwdhwdwgm4ndm3j.png)
 
Por último, na lista de Buckets, selecione o bucket que foi criado para este tutorial e clique em "Excluir".
 ![Excluir Bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2h2ay4jduix3z9na04f.png)

Desta forma evitamos qualquer surpresa na sua cobrança da AWS e possíveis dores de cabeça.

**Conclusão**

Neste tutorial vimos como fazer um deploy de uma aplicação Next.js no provedor de cloud AWS. Lembrando que existem outros recursos da AWS onde você pode fazer o deploy do seu site. 

Espero que tenham gostado e até a próxima!