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.
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.
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.
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.
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.
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:
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.
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:
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:
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.
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":
Agora, vamos configurar o nosso bucket. Na configuração geral, digite o nome do bucket (Neste exemplo irei usar deploy-next-app)
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".
Selecione o bucket que acabamos de criar e clique na guia de "Permissões".
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.
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".
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.
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".
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".
É isso! Basta acessar o link que está disponível em Propriedades e acessar a site na nuvem AWS.
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".
Por último, na lista de Buckets, selecione o bucket que foi criado para este tutorial e clique em "Excluir".
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 (0)