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

项目打包

我们以 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)部署详细流程

相关推荐
钢门狂鸭2 小时前
关于rust的crates.io
开发语言·后端·rust
Lionel_SSL2 小时前
《深入理解Java虚拟机》第三章读书笔记:垃圾回收机制与内存管理
java·开发语言·jvm
技术猿188702783513 小时前
PHP 与 WebAssembly 的 “天然隔阂”
开发语言·php·wasm
薄荷撞~可乐3 小时前
C#Task(Api)应用
开发语言·c#
雾恋4 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊4 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
another heaven5 小时前
【Qt VS2022调试时无法查看QString等Qt变量信息】解决方法
开发语言·qt
A黄俊辉A5 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理5 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
杨福瑞6 小时前
C语⾔内存函数
c语言·开发语言