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

相关推荐
Dxy12393102168 分钟前
python如何做实时资讯分析
开发语言·python
jqq66625 分钟前
解析ElementPlus打包源码
前端·javascript·vue.js
乐予吕29 分钟前
Promise 深度解析:从原理到实战
前端·javascript·promise
P7Dreamer29 分钟前
优雅封装:Vue3 + Element Plus 智能紧凑型搜索组件开发实践
前端·javascript
Beginner x_u36 分钟前
[AJAX 实战] 图书管理系统下 编辑图书
前端·javascript·ajax·bootstrap
CodeWithMe1 小时前
【闲谈】对于c++未来的看法
开发语言·c++
忆杰1 小时前
统计用户本月的连续登录天数
开发语言·python
前端小巷子2 小时前
跨标签页通信(七):postMessage
前端·javascript·面试
秋水丶秋水2 小时前
三分钟搭建Java编译环境
前端·javascript
蓝胖子不会敲代码2 小时前
跟着AI学习C# Day26
开发语言·学习·c#