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

相关推荐
洋流3 分钟前
0基础学习,深夜写文章,励志进大厂系列,第2天:JS预编译
javascript
源力祁老师13 分钟前
Odoo 中SCSS的使用指南
开发语言·前端·学习方法
熬夜苦读学习18 分钟前
日志与策略模式
linux·运维·开发语言·后端·策略模式
市民中心的蟋蟀34 分钟前
第十章 案例 4 - React Tracked 【上】
前端·javascript·react.js
前端小巷子34 分钟前
JS 函数柯里化
前端·javascript·面试
棠十一38 分钟前
nacos Sentinel zipkin docker运行
java·开发语言·eureka
归于尽42 分钟前
新手必看!ES6 语法糖详解,让你的 JS 代码更丝滑✨
前端·javascript
路由侠内网穿透1 小时前
本地部署消息代理软件 RabbitMQ 并实现外部访问( Windows 版本 )
服务器·开发语言·windows·数据分析·rabbitmq·ruby
老K(郭云开)2 小时前
allWebPlugin中间件VLC专用版之录像功能介绍
前端·javascript·chrome·中间件·edge
风风吹不到2 小时前
JavaScript入门基础篇-day04
开发语言·前端·javascript