DEV Community

Cover image for Deploy de um App Next.JS no AWS S3 - Tutorial
Diego Cravo Teixeira
Diego Cravo Teixeira

Posted on

Deploy de um App Next.JS no AWS S3 - Tutorial

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

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

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

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

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).
  • 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).

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

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
Enter fullscreen mode Exit fullscreen mode

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.

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\
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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"
Enter fullscreen mode Exit fullscreen mode

O package.json deve ficar da seguinte maneira:
package.json

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

  experimental: {
    images: {
        unoptimized: true
    }
  } 
Enter fullscreen mode Exit fullscreen mode

O arquivo next.config.js deve ficar da seguinte maneira:
next.config.js

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
Enter fullscreen mode Exit fullscreen mode

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

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 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

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

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

Selecione o bucket que acabamos de criar e clique na guia de "Permissões".
Permissões do Bucket

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

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/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

É isso! Basta acessar o link que está disponível em Propriedades e acessar a site na nuvem AWS.
Image description

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

Por último, na lista de Buckets, selecione o bucket que foi criado para este tutorial e clique em "Excluir".
Excluir Bucket

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!

Top comments (1)

Collapse
 
jefferson_motta_1062136a1 profile image
Jefferson Motta

Não funcionou. Não inicia o App.