宝塔部署Nuxt

宝塔部署Nuxt

版本 Nuxt 3.9

一、打包

# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build

二、宝塔部署

2.1 配置域名

2.2 网站目录

2.3 反向代理

2.4 查看配置文件

#PROXY-START/

location ^~ /
{
    proxy_pass http://127.0.0.1:3000/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
    proxy_http_version 1.1;
    # proxy_hide_header Upgrade;

    add_header X-Cache $upstream_cache_status;
    #Set Nginx Cache

    set $static_fileYTJe2jc1 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_fileYTJe2jc1 1;
        expires 1m;
    }
    if ( $static_fileYTJe2jc1 = 0 )
    {
        add_header Cache-Control no-cache;
    }
}
#PROXY-END/

2.5 上传Nuxt代码

上传Nuxt打包好的静态文件

三、PM2部署nuxt项目

3.1 安装 PM2‌

npm install -g pm2

3.2 创建 PM2 生态文件（可选）‌

为了更方便地管理你的 Nuxt 3 应用，可以创建一个 PM2 生态文件（ecosystem.config.js）。这个文件可以定义应用的启动配置，比如环境变量、实例数量等。

在项目根目录下创建 ecosystem.config.js 文件，内容如下：

// ecosystem.config.js 完整配置（复制即用）
module.exports = {
  apps: [
    {
      name: 'nuxt3-project', // 你的项目名称（自定义）
      exec_mode: 'cluster',  // 集群模式，多核CPU推荐；单机用 'fork' 即可
      instances: 'max',      // 集群模式下启动CPU核心数的进程数；fork模式写 1
      script: './.output/server/index.mjs', // Nuxt3打包后的服务入口文件，固定路径！
      port: 3000, // ✅ 核心配置：指定你的自定义端口（比如3000，可改成任意端口如3001/8080）
      env: {
        NODE_ENV: 'production', // 生产环境
        PORT: 3000 // ✅ 关键：必须同步配置 PORT 环境变量，和上面的port值一致
      },
      // 可选优化配置
      max_memory_restart: '1G', // 内存占用超过1G自动重启，防止内存泄漏
      log_date_format: 'YYYY-MM-DD HH:mm:ss', // 日志时间格式
      out_file: './logs/out.log', // 正常日志输出
      error_file: './logs/err.log' // 错误日志输出
    }
  ]
}

3.3 使用 PM2 启动 Nuxt 3 应用‌

使用以下命令通过 PM2 启动你的 Nuxt 3 应用：

pm2 start ecosystem.config.js

[root@VM-24-13-opencloudos cms]# pm2 start ecosystem.config.js 
[PM2][WARN] Applications nuxt3-cms not running, starting...
[PM2][WARN] Folder does not exist: /www/wwwroot/cms/logs
[PM2] Creating folder: /www/wwwroot/cms/logs
[PM2] App [nuxt3-cms] launched (2 instances)
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ nuxt3-cms          │ cluster  │ 0    │ online    │ 0%       │ 46.1mb   │
│ 1  │ nuxt3-cms          │ cluster  │ 0    │ online    │ 0%       │ 39.2mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

或者通过PM2命令直接启动运行（极简，适合临时启动）：

# 方式A：基础命令行启动，指定端口 3000（推荐）
npm run build && pm2 start .output/server/index.mjs --name nuxt3-project -- env PORT=3000

# 方式B：带集群模式的命令行启动，指定端口 3000
npm run build && pm2 start .output/server/index.mjs -i max --name nuxt3-prod -- env PORT=3000

1. -i max ：开启集群模式，自动适配 CPU 核心数
2. --name xxx ：给进程命名，方便后续管理
3. -- env PORT=xxx ：核心，注入端口环境变量，指定自定义端口

3.4 管理 PM2 进程‌

PM2 提供了一系列命令来管理你的应用：

查看应用状态‌：

pm2 list

[root@VM-24-13-opencloudos cms]# pm2 list
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ nuxt3-cms          │ cluster  │ 0    │ online    │ 0%       │ 57.6mb   │
│ 1  │ nuxt3-cms          │ cluster  │ 0    │ online    │ 0%       │ 57.3mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

停止应用‌：

pm2 stop nuxt3-app
或者
pm2 stop ./ecosystem.config.js
可选：停止当前所有PM2进程（比如你的nuxt3项目）
pm2 stop all

[root@VM-24-13-opencloudos cms]# pm2 stop ./ecosystem.config.js 
[PM2] [nuxt3-cms](0) ✓
[PM2] [nuxt3-cms](1) ✓
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ nuxt3-cms          │ cluster  │ 0    │ stopped   │ 0%       │ 0b       │
│ 1  │ nuxt3-cms          │ cluster  │ 0    │ stopped   │ 0%       │ 0b       │

重启应用‌：

pm2 restart nuxt3-app
或者
pm2 restart ./ecosystem.config.js

删除应用：

pm2 del nuxt3-app
或者
pm2 del ./ecosystem.config.js
可选：删除当前所有PM2进程
pm2 delete all

[root@VM-24-13-opencloudos cms]# pm2 del ./ecosystem.config.js 
[PM2] [nuxt3-cms](0) ✓
[PM2] [nuxt3-cms](1) ✓
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

查看日志‌：

pm2 logs nuxt3-app
或者
pm2 logs ./ecosystem.config.js

[root@VM-24-13-opencloudos cms]# pm2 logs nuxt3-cms
[TAILING] Tailing last 15 lines for [nuxt3-cms] process (change the value with --lines option)
/www/wwwroot/cms/logs/err-1.log last 15 lines:
/www/wwwroot/cms/logs/err-0.log last 15 lines:
/www/wwwroot/cms/logs/out-0.log last 15 lines:
0|nuxt3-cm | 2026-01-19 19:40:24: Listening on http://[::]:3000

/www/wwwroot/cms/logs/out-1.log last 15 lines:
1|nuxt3-cm | 2026-01-19 19:40:24: Listening on http://[::]:3000

保存当前进程列表‌（以便在系统重启后自动恢复）：

pm2 save

设置开机启动‌（需要 root 权限）：

pm2 startup
pm2 save

PM2 彻底取消开机自启【标准正确流程，推荐，99% 有效】

第一步：执行核心取消命令（必执行，root 权限）
sudo pm2 unstartup
第二步：清除 PM2 保存的进程列表（可选，推荐执行，彻底清理）
pm2 cleardump
第三步：重启服务器验证（可选）
reboot

重启后输入 pm2 list ，会显示 No processes found ，说明开机自启已经完全取消 ✔️

3.5 配置 Nginx（可选）‌

如果你使用 Nginx 作为反向代理，可以按照以下方式配置：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000; # 与 PM2 配置的端口一致
        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;
    }
}

然后重启 Nginx：

sudo systemctl restart nginx

部署完成‌

现在，你的 Nuxt 3 应用应该已经通过 PM2 成功部署，并且可以通过指定的域名或 IP 地址访问。