在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 build

复制代码

4.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 save

复制代码

PM2其余的常用命令：

查看进程状态：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 nginx

复制代码

5.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-app

复制代码

6.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网站了。

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

账号		自动登录	找回密码
密码			立即注册

在Ubuntu中部署Next.js项目

浏览过的版块

签约作者