GitHub Action自动化部署Nuxt项目

火山引擎云服务器部署nuxt项目

本地开发与部署nuxt项目

node版本

shell运行 node -v 输出： v20.19.3，nuxt需要20+版本

模版创建nuxt项目

shell 运行 npm create nuxt@latest ,按照提示输入名称等，就好。

shell 复制代码

> npx
> create-nuxt


        .d$b.
       i$$A$$L  .d$b
     .$$F` `$$L.$$A$$.
    j$$'    `4$$:` `$$.
   j$$'     .4$:    `$$.
  j$$`     .$$:      `4$L
 :$$:____.d$$:  _____.:$$:
 `4$$$$$$$$P` .i$$$$$$$$P`

ℹ Welcome to Nuxt!                                                                                          nuxi 2:48:39 PM

❯ Where would you like to create your project?
./nuxt-app

运行与构建

运行 npm run dev 后浏览器访问localhost:3000,出现下面界面就成功了

执行 npm run build,因为我们是要打包构建后，上传构建包到云服务器

scss 复制代码

//shell 输出

> build
> nuxt build
 ......中间省略
  ├─ .output/server/chunks/nitro/nitro.mjs (159 kB) (39.2 kB gzip)
  ├─ .output/server/chunks/nitro/nitro.mjs.map (2.98 kB) (755 B gzip)
  ├─ .output/server/chunks/routes/renderer.mjs (14.1 kB) (4.39 kB gzip)
  ├─ .output/server/chunks/routes/renderer.mjs.map (843 B) (285 B gzip)
  ├─ .output/server/chunks/virtual/_virtual_spa-template.mjs (94 B) (100 B gzip)
  ├─ .output/server/chunks/virtual/_virtual_spa-template.mjs.map (112 B) (111 B gzip)
  ├─ .output/server/index.mjs (353 B) (205 B gzip)
  └─ .output/server/package.json (655 B) (291 B gzip)
Σ Total size: 1.8 MB (433 kB gzip)
✔ You can preview this build using node .output/server/index.mjs     nitro 2:55:21 P

执行node .output/server/index.mjs

csharp 复制代码

//控制台输出
Listening on http://[::]:3000

表明我build没有问题,也可修改端口和支持访问的主机

运行NITRO_PORT=3002 NITRO_HOST=0.0.0.0 node .output/server/index.mjs

NITRO_HOST=0.0.0.0 是一个重要的网络配置:

0.0.0.0 是一个特殊的 IP 地址，表示"监听所有可用的网络接口"：

如果设置 host: 'localhost' 或 host: '127.0.0.1'：

只能从本机访问

其他设备无法访问

如果设置 host: '0.0.0.0'：

可以从本机访问（通过 localhost 或 127.0.0.1）

可以从同一网络的其他设备访问（通过本机的 IP 地址）

如果配置了公网 IP，也可以从互联网访问

2.安全性考虑：

在开发环境使用 0.0.0.0 很常见，方便测试和调试

在生产环境要谨慎使用，最好配合防火墙规则来限制访问

pm2 部署

先安装pm2,运行npm install -g pm2 --registry https://registry.npmjs.org/

项目根目录新建ecosystem.config.cjs,内容如下

yaml 复制代码

module.exports = {
  apps: [
    {
      name: 'nuxt-app',
      exec_mode: 'cluster',
      instances: 1,
      script: './.output/server/index.mjs',
      env: {
        NODE_ENV: 'production',
        NITRO_PORT: 3000,
        NITRO_HOST: '0.0.0.0',
      }
    }
  ]
}

pm2部署项目，推荐reload命令，

运行pm2 reload ./ecosystem.config.cjs

pm2 list 查询当前程序是否运行成功

bash 复制代码

├ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 4  │ nuxt-app           │ cluster  │ 0    │ online    │ 0%       │ 60.2mb   │

浏览器访问localhost:3000,检验结果

云服务器购买与初始化

这里用的火山引擎，新用户29元一年(需要0点抢购)

买好以后进入云服务器主页，有各种服务器信息这里需要关注公网IP

shell运行 ssh root@服务器公网IP ,+云服务器购买时配置的密码，就可以访问了。

服务器需要初始化nuxt项目必要的运行环境

安装node v20.19.3 pm2 等这里可以用宝塔Linux面板可视化操作