Este artigo explica como você pode colocar em contêiner um aplicativo Next.js com um Dockerfile para uma implantação personalizável. Como alternativa, você pode implantar um aplicativo Next.js na Kinsta usando a implantação automática.

Com o Docker, empacotamos um aplicativo, seu ambiente e suas dependências em um contêiner isolado. Um contêiner consiste em um aplicativo executado em uma versão reduzida do Linux. Uma imagem do Docker é o projeto de um contêiner, e o contêiner é uma instância em execução de uma imagem.

Para colocar um aplicativo em um contêiner, usamos um método declarativo por meio de um Dockerfile. O Docker lê e executa os scripts definidos nesse arquivo para criar e implantar seu aplicativo.

Vantagens de colocar o seu aplicativo em contêineres

Colocar seu aplicativo em contêineres traz várias vantagens, como portabilidade, estabilidade, escalabilidade, segurança e desempenho. Ao implantar um aplicativo na Kinsta com um Dockerfile, você também aproveita sua capacidade de personalização.

Portabilidade

O Docker encapsula tudo o que um aplicativo precisa para rodar, permitindo que sejam facilmente transferidos entre ambientes. Se você estiver executando localmente, em um computador com um sistema operacional diferente ou em ambientes de teste e produção, o Docker constrói o aplicativo com os mesmos componentes, facilitando o código, teste e implantação.

Escalabilidade

Com o Docker, você pode executar várias instâncias do seu contêiner em diferentes servidores. Os orquestradores de contêineres lidam com o aumento do tráfego sem afetar o desempenho do seu aplicativo.

Estabilidade

Ao executar seu aplicativo em um contêiner isolado, você tem resultados previsíveis ao mover o código entre os sistemas de desenvolvimento, teste e produção. Como o contêiner contém versões exatas das bibliotecas e dos pacotes necessários, você minimiza o risco de bugs devido a diferentes revisões de dependências.

Além disso, quando seu aplicativo é implantado em um servidor de produção, o Docker o mantém isolado de outros aplicativos, minimizando o risco de você ser afetado pelos picos de tráfego deles.

Segurança

Os contêineres do Docker oferecem um ambiente mais seguro para suas cargas de trabalho do que os modelos tradicionais. Como eles dividem seus aplicativos em componentes muito menores e pouco acoplados, cada um isolado do outro, há uma superfície de ataque significativamente reduzida. Os contêineres do Docker diminuem a chance de os hackers explorarem seus sistemas de computador e dificultam a disseminação de uma violação no caso de um ataque. Saiba mais neste artigo: 9 práticas recomendadas de segurança para contêineres do Docker.

Desempenho

Os contêineres não contêm um sistema operacional completo, como as máquinas virtuais e os servidores tradicionais. Com isso, os contêineres ocupam um espaço consideravelmente menor e são mais rápidos de construir e iniciar.

Implantação personalizada

Com a Kinsta, você pode implantar seus aplicativos automaticamente usando Buildpacks e Nixpacks. Mas quando o processo de build é acionado automaticamente com base no código-fonte do seu aplicativo, você não tem muito espaço para personalizações. Se você implantar na Kinsta com um Dockerfile, poderá configurar exatamente como deseja construir e implantar seu aplicativo.

Requisitos

Para implantar um aplicativo Next.js com o Docker, você precisa de:

Comece com um aplicativo Next.js

Se estiver começando com um aplicativo existente, você pode pular esta etapa. Se você estiver começando do zero, crie um novo aplicativo Next.js:

  1. Abra o terminal e instale create-next-app:
npm i -g create-next-app@latest
  1. Navegue até o diretório onde você deseja instalá-lo e crie um novo aplicativo Next.js em seu próprio diretório:
npx create-next-app@latest new-app

O Next solicita que você especifique várias opções de configuração para seu novo aplicativo. Para este tutorial, você pode simplesmente aceitar os padrões sugeridos.

  1. Para visualizar seu novo aplicativo, navegue até o diretório new-app e execute:
npm run dev

Para você ter uma referência, criamos um aplicativo de exemplo usando esse método.

Colocando um aplicativo Next.js em um contêiner com um Dockerfile

Para colocar seu aplicativo Next.js em contêiner e implantá-lo com o Docker, crie um Dockerfile no diretório raiz do seu aplicativo.

Etapa de build

Em seu Dockerfile, comece criando o estágio build do aplicativo para construir seu aplicativo:

  1. Use a imagem alpine oficial mais recente e estável do Node.js como a imagem de base para o estágio build:
FROM node:18-alpine AS build
WORKDIR /app
  1. Copie os arquivos package.json e package-lock.json para o contêiner:
COPY package*.json ./
  1. Instale as dependências do aplicativo com:
RUN npm ci
  1. Copie o restante do código do aplicativo para o contêiner com:
COPY . .
  1. Crie o aplicativo:
RUN npm run build

Estágio de tempo de execução (Runtime)

Crie o estágio runtime para implantar seu aplicativo:

  1. Use a imagem alpine oficial mais recente e estável do Node.js como a imagem de base para o estágio runtime:
FROM node:18-alpine AS runtime
  1. Defina o diretório de trabalho como /app:
WORKDIR /app
  1. Copie os arquivos package.json e package-lock.json para o contêiner:
COPY package*.json ./
  1. Instale somente as dependências de produção:
RUN npm ci --only=production
  1. Copie o aplicativo criado do estágio build para o estágio runtime:
COPY --from=build /app/.next ./.next
  1. Copie a pasta pública do estágio build para o estágio runtime:
COPY --from=build /app/public ./public
  1. Exponha a porta 3000:
EXPOSE 3000
  1. Execute o contêiner como um usuário sem privilégios:
USER node
  1. Inicie o aplicativo Next.js:
CMD ["npm", "start"]

Você terá o seguinte Dockerfile:

FROM node:18-alpine AS build

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine AS runtime

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public

EXPOSE 3000
USER node
CMD ["npm", "start"]

Implante o aplicativo localmente com o Docker

Embora você ainda possa visualizar seu aplicativo com run npm dev, execute localmente com o Docker para simular o ambiente de produção e para testar e visualizar quaisquer alterações feitas no Dockerfile do aplicativo.

Para visualizar seu aplicativo:

  1. Crie o aplicativo com docker build:
docker build -t next-docker .
  1. Execute o contêiner para visualizar o aplicativo:
docker run -p 3000:3000 next-docker
  1. Em seu navegador, abra http://localhost:3000.

Implante o aplicativo Next.js em contêiner na Kinsta

Siga as etapas abaixo para implantar seu aplicativo na Kinsta usando o Dockerfile.

  1. Hospede a base de código do seu aplicativo em um repositório Git (no GitHub, GitLab ou Bitbucket).
  2. Faça login em sua conta MyKinsta ou crie uma nova conta para acessar seu painel de controle.
  3. Clique em Adicionar serviço e selecione Aplicativo.
  4. Selecione seu provedor Git, repositório e o branch do qual você deseja implantar.
  5. Marque a caixa de seleção Implantação automática no commit se você quiser implantar seu aplicativo a cada push para o seu repositório.
  6. Selecione o centro de dados mais próximo do seu público e clique em Continue.
  7. Escolha seu ambiente de build e selecione Usar Dockerfile para configurar a imagem do contêiner.
  8. Se o seu Dockerfile não estiver na raiz do seu repositório, use Context para indicar o caminho e clique em Continue.
  9. Você pode deixar a entrada Comando Start vazio. A Kinsta usa npm start para iniciar seu aplicativo.
  10. Selecione o tamanho do pod e o número de instâncias mais adequados para o seu aplicativo e clique em Continue.
  11. Preencha as informações do seu cartão de crédito e clique em Criar aplicativo.

Seu aplicativo está pronto para ser implantado. Se você marcou a caixa de seleção Implantação automática no commit na etapa 5, a Kinsta iniciará a implantação automaticamente.

Resumo

Neste artigo, discutimos algumas vantagens de usar o Docker em relação aos modelos tradicionais; explicamos como criar um Dockerfile para um aplicativo Next.js, criá-lo e implantá-lo com o Docker localmente e implantá-lo na Kinsta.

A hospedagem de aplicativos da Kinsta torna seu fluxo de trabalho de desenvolvimento fácil e eficiente.

Recursos como aplicativos em contêineres na infraestrutura do Google Cloud Platform executados em máquinas C2 com 37 centros de dados disponíveis, integração premium com o Cloudflare para um CDN de alto desempenho que atende ao seu site a partir de 260+ Pontos de Presença, proteção DDoS de firewall de nível empresarial, Edge Caching e monitoramento de tempo de atividade (com garantia de 99% de tempo de atividade), garantem que seu aplicativo seja executado de forma rápida, segura e disponível de forma confiável para a Internet.

Marcia Ramos Kinsta

Sou o líder da equipe editorial na Kinsta. Sou um entusiasta de código aberto e adoro programar. Com mais de 7 anos de experiência em redação e edição técnica para a indústria de tecnologia, adoro colaborar com pessoas para criar conteúdos claros e concisos e melhorar fluxos de trabalho.