在Ubuntu中部署Next.js项目

袁可佳 发表于 2025-5-31 23:41:26

以下步骤，均已多次在实战项目中实现，遂在此分享。
如有错漏之处，感谢斧正。
原文链接：https://mp.weixin.qq.com/s/Jaqpe4uhB5V1PsWhY6_Tzg
一、服务器环境准备

系统：Ubuntu 22.04 64位
配置：2核(vCPU) 2 GiB
允许远程SSH访问。
二、安装Nginx

# 更新系统包
sudo apt update

# 安装 Nginx
sudo apt install nginx

# 开放防火墙端口,允许HTTP流量
sudo ufw allow 'Nginx HTTP'三、安装Node.js

# 安装NVM（Node Version Manager）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

# 安装完成后，重新启动终端或运行
source ~/.bashrc

# 安装Node.js 18.17.0(需注意版本要求)
nvm install 18.17.0

# 验证安装
node -v# 应输出 v18.17.0
npm -v # 显示对应npm版本四、部署Next.js项目

4.1 将项目文件复制到服务器

将项目文件夹中的文件复制到服务器指定文件夹（如 /usr/example-next-app），除了以下文件夹：

[*].git
[*].vscode
[*]node_modules
4.2 构建生产环境

将项目的源代码构建为生产环境可用的文件。
# 进入指定文件夹
cd /usr/example-next-app

# 安装项目依赖包
npm install

# 构建生产环境
npm run build4.3 安装PM2进程管理器

为了保持Next.js项目持续运行并实现自动重启，需安装PM2。
这是最常用的Node.js进程管理方案，具备自动重启、日志管理、集群模式等特性。
# 全局安装PM2
npm install pm2 -g

# 进入指定文件夹
cd /usr/example-next-app

# --name指定服务名称
# -- run start执行npm run start启动生产环境
pm2 start npm --name "example-next-app" -- run start

# 生成配置文件
pm2 ecosystem修改生成的ecosystem.config.js：
module.exports = {
apps: [{
name: "example-next-app",
script: "npm",
args: "run start",
autorestart: true,// 启用崩溃自动重启
watch: false,    // 关闭文件监听（生产环境建议关闭）
max_memory_restart: "1G" // 内存超限时重启
}]
}持久化进程（开机自启）
# 生成系统服务配置
pm2 startup

# 保存当前进程列表
pm2 savePM2其余的常用命令：

[*]查看进程状态：pm2 list
[*]实时日志监控：pm2 logs next-app
[*]手动重启服务：pm2 restart next-app
五、配置Nginx反向代理

5.1 创建 Nginx 配置文件

在 /etc/nginx/conf.d/ 目录下新建配置文件（如 example-next-app.conf），内容如下：
server {
listen 80;
server_name 你的服务器ip地址;

# 主应用代理配置
location / {
   proxy_pass http://localhost:3000;
   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;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# Next.js静态资源处理
location /_next/static {
   root /usr/example-next-app/.next;# 关键路径修正
   try_files $uri $uri/ =404;
   add_header Cache-Control "public, max-age=31536000, immutable";
   access_log off;
}

# 公共静态资源处理
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
   root /usr/example-next-app/public;
   try_files $uri @backend;
   add_header Cache-Control "public, max-age=31536000, immutable";
   access_log off;
}

# 回退到Node服务
location @backend {
   proxy_pass http://localhost:3000;
   proxy_set_header Host $host;
   proxy_set_header X-Real-IP $remote_addr;
}

# 错误页面处理
error_page 404 /404.html;
location = /404.html {
   internal;
}
}5.2 启用配置

# 检查Nginx语法，无错误提示则配置正确
sudo nginx -t

# 重载Nginx
sudo systemctl reload nginx5.3 其他Nginx命令

# 查看 Nginx 服务状态
sudo systemctl status nginx

# 启动 Nginx
sudo systemctl start nginx

# 停止 Nginx
sudo systemctl stop nginx

# 重启 Nginx
sudo systemctl restart nginx六、检查权限（可选）

6.1 检查服务器文件夹权限

确保 Nginx 有权限访问网站文件。你可以使用以下命令更改文件所有权和权限：
sudo chown -R www-data:www-data /usr/example-next-app
sudo chmod -R 755 /usr/example-next-app6.2 检查云服务器的防火墙设置

如果云服务器有开启防火墙，防火墙可能会阻止对 Nginx 服务的访问。
所以，需要确保防火墙允许 HTTP（端口 80）或者 HTTPS（端口 443）流量通过。
# 允许HTTP流量
sudo ufw allow 'Nginx HTTP'

# 允许HTTPS流量
sudo ufw allow 'Nginx HTTPS'6.3 检查云服务器出入站规则

在云服务器的防火墙（安全组）规则中，分别添加出入站规则，需支持HTTP，视情况支持HTTPS。
七、验证成功

在任意浏览器，输入【你的IP地址】便可正常访问Next.js网站了。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

页: [1]

程序园's Archiver

在Ubuntu中部署Next.js项目