在 Rocky Linux 上发布Next.js的网站

在 Rocky Linux 上发布网站，核心思路是通过 Nginx 作为反向代理，将外部访问请求转发到 http://localhost:3000 的 Next.js 服务上，并用 PM2 守护 Next.js 进程，确保它稳定运行。我们可以把这个过程想成搭建一个稳固的三层结构：

• 底座是环境：安装并验证Node.js和npm。

• 中间是应用：上传代码、安装依赖、构建生产版本。

• 顶层是服务与网关：用PM2守护Next.js进程，再用Nginx反向代理并暴露给外网。

下面，我会一步步带你完成整个流程。

📝 步骤一：连接服务器并安装基础环境

1. 连接服务器：使用SSH客户端（如 Xshell、Termius 或终端）连接你的腾讯云 Rocky Linux 服务器。

2. 安装 Node.js：根据你之前提供的信息，Rocky Linux 推荐使用 Nodesource 仓库安装最新稳定版本，例如安装 Node.js 20.x LTS。

   bash

   # 添加 Nodesource 仓库并安装 Node.js
   curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
   sudo dnf install -y nodejs

3. 验证安装：

   bash

   node -v
   npm -v

   如果能正确显示版本号，说明环境准备就绪。

🚀 步骤二：部署 Next.js 应用到服务器

1. 上传项目代码：将本地 Next.js 项目的所有代码和文件（除 node_modules 文件夹外）上传到服务器的目标目录，例如 /var/www/your-app。

   小贴士：如果代码在 Git 仓库中，可以在服务器上通过 git clone <你的仓库地址> 直接拉取。

2. 安装依赖并构建：

   bash

   # 进入项目目录
   cd /var/www/your-app
   
   # 安装项目依赖
   npm install
   
   # 构建生产版本
   npm run build

   npm run build 会生成优化过的 .next 文件夹。

3. 使用 PM2 守护进程：PM2 可以让 Node.js 应用在后台运行并在崩溃时自动重启。

   • 安装 PM2（如果还没装的话）：

     bash

     sudo npm install -g pm2

   • 启动应用：

     bash

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

     这条命令会启动一个名为 "your-nextjs-app" 的进程来运行 npm start。

   • 设置开机自启（可选）：这样万一服务器重启了，Next.js 也能自动恢复。

     bash

     pm2 save
     pm2 startup

🌐 步骤三：安装与配置 Nginx 反向代理

Nginx 作为 Web 服务器，将来自互联网的请求高效地转发给 localhost:3000 上的 Next.js 服务。

1. 安装 Nginx：

   bash

   sudo dnf install -y nginx

2. 启动并设置 Nginx 开机自启：

   bash

   sudo systemctl start nginx
   sudo systemctl enable nginx

3. 配置反向代理：创建一个新的 Nginx 配置文件。

   bash

   sudo vim /etc/nginx/conf.d/nextjs.conf

   粘贴以下配置（将 your-domain.com 换成你自己的域名）：

   nginx

   server {
       listen 80;
       server_name your-domain.com;  # 替换成你的域名   如果不使用域名用ip改成: server_name _;

   location / { proxy_pass http://localhost:3000; # 转发到 Next.js 应用 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; } }

   保存并退出文件。

4. 测试并重载 Nginx：

   bash

   sudo nginx -t    # 检查配置文件语法是否正确
   sudo systemctl reload nginx  # 重载 Nginx 使其生效

🔥 步骤四：配置防火墙

为了让外部可以访问你的网站，需要打开 HTTP (80) 和 HTTPS (443) 端口。

bash

# 启动 firewall 服务
sudo systemctl start firewalld

# 将 firewall 设置为开机自启
sudo systemctl enable firewalld

  sudo firewall-cmd --permanent --add-service=http

sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

🔒 步骤五：配置域名与 HTTPS（强烈推荐）

1. DNS 解析：在你购买域名的管理后台，添加一条 A 记录，将你的域名指向腾讯云服务器的公网 IP。

2. 安装 Certbot 并自动获取 SSL 证书：Certbot 可以免费申请 Let's Encrypt 证书，并自动为你配置好 Nginx。

   bash

   # 安装 Certbot 及其 Nginx 插件
   sudo dnf install -y certbot python3-certbot-nginx
   
   # 运行 Certbot，自动获取证书并配置 Nginx
   sudo certbot --nginx -d your-domain.com -d www.your-domain.com

   跟着提示操作（输入邮箱、同意服务条款等），完成后你的网站就支持 HTTPS 了。

🎉 步骤六：验证部署

在浏览器中访问你的域名（例如 https://your-domain.com），应该就能看到你的 Next.js 网站了。

---

💡 可选方案：宝塔面板（图形化操作）

如果你感觉命令行操作有困难，或者希望更直观地管理网站，用宝塔面板会更省心。它提供了可视化的界面来管理文件、域名和 Nginx 配置。

1. 安装宝塔面板：

   bash

   curl -sSO https://download.bt.cn/install/install_panel.sh && sudo bash install_panel.sh ed8484bec

2. 通过宝塔完成部署：在宝塔面板的“软件商店”安装 Node.js版本管理器，然后在 “文件” 菜单上传代码、在 “网站” 菜单创建站点并配置反向代理。

---

🩺 常见问题排查

• 访问网站显示 502 Bad Gateway：通常表示 Nginx 无法连接到你的 Next.js 应用。请检查：Next.js 应用是否在用 PM2 运行（用 pm2 list 查看）、端口是否为 3000。

• 访问网站显示 404 Not Found：可能是 Nginx 配置中的 server_name 和 proxy_pass 路径设置不正确。请检查配置文件并重载 Nginx。

• PM2 应用意外退出：用 pm2 logs your-nextjs-app 查看错误日志，这通常是排查问题最直接的方法。

• proxy_set_header 配置有什么作用？ 这些指令主要是将客户端的真实 IP、协议等信息传递给你的 Next.js 应用，保证你的应用能正确获取访问者的信息，并正常处理 WebSocket 连接。

• 关于 server_name：如果暂时还没有域名，可以先用你的服务器公网 IP 代替来测试。等你拿到域名后再进行替换。