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

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



一、安装 Nodejs 环境

参考CentOS7安装nvm+node笔记:

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

在这里插入图片描述

二、安装 Nginx

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

  • 查看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️⃣:访问测试

  • 成功
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七@归七

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值