Implante Next.js em um VPS: da construção ao HTTPS

#Prepare uma versão identificável

Comece com um commit conhecido, seu lockfile e uma versão do Node compatível com a versão Next.js instalada. Para npm, npm ci instala dependências desse arquivo de bloqueio. Mantenha o gerenciador de pacotes existente e o modo de instalação reproduzível para pnpm ou Yarn.

Crie em um diretório de lançamento ou CI, em vez de dentro do diretório de saída de um servidor em execução. Uma compilação pode executar código de aplicativo e entrar em contato com serviços. Forneça as variáveis ​​necessárias sem colocar segredos em público. Os valores NEXT_PUBLIC_ destinam-se ao navegador e são incorporados durante a construção.

node --version
npm ci
npm run build

#Inicie o servidor de produção em loopback

Verifique se o script inicial é executado na próxima inicialização. O servidor de desenvolvimento não é o processo a ser mantido em produção. A ligação a 127.0.0.1 limita o acesso direto ao servidor e seu proxy local, mantendo a porta do aplicativo fora da interface pública.

Em outro terminal, inspecione uma página real com curl -i http://127.0.0.1:3000/. Verifique seu conteúdo e ativos. Se você selecionou saída: autônomo, use o server.js gerado e sua estrutura de diretório esperada, incluindo público e .next/static. Esse modo tem seu próprio ponto de entrada.

npm run start -- --hostname 127.0.0.1 --port 3000

#Deixe o systemd gerenciar o processo

Uma unidade systemd executa o serviço independentemente da sua sessão. Este exemplo pressupõe uma conta webapp existente e uma versão em /srv/my-next-app. Verifique o caminho do nó com o comando -v node e adapte o ExecStart. A conta precisa ler o comunicado e gravar apenas nos locais do aplicativo que exigem isso.

Mantenha as variáveis ​​do servidor no arquivo de ambiente com permissões apropriadas para a conta de serviço. Após instalar a unidade em seu ambiente, valide-a com systemd-analyze verify, recarregue o systemd e inicie o serviço. Inspecione seu diário se a inicialização falhar. As reinicializações automáticas não substituem a investigação de uma saída relacionada à memória.

[Unit]
Description=My Next.js application
After=network.target

[Service]
Type=simple
User=webapp
WorkingDirectory=/srv/my-next-app
Environment=NODE_ENV=production
EnvironmentFile=/etc/my-next-app.env
ExecStart=/usr/bin/node /srv/my-next-app/node_modules/next/dist/bin/next start --hostname 127.0.0.1 --port 3000
Restart=on-failure
RestartSec=5

[Install]
WantedBy=multi-user.target

#Rotear o domínio para o aplicativo

Dentro do bloco de servidores do domínio, um local pode encaminhar solicitações para a aplicação local. O fragmento a seguir cobre HTTP e streaming; integre-o à configuração existente e execute nginx -t antes de recarregar. Não é uma configuração TLS completa.

O domínio precisa ser resolvido para o VPS e ter um certificado válido com renovação funcional. Preserve o host e o protocolo original do aplicativo. Comece sem um cache de resposta dinâmica compartilhado: páginas privadas, cookies e variantes de navegação precisam de uma política explícita. Se o aplicativo usar WebSockets, adicione o tratamento de cabeçalho de atualização Nginx apropriado separadamente.

location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_buffering off;
}

#Verifique o site público

Uma resposta 200 da página inicial não verifica todo o aplicativo. Exercite uma rota dinâmica, uma página faltante, login, logout e um formulário. Verifique redirecionamentos, cookies seguros, imagens e navegação em um navegador.

Teste também uma página de streaming. Se o conteúdo chegar de uma só vez através do domínio, mas progressivamente em loopback, examine o buffer em cada intermediário. Mantenha a versão anterior e sua configuração antes de mudar o tráfego. A reversão do código do aplicativo também requer compatibilidade com quaisquer migrações de banco de dados.

#Dimensione e evolua a implantação

Meça a memória ociosa, os picos de tráfego e a sobreposição de implantação. Duas versões podem coexistir brevemente e a construção do VPS adiciona seu próprio pico. O banco de dados e o proxy também pertencem ao orçamento total.

Para avaliar PRNext, retenha a referência Next.js e construa um candidato em outro diretório. Verifique o comportamento e o desempenho do seu aplicativo antes de alterar seu tempo de execução.

Dimensione a memória VPS para Next.js

Verifique a compatibilidade do PRNext antes de migrar