如何在VPS上部署Next.js应用 - Probably Peter | DevOps / Infrastructure Tutorial

在虚拟专用服务器（VPS）上部署 Next.js 应用程序涉及多个关键步骤，从搭建服务器环境到配置反向代理和进程管理器。本指南重点介绍基于 Ubuntu 的 VPS 环境，使用 Nginx 作为反向代理，PM2 进行进程管理，并通过 Certbot 获取 SSL 证书。

前提条件：

运行 Ubuntu 的 VPS（例如 20.04、22.04 或 24.04）。
已注册的域名，其 DNS 记录指向 VPS 的 IP 地址。
具备 Linux 命令行基础知识。
已准备就绪的Next.js应用程序（建议已推送至Git仓库）。

步骤1：连接VPS并更新系统

通过SSH连接：打开终端，使用SSH连接VPS：bash ssh your_username@your_vps_ip 将 your_vps_ip 替换为您的 VPS 的实际 IP 地址。
更新并升级系统软件包：确保服务器软件包处于最新状态对安全性和稳定性至关重要。 bash sudo apt update && sudo apt upgrade -y

第二步：安装 Node.js 和 npm/yarn

Next.js 需要 Node.js。您可以使用 Node Version Manager (NVM) 进行灵活的版本管理，或直接从 Ubuntu 存储库安装 Node.js。通常推荐使用NVM。

方案A：使用NVM安装Node.js（推荐） 1. 安装NVM：bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash (注：v0.39.7版本来自搜索结果，最新版本请查阅NVM GitHub页面。) 2. 激活NVM：根据您的终端环境，可能需要关闭并重新打开终端，或执行以下命令之一： bash source ~/.bashrc # 或 source ~/.profile 或 source ~/.zshrc3. 安装 Node.js 长期支持版本：bash nvm install --lts或安装特定版本，例如：nvm install 20 4. 验证安装：bash node -v npm -v 执行后应显示已安装的Node.js和npm版本。

方案B：从Ubuntu软件仓库安装Node.js和npm 1. 安装Node.js： bash sudo apt install nodejs -y2. 安装 npm：bash sudo apt install npm -y3. 验证安装：bash node -v npm -v

步骤 3：部署 Next.js 应用程序

克隆您的仓库：导航至合适的目录（例如 /var/www/），从 Git 仓库克隆您的 Next.js 项目。 bash sudo mkdir -p /var/www/your-app-name sudo chown -R your_username:your_username /var/www/your-app-name cd /var/www/your-app-name git clone https://github.com/your-username/your-nextjs-app.git . 如果您的存储库是私有存储库，请确保您已设置 SSH 密钥或使用个人访问令牌通过 HTTPS 进行克隆。
安装依赖项并构建：安装项目的依赖项，然后为生产环境构建 Next.js 应用程序。 bash npm install # 或 yarn install npm run build # 或 yarn buildnpm run build 命令将生成应用程序的优化生产构建版本。

步骤 4：安装并配置 PM2（进程管理器）

PM2 是 Node.js 应用程序的运行时进程管理器，可无限期维持进程存活并实现便捷管理。

npm install -g pm2

使用 PM2 启动 Next.js 应用程序。Next.js 应用程序默认通常运行在 localhost:3000 上。

pm2 start npm --name "my-nextjs-app" -- start

请将"my-nextjs-app"替换为应用程序的描述性名称。

为确保 PM2 在服务器重启时自动重启应用程序：

pm2 startup systemd pm2 save

步骤 5：配置 Nginx 作为反向代理

Nginx 将作为反向代理，将来自您域名的请求转发至运行在 3000 端口的 Next.js 应用程序。

sudo apt install nginx -y

为您的站点创建新的 Nginx 配置文件。将 your_domain.com 替换为您实际的域名。

sudo nano /etc/nginx/sites-available/your_domain.com

添加以下配置：

server {  listen 80;
 server_name your_domain.com www.your_domain.com;

 location / {
 proxy_pass http://localhost:3000; # Next.js 默认端口
 代理_http_版本 1.1;
 代理设置头 Upgrade $http_upgrade;
 proxy_set_header Connection 'upgrade';  proxy_set_header Host $host;
 proxy_cache_bypass $http_upgrade;  }
}

通过创建指向sites-enabled的符号链接启用站点，并测试Nginx配置：

sudo ln -s /etc/nginx/sites-available/your_domain.com /etc/nginx/sites-enabled/
sudo nginx -t

测试成功后重启 Nginx：

sudo systemctl restart nginx

步骤 6：配置防火墙 (UFW)

若使用 UFW（简易防火墙），请允许 HTTP（端口 80）和 HTTPS（端口 443）流量通过。

sudo ufw allow 'Nginx Full'
sudo ufw enable

步骤 7：（可选）使用 Certbot（Let's Encrypt）配置 SSL

为应用程序启用 HTTPS 安全传输，请通过 Certbot 从 Let's Encrypt 获取并配置 SSL 证书。

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your_domain.com -d www.your_domain.com

按提示操作。Certbot将自动修改Nginx配置并设置证书自动续期。

步骤 8：验证部署

此时应可通过域名（若跳过域名设置则使用 VPS IP 地址）访问您的 Next.js 应用程序（需通过 HTTPS）。请打开浏览器访问 https://your_domain.com。

(可选) 配置 CI/CD

若需自动化部署，建议使用 GitHub Actions、GitLab CI 或 Jenkins 等工具搭建持续集成/持续部署（CI/CD）管道。此管道可在您向仓库推送新代码时，自动执行克隆、安装、构建及在 VPS 上重启应用程序等步骤。

现在您应该能通过域名访问 Next.js 应用程序了！