Deploy aplicações NextJs com Docker Nginx

Considera-se o uso de aplicações NextJs não somente React.

Deploy em subdomínio

1. Para realizar o deploy de aplicações NexJs com Docker e Nginx em um subdomínio devemos incialmente realizar a seguinte configuração em next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};
const assetPrefix = "/myPrefix/";
module.exports = {
  ...nextConfig,
  assetPrefix,
};

Por padrão o servidor Next busca os assets gerados em / e /_next . Configurarando o assetPrefix ele passa a adicionar o caminho especificado aos assets ficando /myPrefix e myPrefix/_next o que permite realizar o correto encaminhamento através do proxy reverso da Nginx.

1. Dockerfile para build e execução do servidor Next

# Uso de node:latest diretamente (sem estágio de construção separado)

FROM node:latest

WORKDIR /usr/src/app

# Copiar apenas os arquivos necessários para instalar as dependências
COPY package*.json ./


# Instalar dependências
RUN npm install

# Copiar todo o restante do código para o contêiner
COPY . .

# Executar o build
RUN npm run build

# Expor a porta em que o aplicativo está configurado para ouvir (se necessário)
EXPOSE 4001

# Comando para iniciar a aplicação
CMD ["npm", "start"]

1. Podemos agora criar um novo arquivo .conf para a nginx no diretório /etc/nginx/includes e inclui-lo no arquivo default de /etc/nginx/sites-available.

location /myPrefix {
        proxy_pass http://localhost:4445/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        location /myPrefix/_next {
            proxy_pass http://localhost:4445/_next;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
}

Deploy na raiz do servidor

Alternativamente podemos realizar o deploy de aplicações Next como home do domínio (server_name) do servidor. Neste caso não é necessário alterar o prefixo dos assets. O Dockerfile também é o mesmo do deploy em subdomínio. A unica alteração necessária é em relação a configiração dos bolocos location da Nginx.

location / {
        proxy_pass http://localhost:4445/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        location /_next {
            proxy_pass http://localhost:4445/_next;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
}