当前位置: 首页 > news >正文

Nuxt3部署-Ubuntu系统(Node 服务 + pm2 + Nginx 反向代理)

Nuxt3部署-Ubuntu系统(Node 服务 + pm2 + Nginx 反向代理)


文章目录

  • Nuxt3部署-Ubuntu系统(Node 服务 + pm2 + Nginx 反向代理)
  • 一、安装 Nodejs 环境
  • 二、安装 Nginx
  • 三、安装 pm2
  • 四、本地项目打包
    • 1️⃣:打包
    • 2️⃣:检验打包
    • 3️⃣:ecosystem.config.cjs
    • 4️⃣:文件上传到服务器
  • 五、配置nginx代理
  • 六、启动项目
    • 1️⃣:启动项目
    • 2️⃣:设置pm2开机自启
  • 7️⃣:访问测试![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f5db0d4862f8470e9d45db259d584e53.png)


一、安装 Nodejs 环境

参考Ubuntu安装nvm+node笔记:

  • 检验node环境nuxt3 node至少18.x.x以上

在这里插入图片描述

二、安装 Nginx

参考Ubuntu安装Nginx笔记:https://blog.csdn.net/cygqtt/article/details/136448786

  • 查看nginx的运行状态
 systemctl status nginx

在这里插入图片描述

三、安装 pm2

注意:要先有 node 服务,才能使用下面的安装命令

npm install pm2 -g

在这里插入图片描述

安装完成后,你可以运行pm2 -v命令,查看 pm2 的版本信息

pm2 -v

在这里插入图片描述

四、本地项目打包

1️⃣:打包

  • 使用npm run build打包项目
npm run build

在这里插入图片描述

2️⃣:检验打包

  • 打包成功后你可以用node .output/server/index.mjs命令在本地启动,
  • 看看能否成功访问项目,通过http://localhost:3000/地址在浏览器打开即可。

在这里插入图片描述
在这里插入图片描述

3️⃣:ecosystem.config.cjs

  • 因为项目要用到 pm2 启动(服务器重启后可以自动重启 Nuxt 项目),所以还需要准备一个文件,文件名为ecosystem.config.cj或者ecosystem.config.js

  • ecosystem.config.cjs会被识别为 CommonJS 模块ecosystem.config.js 文件会被识别为 ES 模块, pm2 会尝试使用 require() 加载这个文件,所以推荐使用.cjs的文件。

添加配置文件ecosystem.config.cjs

module.exports = {apps: [{name: "my-bilibili", // 启动项目名称,随便取,一般为项目名exec_mode: "cluster",instances: "max", // 进程数port: "3000", // 端口,根据需要指定script: "./.output/server/index.mjs", // 启动入口,相对于 .output 目录的路径args: "start",env: {MODE: "production"}}]
}

在这里插入图片描述

  • 将这个文件上传到服务器,与.output目录文件同级即可

4️⃣:文件上传到服务器

项目打包成功后,会生成一个.output文件,把这个文件一整个都上传到服务器中,然后在服务器中启动项目,并配置 nginx 代理,即可让其在公网访问

.output目录下的 server 文件内是有 node_modules 文件的

  • 上传之后就不需要在服务器中重新使用npm install命令加载项目依赖了,直接就可以使用启动命令启动项目。
  • 若你不上传这个 node_modules 文件,则需要在项目中重新加载一遍依赖。

服务器中创建目录/usr/local/project/nuxt3/my-bilibili

  • .output目录ecosystem.config.cjs 都上传到改目录下

在这里插入图片描述

五、配置nginx代理

1.编辑 nginx 配置文件通常在/etc/nginx

在这里插入图片描述

2.在配置文件中添加以下内容

    server {listen 8083;server_name _;location / {# 指向你的应用运行的地址和端口proxy_pass http://127.0.0.1:3000;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;}}

在这里插入图片描述

3.测试 nginx 配置、并重新加载 nginx 服务

sudo nginx -t
sudo systemctl reload nginx

六、启动项目

1️⃣:启动项目

使用 pm2 启动项目的命令,得注意你的文件名是.cjs 还是.js

1.进入到目录/usr/local/project/nuxt3/my-bilibili

在这里插入图片描述

2.启动

pm2 start ecosystem.config.cjs

在这里插入图片描述

  • 状态online表示项目启动成功

3.可以用以下命令查看端口是否在运行

 ps -ef | grep my-bilibili

在这里插入图片描述

netstat -nltp

在这里插入图片描述

2️⃣:设置pm2开机自启

1.检查 PM2 进程

pm2 status

在这里插入图片描述

2.保存当前的进程列表

pm2 save

在这里插入图片描述

3.设置 PM2 开机自启动

pm2 startup

7️⃣:访问测试在这里插入图片描述

  • 成功
    在这里插入图片描述

http://www.mrgr.cn/news/50360.html

相关文章:

  • 第J5周:DenseNet+SE-Net实战(TensorFlow版)
  • 基于Python的自然语言处理系列(33):Huggingface基础与Pipeline
  • Piktures 2.17 | 高效相册管理工具
  • 如何用智能码二维码zhinengma.cn做设备标牌
  • OCP在Python中的应用
  • Linux应用框架cpp-tbox之TCP通信(下篇)
  • 【Python爬虫系列】_028.Python玩Redis
  • 源码编译llama.cpp for windows on arm
  • 数据结构与算法:图的高级算法
  • IP协议详细介绍
  • Linux概述
  • 坚持每天写代码,真的能提高编程水平吗?
  • 加密算法介绍
  • Qt-系统播放音频(67)
  • UEFI——Device Path
  • 【华三】基本QinQ配置实验
  • 【Linux系统编程】第三十二弹---动态库实战指南:从零构建与高效集成的奥秘
  • yjs机器学习常见算法01——KNN(K—近邻算法)
  • SQL进阶技巧:如何删除第N次连续出现NULL值所存在的行?
  • 深刻,深克