github自动部署nuxt项目

部署前的准备

最近在学习 nuxt 框架，花了几天做了一个 realWorld 博客 demo，正好遇到了一些部署的问题，在这里做一个简单的教程。
在部署前我们需要准备一些东西：

1. 首先你需要一个本地能够跑通的项目
2. 然后需要一个能够使用的云服务器，可以到阿里云或者腾讯云买一个 linux 服务器
3. 在 linux 服务器上安装 node，安装过 node 可以直接略过，如果没安装过看我之前写的在linux服务器上安装node教程
4. 在 linux 服务器上安装 pm2，我们需要使用 pm2 来在服务器上后台开启一个进程来持续运行我们的项目
   pm2 的安装步骤：

        # 将 npm 的镜像源设置为淘宝镜像，否则安装极慢，甚至会失败
npm config set registry https://registry.npm.taobao.org

# 全局安装 pm2
npm install pm2 -g

# 建立全局软连接
ln -s /usr/local/src/nodejs/bin/pm2 /usr/local/bin/

# 验证是否安装成功
pm2 -v

    

如果能出现版本号，就证明安装成功了

配置文件

1. nuxt.config.js

在 nuxt.config.js 中增加 server 字段

        server: {
  host: ‘0.0.0.0‘, // 监听所有的网卡服务器，保证生产服务器能够被访问
  port: 3000 // 项目端口
},

    

2. pm2.config.json

在项目的根目录下增加 pm2.config.json，用作配置 pm2 运行的脚本文件

        {
  "apps": [
    {
      "name": "RealWorld", // 项目名称
      "script": "npm", // 项目运行脚本
      "args": "start" // 脚本运行命令
    }
  ]
}

    

3. main.yml

在项目的根目录下增加 .github 文件夹，在 .github 下面创建 workflows 文件夹，在 workflows 文件夹下面创建 main.yml 文件，将下面内容复制到这个文件中，然后修改一些关键字段

        name: Publish And Deploy Demo
on:
  push:
    tags:
      - ‘v*‘

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

    # 下载源码
    - name: Checkout
      uses: actions/checkout@master

    # 打包构建
    - name: Build
      uses: actions/setup-node@master
    - run: npm install
    - run: npm run build
    - run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json

    # 发布 Release
    - name: Create Release
      id: create_release
      uses: actions/create-release@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        tag_name: ${{ github.ref }}
        release_name: Release ${{ github.ref }}
        draft: false
        prerelease: false

    # 上传构建结果到 Release
    - name: Upload Release Asset
      id: upload-release-asset
      uses: actions/upload-release-asset@master
      env:
        GITHUB_TOKEN: ${{ secrets.TOKEN }}
      with:
        upload_url: ${{ steps.create_release.outputs.upload_url }}
        asset_path: ./release.tgz
        asset_name: release.tgz
        asset_content_type: application/x-tgz

    # 部署到服务器
    - name: Deploy
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        script: |
          cd 替换成你的服务器项目文件夹的绝对路径
          wget 替换成你的github项目地址 -O release.tgz
          tar zxvf release.tgz
          npm install --production
          pm2 reload pm2.config.json


    

github 配置

配置完项目中的 main.yml 文件之后，我们还需要在 github 上做一些配置。我们能看到上面有很多 secrets 关键字，接下来我们就需要在 github 上配置 secrets。

1. 生成 TOKEN

首先我们需要点击我们的头像，然后点进 settings

然后点击 Developer settings

点击 Personal access tokens

点击 Generate new token，生成一个 token ，取什么名字都行，生成 token 之后，一定要将 token 保存起来，因为这个 token 只有在第一次的时候显示

2. 配置 secrets

上面我们配置完 token 之后，进入 github 项目的仓储，然后点击 setting 下的 Secrets

然后配置下面几个字段

• HOST：服务器地址
• PASSWORD：服务器密码
• PORT：服务器端口 默认是 22
• TOKEN：github token 将你刚才生成的 token 配置进来
• USERNAME：服务器用户名 默认是 root

3. 部署项目

如果你做完上面的配置之后，然后提交你的代码，将你的代码打一个 tag

        git add .

git commit -m "提交信息"

git tag v0.0.1

git push origin v0.0.1

    

之后就 github actions 就自动部署了，如果像下面这样，就证明部署成功了

然后就可以访问地址验证一下了
附上我的 github 源码地址，记得给我 star 哦
https://github.com/maoxiaoxing/realworld

原文：https://www.cnblogs.com/bejamin/p/14443717.html