pm2部署nuxt3项目

pm2部署nuxt3项目

阅读时长：8分钟

本文内容：本文其实前面开发AI数字人网站的延续。 window上安装ubuntu虚拟机，并在虚拟机中使用pm2部署 Nuxt3 项目.

• Nuxt3
• Vite
• typescript
• pm2

1. 安装node环境

1. 下载

# 进入node目录
cd /node
# 下载
wget https://nodejs.org/download/release/v16.20.2/node-v16.20.2-linux-x64.tar.xz

2. 解压：

tar -xvf node-v16.20.2-linux-x64.tar.xz

3. 进目录

cd node-v16.20.2-linux-x64

4. 测试是否下载成功

./node -v

5. 添加软连接

sudo ln -s /node/node-v16.20.2-linux-x64/bin/node /usr/local/bin/node
sudo ln -s /node/node-v16.20.2-linux-x64/bin/npm /usr/local/bin/npm

6. 测试软连接是否成功

# 进入根目录
cd /

node -v

npm -v

什么叫软连接：将当前目录，添加到 Linux 系统 path 中，系统 path 就是: /usr/local/bin

2. 创建两个 pm2 配置文件

windows上提前新建好两个文件:ecosystem.config.js以及 start-nuxt.sh，然后准备上传到 Linux 服务器指定位置.

1. ecosystem.config.js文件内容如下：

 // 配置pm2
module.exports = {
  apps: [
    {
      name: "BlogHomeNuxt",
      exec_mode: "cluster",
      instances: "2", // 应用启动实例个数，仅在cluster模式有效 默认为fork；或者 max
      script: "dist/server/index.mjs",
      args: "", // 传递给脚本的参数
      watch: true, // 开启监听文件变动重启
      ignore_watch: ["node_modules", "public", "logs"], // 不用监听的文件
      exec_mode: "fork",// 自家主机window cluster_mode 模式下启动失败
      instances: "2", // max表示最大的 应用启动实例个数，仅在 cluster 模式有效 默认为 fork
      autorestart: true, // 默认为 true, 发生异常的情况下自动重启
      max_memory_restart: "1G", //  // 最大内存限制数，超出自动重启
      error_file: './logs/app-err.log', // 错误日志文件
      // out_file: './logs/app-out.log', // 正常日志文件
      merge_logs: true, // 设置追加日志而不是新建日志
      log_date_format: "YYYY-MM-DD HH:mm:ss", // 指定日志文件的时间格式
      min_uptime: "60s", // 应用运行少于时间被认为是异常启动
      max_restarts: 30, // 最大异常重启次数
      restart_delay: 60, // 异常重启情况下，延时重启时间
      env: {
        // 环境参数，当前指定为开发环境
        NODE_ENV: "development",
        PORT: "5050",
      },
      env_production: {
        // 环境参数,当前指定为生产环境
        NODE_ENV: "production", //使用production模式 pm2 start ecosystem.config.js --env production
        PORT: "5050",
      },
      env_test: {
        // 环境参数,当前为测试环境
        NODE_ENV: "test",
      },
    },
  ],
};

2. start-nuxt.sh 文件内容如下：

  #!/bin/bash
  
  BUILD_ID=DONTKILLME
  
  echo "pm2 starting"
  
  pm2 start ecosystem.config.js --env production
  
  echo "pm2 started"

3.将两文件以及打包文件上传到服务器

我的服务器是 WSL 创建的 Ubuntu 系统，你可以根据自己的服务器选择上传方式

1. 在服务器根目录创建文件夹:mkdir onlineweb，用于存放稍后上传的所有项目文件

sudo mkdir onlineweb

3. 在 windows 项目目录下执行pnpm run build 打包指令，得到将要上传到服务器的文件夹 .output

pnpm run build

现在我们有了2个配置文件 和 1个打包后的文件夹：

> d:/workspace/my-nuxt-project/start-nuxt.sh
> 
> d:/workspace/my-nuxt-project/ecosystem.config.js
> 
> d:/workspace/my-nuxt-project/.output

先查看一遍，上传到服务器后的目录结构，类似如下:

/onlineweb

│—start-nuxt.sh
│
│—ecosystem.config.js
│
├─dist
│  │
│  └─nitro.json
│  │
│  └─public
│  │    └────favicon.ico
│  │    └────api
│  │    └────_nuxt
│  │
│  └─server
│  │    └────chunks
│  │    └────node_modules
│  │    └────index.mjs
│  │    └────index.mjs.map
│  │    └────package.json

3.1 【上传】windows 文件上传到使用WSL创建的 Ubuntu 系统

这里以 windows 上传到到使用 WSL创建的 Ubuntu系统作为示例，如果你自己有其他上传方式，可以跳过3.1上传这一小节

1. 登录 Ubuntu 系统,新建目录 onlineweb

# 进入根目录
(base) ifredom@DESKTOP-CQAE3DF:~$ cd /
# 新建
(base) ifredom@DESKTOP-CQAE3DF:~$ sudo mkdir onlineweb

2. Linux上输入：/mnt/{Windows盘符}访问windows系统,此处输入:cd /mnt/d

(base) ifredom@DESKTOP-CQAE3DF:~$ cd /mnt/d

1. 进入windows上项目目录位置， cd workspace/my-nuxt-project

(base) ifredom@DESKTOP-CQAE3DF:/mnt/d$ cd workspace/my-nuxt-project

1. 复制window上的ecosystem.config.js 到Linuxt服务器 /onlineweb目录下

# ls 查看目录
(base) ifredom@DESKTOP-CQAE3DF:/mnt/d/workspace/my-nuxt-project$ ls
# cp 复制: 
(base) ifredom@DESKTOP-CQAE3DF:/mnt/d/workspace/my-nuxt-project$  sudo cp -r .output/ /onlineweb/dist
(base) ifredom@DESKTOP-CQAE3DF:/mnt/d/workspace/my-nuxt-project$  sudo cp -r ecosystem.config.js  /onlineweb/
(base) ifredom@DESKTOP-CQAE3DF:/mnt/d/workspace/my-nuxt-project$  sudo cp -r start-nuxt.sh  /onlineweb/

到这里，我们成功将 2文件以及1文件夹 上传到服务器上目录 onlineweb 下

提示: Windows 访问 Linux 文件方法：命令行输入 \\wsl$ ，

4.使用pm2启动

• pm2配置文档

1. 在服务器 /onlineweb/ 下执行 sh start-nuxt.sh 即可 , 成功使用 pm2 启动 nuxt 服务

# 进入目录
cd /onlineweb/
# 安装
sudo npm install -g pm2
# 启动
sh start-nuxt.sh

到此，使用PM2命令已经成功启动了.

如果你没有使用nginx代理，那么你可以访问 http://localhost:5050/ 查看效果了

tips: 你可能会怀疑怎么启动了2服务，在配置文件中配置 instance 字段，所有配置详情自行查看文档

---

也许你嫌弃PM2太麻烦,不想使用 pm2 启动？，直接使用node启动，也完全没有问题：

node dist/server/index.mjs

5.配置nginx

找到nginx.conf文件，修改默认访问网站配置

  location / {
     # root /blog/home/;
     # index /index.html;
     # try_files $uri $uri/  /index.html; 
     proxy_pass http://localhost:5050/;
  }

其他 pm2 指令

# 查看启动的服务列表
pm2 list

# 停止服务
pm2 stop  [name|id]

# 删除服务
pm2 delete  [name|id]

# 保存当前线程
pm2 save

# 设置服务器开机自启
pm2 startup

---

对于非Linuxt系统，比如windows服务器，需要额外安装下边的插件才可以。

# 全局安装 pm2-windows-startup
npm install pm2-windows-startup -g
# 设置 pm2-startup
pm2-startup install

相关注意事项

1. 目前nuxt3服务器打包会造成内存溢出导致卡死

---

------ 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 <<<