Nuxt3部署-Ubuntu系统（Node 服务 + pm2 + Nginx 反向代理）

---

---

一、安装 Nodejs 环境

参考Ubuntu安装nvm+node笔记：

• 检验node环境nuxt3 node至少18.x.x以上

二、安装 Nginx

参考Ubuntu安装Nginx笔记：https://blog.csdn.net/cygqtt/article/details/136448786

• 查看nginx的运行状态

 systemctl status nginx

三、安装 pm2

注意：要先有 node 服务，才能使用下面的安装命令

npm install pm2 -g

安装完成后，你可以运行pm2 -v命令，查看 pm2 的版本信息

pm2 -v

四、本地项目打包

1️⃣：打包

• 使用npm run build打包项目

npm run build

2️⃣：检验打包

• 打包成功后你可以用node .output/server/index.mjs命令在本地启动，
• 看看能否成功访问项目，通过http://localhost:3000/地址在浏览器打开即可。

3️⃣：ecosystem.config.cjs

• 因为项目要用到 pm2 启动（服务器重启后可以自动重启 Nuxt 项目），所以还需要准备一个文件，文件名为ecosystem.config.cj或者ecosystem.config.js。

• ecosystem.config.cjs会被识别为 CommonJS 模块，ecosystem.config.js 文件会被识别为 ES 模块， pm2 会尝试使用 require() 加载这个文件，所以推荐使用.cjs的文件。

添加配置文件ecosystem.config.cjs

module.exports = {
    apps: [
        {
            name: "my-bilibili", // 启动项目名称，随便取，一般为项目名
            exec_mode: "cluster",
            instances: "max", // 进程数
            port: "3000", // 端口，根据需要指定
            script: "./.output/server/index.mjs", // 启动入口，相对于 .output 目录的路径
            args: "start",
            env: {
                MODE: "production"
            }
        }
    ]
}

• 将这个文件上传到服务器，与.output目录文件同级即可

4️⃣：文件上传到服务器

项目打包成功后，会生成一个.output文件，把这个文件一整个都上传到服务器中，然后在服务器中启动项目，并配置 nginx 代理，即可让其在公网访问

.output目录下的 server 文件内是有 node_modules 文件的

• 上传之后就不需要在服务器中重新使用npm install命令加载项目依赖了，直接就可以使用启动命令启动项目。
• 若你不上传这个 node_modules 文件，则需要在项目中重新加载一遍依赖。

服务器中创建目录/usr/local/project/nuxt3/my-bilibili

• .output目录 和 ecosystem.config.cjs 都上传到改目录下

五、配置nginx代理

1.编辑 nginx 配置文件通常在/etc/nginx

2.在配置文件中添加以下内容

    server {
        listen 8083;
        server_name _;

        location / {
            # 指向你的应用运行的地址和端口
            proxy_pass http://127.0.0.1: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;
        }
    }

3.测试 nginx 配置、并重新加载 nginx 服务

sudo nginx -t

sudo systemctl reload nginx

六、启动项目

1️⃣：启动项目

使用 pm2 启动项目的命令，得注意你的文件名是.cjs 还是.js

1.进入到目录/usr/local/project/nuxt3/my-bilibili下

2.启动

pm2 start ecosystem.config.cjs

• 状态online表示项目启动成功

3.可以用以下命令查看端口是否在运行

 ps -ef | grep my-bilibili

netstat -nltp

2️⃣：设置pm2开机自启

1.检查 PM2 进程

pm2 status

2.保存当前的进程列表

pm2 save

3.设置 PM2 开机自启动

pm2 startup

7️⃣：访问测试

• 成功