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

相关推荐
Mr_sun.10 分钟前
Day09——入退管理-入住-2
android·java·开发语言
MAGICIAN...21 分钟前
【java-软件设计原则】
java·开发语言
gpfyyds66630 分钟前
Python代码练习
开发语言·python
盐真卿1 小时前
python第八部分:高级特性(二)
java·开发语言
茉莉玫瑰花茶1 小时前
C++ 17 详细特性解析(5)
开发语言·c++·算法
Mr Xu_1 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
lly2024061 小时前
《堆的 shift down》
开发语言
子兮曰1 小时前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
Highcharts.js1 小时前
【Highcharts】如何用命令行渲染导出图片?
javascript·导出·开发文档·highcharts·命令行渲染·命令行功能
黎雁·泠崖1 小时前
【魔法森林冒险】2/14 抽象层设计:Figure/Person类(所有角色的基石)
java·开发语言