Nuxt3 项目部署在 Ubuntu 服务器（Node 服务 + pm2 + Nginx 反向代理）

本文记录了在 Ubuntu 服务器上部署 Nuxt3 项目的步骤。使用 Node.js 和 pm2 启动服务，配置 Nginx 反向代理，实现公网访问。具体步骤包括本地打包、安装 Node.js、Nginx 和 pm2，最后通过配置 Nginx 代理，使项目可通过公网 IP 访问。

主页 > 博客 > Nuxt3 项目部署在 Ubuntu 服务器（Node 服务 + pm2 + Nginx 反向代理）

初尝 Nuxt.js 项目，本文来记录一下笔者在 Ubuntu 服务器上部署 Nuxt3 项目的过程，用到的服务有：

Ubuntu 服务器
打包后的 Nuxt3 项目
Node 服务
pm2
Nginx
公网 IP + 域名

步骤 1：本地打包

使用npm run build命令打包项目文件，注意文件路径不要含有中文名，否则会打包失败。

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

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

💡

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

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

ecosystem.config.cjs会被识别为 CommonJS 模块，ecosystem.config.js 文件会被识别为 ES 模块， pm2 会尝试使用 require() 加载这个文件，所以推荐使用.cjs的文件名，反正我这边用.js的文件名报错了。

文件内定义的内容如下：

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

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

步骤 2：安装 Nodejs 环境（可选）

如果服务器没有 node 环境，请先安装，如果有请跳过此步，安装步骤如下，一行命令一行命令运行即可：

# 下载并导入 NodesourceGPG 密钥
sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

# 创建 deb 存储库
NODE_MAJOR=18 # 选择 nodejs 的版本为 18.x
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

# 更新并安装
sudo apt-get update
sudo apt-get install nodejs -y

执行以下命令，查看 Node.js 版本。

node -v

回显信息类似如下所示。

jsnoteclub@iZbp1g2d4dpki2mf63b:~$ node -v
v18.xx.x

步骤 3：安装 Nginx（可选）

如果服务器没有 Nginx，请先安装，如果有请跳过此步，安装步骤如下，一行命令一行命令运行即可：

1.依次执行以下命令，更新 Linux 操作系统和软件包。

sudo apt-get update
sudo apt-get upgrade -y

2.安装 Nginx。

sudo apt-get install -y nginx

3.安装完成后，你可以运行nginx -v命令，查看 Nginx 的版本信息（具体版本可能不一样，以实际为准）。

jsnoteclub@iZbp1g2d4dpki2mf63b:$ nginx -v
nginx version: nginx/1.18.0 (Ubuntu)

步骤 4：安装 pm2（可选）

如果服务器没有 pm2，请先安装，如果有请跳过此步，安装命令如下（注意要先有 node 服务，才能使用下面的安装命令）:

npm install pm2 -g

安装完成后，你可以运行pm2 -v命令，查看 pm2 的版本信息（具体版本可能不一样，以实际为准）。

jsnoteclub@iZbp1g2d4dpki2mf63b:~$ pm2 -v
5.4.2

步骤 5：启动项目

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

pm2 start ecosystem.config.cjs

状态 online 表示项目启动成功，可以用以下命令查看端口是否在运行：

netstat -nltp

可以使用以下命令设置自动重启，当服务器故障或者需要重启的时候，pm2 会自动重启对应的项目。

1.检查 PM2 进程

pm2 status

2.保存当前的进程列表：

pm2 save

3.设置 PM2 开机自启动

pm2 startup

运行上述命令会输出一条命令，例如：

[PM2] Init System found: systemd
[PM2] To setup the Startup Script, copy/paste the following command:
sudo env PATH=$PATH:/usr/bin pm2 startup systemd -u your_user --hp /home/your_user

按照提示运行输出的命令。例如：

sudo env PATH=$PATH:/usr/bin pm2 startup systemd -u your_user --hp /home/your_user

现在，PM2 已经配置为开机自启动。可以重启你的服务器并验证 PM2 是否成功启动并恢复你的应用程序。重启后，登录到服务器并检查 PM2 进程：

pm2 status

确保进程列表和日志路径正确。如果在任何时候你更新了 PM2 进程列表，记得保存：

pm2 save

你可以通过以下命令查看和配置 PM2 的日志和路径：

pm2 logs

pm2 describe myapp

通过以上步骤，你的 PM2 将在服务器重启后自动启动并恢复应用程序。注意，这时候项目虽然启动成功了，但是目前是不能在公网访问的，还得配置 Nginx 代理才行。

步骤 6：配置 Nginx 代理，使公网 IP 可访问

要使你的 3000 端口能够通过 nginx 进行反向代理并在公网访问，你需要在 nginx 的配置文件中进行设置。以下是步骤：

1.编辑 nginx 配置文件

通常在 /etc/nginx/sites-available/ 目录下手动创建或编辑一个以.conf为后缀配置文件。你可以创建一个新的文件或修改现有的配置文件，假设创建一个新的文件 example.conf。

sudo nano /etc/nginx/sites-available/example.conf

2.配置 nginx 反向代理

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

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;
    }
}

server_name：替换为你的域名或服务器的 IP 地址。
proxy_pass：指向你的应用运行的地址和端口，这里是 http://localhost:3000。

3.启用新配置

创建一个符号链接，将新配置文件链接到 sites-enabled 目录，运行以下命令，记得更改.conf文件为你所命名的文件。

sudo ln -sf /etc/nginx/sites-available/example.conf /etc/nginx/sites-enabled/

4.测试 nginx 配置

在应用新配置之前，测试 nginx 配置是否有误：

sudo nginx -t

如果没有错误信息，重新加载 nginx 服务：

sudo systemctl reload nginx

5.通过公网 IP 访问项目

这样，nginx 会将所有到 80 端口（HTTP）的请求转发到你的 Node.js 应用运行的 3000 端口，从而使其能够在公网访问，可在浏览器中输入你的公网 IP 看看成功否。

需要注意的是，如果你希望通过 HTTPS 访问，还需要在 server 块中配置 listen 443 ssl; 并添加 SSL 证书的配置，具体就不展开讲了，有需要的话问一下 GPT 吧。

总结

除非注明，否则均为 jsnoteclub.com 原创文章，请勿转载谢谢！

本文标题：Nuxt3 项目部署在 Ubuntu 服务器（Node 服务 + pm2 + Nginx 反向代理）

本文链接：https://jsnoteclub.com/blog/nuxt3-ubuntu-node-pm2-nginx/