Introdução

A implantação de um aplicativo da web Next.js na produção pode ser simplificada e eficiente ao aproveitar os pipelines Elastic Beanstalk, Docker e CI/CD da AWS (Amazon Web Services) com AWS Code Build, Code Deploy e GitLab. Este guia orientará você na configuração de um pipeline de implantação moderno para garantir que seu aplicativo seja robusto, escalonável e fácil de manter.

Pré-requisitos

Antes de mergulhar no processo de implantação, certifique-se de ter:

• Uma conta raiz da AWS ou uma conta IAM com permissão para criar ambientes do Elastic Beanstalk na AWS

• Docker instalado em sua máquina local

• Conta GitHub ou GitHub com um repositório para seu aplicativo Next.js

• Um projeto Next.js pronto para implantação

Etapa 1: configurar o AWS Elastic Beanstalk

• Crie um ambiente do Elastic Beanstalk: faça login no Console de gerenciamento da AWS, navegue até o Elastic Beanstalk e crie um novo aplicativo.

• Digite o nome do seu aplicativo e clique em Criar.

• Depois de criar a aplicação, é hora de criar o Novo Ambiente. Clique em Criar novo ambiente.

• Escolha o ambiente do servidor Web. O nome do ambiente terá o sufixo env junto com o nome do seu aplicativo e você poderá editá-lo se desejar.

• Insira o nome do ambiente válido junto com o domínio. Digite o nome de domínio .

• Escolha a plataforma apropriada. Neste caso, escolheremos Plataforma Gerenciada e Docker como plataforma.

• No código do aplicativo, escolha Aplicativo de exemplo, pois implantaremos nosso próprio código por meio do AWS Code Pipeline.

• Nos presets você pode deixar no padrão, porém, para aplicações em produção, é aconselhável utilizar a instância Alta disponibilidade. Depois de selecionar a predefinição, clique em Avançar.

• Crie ou use sua função de serviço existente. É importante ter a função de serviço do Elastic Beanstalk junto com a configuração da função de serviço do EC2 antes de prosseguir com a criação da instância do EC2.
  No entanto, se você deseja fazer SSH na instância do EC2 a partir do seu terminal, adicione um par de chaves do EC2 e crie um perfil de instância do EC2 para executar as operações necessárias.

• Escolha a VPC na qual deseja implantar sua instância do EC2.

• Após selecionar a VPC, escolha a sub-rede em cada zona de disponibilidade. Para executar o balanceador de carga e as instâncias nas mesmas sub-redes públicas, atribua endereços IP públicos às instâncias, conforme mostrado na imagem.

• Como não precisamos configurar um banco de dados, podemos continuar para a próxima etapa clicando em Avançar.

• Para volume raiz, escolheremos SSD de uso geral.

• Agora, no grupo de segurança, você pode selecionar um grupo de segurança já existente ou deixá-lo como está, e o Elastic Beanstalk criará um para você enquanto configura a instância do EC2.

• Se estiver implantando para fins de produção, é sempre aconselhável configurar o escalonamento automático e selecionar o tipo de instância que o Elastic Beanstalk criará para atender ao tráfego. Iremos com a família t3.

• Clique em Avançar.

• Nos relatórios de saúde, usaremos os relatórios Básicos, mas fique à vontade para escolher entre as opções disponíveis com base no tipo de relatório que você precisa.

• Também desmarcaremos as atualizações da plataforma gerenciada, pois elas não são necessárias para o site de demonstração.

• Mantenha o restante das configurações como estão e clique em Avançar.

• Finalmente, revise suas alterações e clique em Enviar.

• O Elastic Beanstalk iniciará seu ambiente e isso levará algum tempo.

• Após um lançamento bem-sucedido, você verá a tela de parabéns.

Etapa 2: crie seu aplicativo Next.js (ou use um existente)

• Para criar um aplicativo Next.js, abra seu terminal, faça cd no diretório em que deseja criar o aplicativo e execute o seguinte comando:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" 

Se você já tem seu código existente pronto, você pode pular para a próxima parte

• Agora você tem um novo diretório chamado nextjs-blog. Vamos entrar nisso:

cd nextjs-blog 

Em seguida, execute o seguinte comando:

npm run dev 

Isso inicia o "servidor de desenvolvimento" do seu aplicativo Next.js (mais sobre isso mais tarde) na porta 3000.

Vamos verificar se está funcionando. Abra http://localhost:3000 no seu navegador.

• Agora é hora de criar um Dockerfile dentro do aplicativo.

• Crie um arquivo chamado Dockerfile na raiz da sua aplicação e adicione o seguinte código:
  

FROM node:18-alpine 

RUN mkdir -p /app 

WORKDIR /app 

COPY . . 

RUN npm install 

RUN npm run build 

EXPOSE 3000 

CMD ["npm", "start"] 

• Após fazer as alterações, é importante verificar se a compilação foi bem-sucedida. Inicie o mecanismo docker e execute o seguinte comando:

docker build -t testapp . 

Assim que a compilação for bem-sucedida, execute o aplicativo com o comando abaixo:

docker run -p 3000:3000 testapp 

• Crie um arquivo chamado buildspec.yml na raiz do seu aplicativo e adicione o código a seguir. Este arquivo será usado posteriormente ao configurar o pipeline de código na AWS.

version: 0.2 

artifacts: 

  type: zip 

  files: 

    - '**/*' 

• Depois de adicionar esses arquivos ao seu código novo ou existente, envie essas alterações para o repositório remoto no Gitlab ou GitHub.

Etapa 3: configurar o pipeline de código

• Faça login no AWS Management Console, navegue até Code Pipeline e clique em criar pipeline.

• Insira um nome de pipeline válido e escolha o modo de execução do pipeline. No nosso caso, selecionaremos Em fila (é necessário pipeline tipo V2).

• Crie uma nova função de serviço se ela ainda não existir ou selecione uma função de serviço existente e clique em Avançar.

• No provedor de origem, selecione onde você tem seus artefatos armazenados. Selecionaremos "Gitlab".

• Na lista de conexões, selecione uma conexão existente ou crie uma nova conexão.

• Assim que a conexão for bem-sucedida, selecione o nome do repositório e a ramificação da qual o código será usado.

• Para o tipo de gatilho, escolheremos Sem filtro e clicaremos em Avançar.

• Em seguida, selecionamos o Build Provider. No nosso caso, selecionaremos AWS Code Build. Selecione a região ou deixe a região padrão da AWS.

• Em seguida, crie um novo projeto no Code Build clicando em Criar projeto. Isso abrirá uma nova janela. Digite o nome do projeto e deixe tudo dentro do Ambiente como padrão.

• Ao especificar a especificação de compilação, certifique-se de selecionar Usar arquivo buildspec. Este é o mesmo arquivo que criamos anteriormente. Deixe as outras configurações como padrão e vá para a próxima etapa.

• Quando você clica em Continuar para o pipeline de código, a janela será fechada automaticamente e o levará de volta à tela do pipeline de código.

• Especifique o tipo de compilação como compilação única e clique em Avançar.

• No estágio adicionar implantação, selecione o provedor de implantação. Nesse caso, será no AWS Elastic Beanstalk onde queremos que o aplicativo seja finalmente implantado.

• Selecione o nome do aplicativo, o nome do ambiente, defina as configurações de reversão e clique em Avançar. Revise as configurações do pipeline de código e clique em Criar pipeline.

Etapa 4: o site está ativo!

A implantação do aplicativo Web Next.js na produção é realmente fácil e pode ser feita de maneira mais eficiente com AWS Elastic Beanstalk, Docker e pipelines de CI/CD usando AWS Code Build, Code Deploy e GitLab.

Você pode acessá-lo usando o URL fornecido pelo Elastic Beanstalk. Faça alterações localmente e ele será implantado automaticamente quando você enviar para sua filial.

Boa codificação!!