Nuxt3 SSR 服务端渲染部署 PM2 全流程（Nest.js 同理）

努力挣钱的小鑫2024-10-21 2:08

项目打包

我们以 Nuxt3 项目为例子：

项目打包

执行 npm run build ，生成的 .output 文件夹就是部署产物（目前不支持中文路径）
执行 npm run preview 可以本地预览效果

方式一：使用 Node 部署

需要服务器安装 Node 环境

shell 复制代码

systemctl install nodejs
systemctl install npm # 安装npm是为后面安装库做准备

运行：node .output/server/index.mjs
指定端口：PORT=8888 node .output/server/index.mjs
PORT：是动态添加的环境变量

如果你要管理 Node 版本，可以安装 n 工具

shell 复制代码

npm install --g n
n --version # 查看版本

方式二：使用 PM2 部署（推荐）

认识PM2（Process Manager）

PM2是一个守护进程管理器, 它将帮助管理和保持你的在线应用程序。

更简单的理解：负责管理Node、Python等程序，并能让程序一直保持在后台运行。

安装PM2

shell 复制代码

npm install --g pm2

PM2 常用命令和配置文件

将打包后的文件上传到服务器

生成 pm2 配置文件

shell 复制代码

pm2 init simple #自动生成 ecosystem 配置文件

然后修改配置内容，主要是 SSR 服务器脚本启动路径

js 复制代码

module.exports = {
  apps : [{
    name   : "Nuxt3AppTest",
    exec_mode:'cluster',
    instances:'max',
    script : "./.output/server/index.mjs"
  }]
}

启动应用

shell 复制代码

pm2 start ecosystem.config.js # 启动应用

因为 Nuxt3 默认的端口号 3000，所以需要我们配置服务器的端口安全组，我以阿里云控制台为例子

然后输入你的 IP + 3000端口就可以访问了~（记得要配置上面服务器可访问3000端口安全组，否则可采用 Nginx 做代理也可以）

参考资料

Nuxt.js（Vue SSR）创建项目到服务器（Nginx+PM2）部署详细流程