GitHub Action自动化部署Nuxt项目

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

本地开发与部署nuxt项目

node版本

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

模版创建nuxt项目

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 是一个重要的网络配置:

  1. 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面板 可视化操作

Github Action 自动化部署

项目关联到github 根目录新建.github/workflows/deploy.yml

yaml 复制代码
name: nuxr-app Nuxt.js Deploy

on:
  push:
    branches: [ main ]

jobs:
  build:
    # needs: test
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: '20'
        cache: 'npm'
    - run: npm ci
    - run: npm run build
    - name: Verify build output
      run: |
          pwd
          ls -la .output
          echo "Total files in .output: $(find .output -type f | wc -l)"
    - name: Fix permissions
      run: |
        ls -la .output
        chmod -R 755 .output

    - name: Copy ecosystem.config.cjs
      run: |
        echo "Copying ecosystem.config.cjs to .output ..."
        cp ecosystem.config.cjs .output/ecosystem.config.cjs
        echo "Verifying copy:"
        ls -la .output/ecosystem.config.cjs
        echo "Contents of copied file:"
        cat .output/ecosystem.config.cjs
   #upload-artifact 上传.output文件夹有问题,这里我们用压缩包 
    - name: Create build archive
      run: |
        echo "=== Creating archive ==="
        tar -czf build-output.tar.gz .output/
        ls -la build-output.tar.gz
        echo "Archive size: $(du -h build-output.tar.gz)"
      
    - name: Upload build artifacts
      uses: actions/upload-artifact@v4
      with:
        name: build-files
        path: build-output.tar.gz
        retention-days: 1
        if-no-files-found: error
        compression-level: 6

  deploy:
    needs: build
    runs-on: ubuntu-latest
    # github action 访问云服务器需要用户名、主机ip、sshprivatekey,参数配置在Github Action中,指定的environment,例如服务器的SSH_PRIVATE_KEY
    environment: production
    steps:
    - uses: actions/checkout@v4
    - name: Download build artifacts
      uses: actions/download-artifact@v4
      with:
        name: build-files
        path: ./
    - name: Extract build files
      run: |
        tar -xzf build-output.tar.gz
        ls -la .output/
        
    - name: Deploy to server
      run: |
        echo "${{ secrets.SSH_PRIVATE_KEY }}" > private_key
        chmod 600 private_key
        rsync -avz --delete -e "ssh -i private_key -o StrictHostKeyChecking=no" \
          .output/ ${{ secrets.REMOTE_USER }}@${{ secrets.REMOTE_HOST }}:${{ secrets.REMOTE_PATH }}
        rm private_key
        
    - name: Restart services
      uses: appleboy/ssh-action@v1.0.0
      with:
        host: ${{ secrets.REMOTE_HOST }}
        username: ${{ secrets.REMOTE_USER }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        script: |
          cd ${{ secrets.REMOTE_PATH }}
          echo "Current directory: $(pwd)"
          echo "Checking if ecosystem.config.cjs exists:"
          ls -la ecosystem.config.cjs
          echo "Installing production dependencies..."
          npm install --production --silent
          echo "Installing PM2 globally..."
          npm install -g pm2 --registry https://registry.npmjs.org/
          npx pm2 reload ecosystem.config.cjs
          echo "Current PM2 status:"
          npx pm2 list
          echo "Deployment completed successfully"

secrets.SSH_PRIVATE_KEY 等等需要在github项目中配置

执行完上述操作,浏览器 http://云服务器公网IP:3000访问云服务器部署的项目,发现无法访问,此时需要处理权限问题

云服务器访问权限处理

1.云服务器开发对应端口的防火墙 运行sudo ufw allow 3000/tcp

2.云服务器管理后台 安全组规则添加3000端口入站流量

后续

域名

购买

备案

域名解析

Nginx反向代理

配置Https访问

相关推荐
浩男孩16 天前
【🍀新鲜出炉 】十个 “如何”从零搭建 Nuxt3 项目
前端·vue.js·nuxt.js
clue20 天前
解决pnpm创建Nuxt项目时的better-sqlite3绑定错误
nuxt.js
Midsummer25 天前
nuxt安装报错-网络问题
vue.js·nuxt.js
Avan_菜菜1 个月前
Nuxt3 中使用 pnpm 安装的 NuxtImg 使用会提示找不到图片
前端·npm·nuxt.js
古韵1 个月前
alova 3.3.0 发布:开发体验提升的重大更新
node.js·nuxt.js·next.js
尖椒土豆sss2 个月前
Nuxt3框架入门:第一个简单demo
前端·nuxt.js
尖椒土豆sss2 个月前
Nuxt3框架入门:初始化项目
前端·nuxt.js
林梦泽3 个月前
使用Cloudflare搭建Sink短链接|榨干大善人
nuxt.js
24岁学前端3 个月前
达成成就 - Nuxt Contributor 😁
nuxt.js