自动化部署练习 github actions

>> 视频讲解 <<

[1.下载练习用的代码](https://gitee.com/lagoufed/fed-e-questions/raw/master/part3/realworld-nuxtjs.zip

2.验证项目代码正常可用

image.png image.png image.png

3.生成本地仓库

>> 视频讲解 <<

确认有「.gitignore」文件, 并且 push 时会忽略「node_modules」和「.nuxt」目录

image.png

初始化仓库，修改当前分支名称，并生成一个commit提交

image.png

git init
git add . && git commit -m "init"
git branch -M main

4.创建 github 仓库, 关联本地库

image.png image.png image.png image.png

# 关联远程代码库
git remote add origin https://github.com/你账号/realworld-nuxtjs.git
# 查看关联情况
git remote -v
# 把当前代码先推一波. 证明没问题
git push origin main

image.png

5.配置 github actions 信息

>> 视频讲解 <<

image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png

6.编辑 workflows 脚本

打开项目根目录 .github / workflows / main.yml 文件

image.png

(以下是 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 /usr/local/xlf-realworld-nuxtjs
            wget https://github.com/xionglaifu/xlf-realworld-nuxtjs/releases/latest/download/release.tgz -O release.tgz
            tar zxvf release.tgz
            npm install --production
            pm2 reload pm2.config.json

『一定要修改 倒数第4行 仓库地址』

编辑 PM2 配置文件

pm2.config.json (练习中已包含该文件)

{
  "apps": [
    {
      "name": "RealWorld",
      "script": "npm",
      "args": "start"
    }
  ]
}

注意:

• 不要少写 s
• 少数命令可以不写 run, 多数命令都是 npm run xxxx

7.完成测试

>> 视频讲解 <<

image.png image.png

git add .
git commit -m "发布部署-测试"
git tag v0.1.0
git tag
git push origin v0.1.0

image.png image.png image.png

( 打完收工 )