前言

上篇文章写了如何实现一个小报童的分销站。

上一篇文章介绍了运行java代码,生成json,然后贴到前端项目里,生成最终的专栏列表,提交代码,进行部署,然后就更新成功了。

那么经过这段时间的捣鼓,实现了自动化部署,自动生成json,自动生成最终的专栏列表,自动部署,减少了人工操作的步骤。

All in one的git地址在下方, fork之后添加自己的refer_code & domain,即可使用github actions进行自动部署

https://github.com/gloaming123/moon-web-start

workflow预览

workflow详情如下,文件地址在项目的.github/workflows/github-pages.yml

# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy moon-web-start with GitHub Pages dependencies preinstalled

on:
  # Runs on pushes targeting the default branch
  push:
    branches: [master]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      #      - uses: npm/action-setup@v2
      #        with:
      #          version: 6.32.9
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: npm

      # java
      - name: Checkout Java project
        run: git clone https://github.com/thend03/xiaobot-spider.git

      - name: Set up JDK
        uses: actions/setup-java@v2
        with:
          java-version: '11'
          distribution: zulu

      - name: Build and run xiaobot-spider
        run: |
          cd xiaobot-spider
          mvn clean package  # 或者使用 `mvn package`,具体取决于你的项目
          java -jar target/xiaobot-spider-1.0-SNAPSHOT-jar-with-dependencies.jar  # 运行你的主方法,生成 detail.json
          # mv target/detail.json ../detail.json

      - name: Copy detail.json to Vue project
        run: |
          pwd
          rm -f ./detail.json #删掉当前的,重新生成一个
          cp /tmp/detail.json ./detail.json

      # setup npm
      - name: do npm install
        run: npm install

      - name: Run dispose base
        run: |
          echo "REFER_CODE=${{ secrets.REFER_CODE }}" > .env
          echo "print env"
          rm -f CNAME
          if [ -n "${{ secrets.CNAME }}" ]; then
            echo "${{ secrets.CNAME }}" > CNAME
          fi
          cat .env
          node disposebase.js
          echo "print preset.json"
          cat src/preset.json

      - name: Build
        env:
          # 设置环境变量,pages自定义域名了,显式设置为空
          # REPOSITORY: ${{ github.repository }}
          REPOSITORY: ''
        run: npm run build

      - name: Setup Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: ./dist

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

这个workflow会在master分支有变化的时候,自动执行workflow

workflow本质上是起了个linux的pod,运行了你代码的构建包

这个workflow分为以下部分

  • 执行java代码生成专栏的信息,格式为json字符串
  • 安装npm环境
  • 执行disposebase生成专栏列表
  • 读取secrets.REFER_CODE设置到.env里
  • 打包生成dist,上传
  • 生成网站

这里有几个要注意的点是,首先是需要把java代码拉到前端项目里,然后执行mvn clean package

然后会执行main方法生成json,有个问题就是java生成的json的目录,不能用相对目录,可能会被目录折磨。

所以我直接写到了/tmp目录,前端项目读也从/tmp读,这样就避免了烦人的目录问题。

然后自己fork之后,记得修改自己仓库的配置项secrets.REFER_CODE

假如需要自定义域名的话,记得再添加一个secrets.CNAME

这个配置是你个人的分销码,不修改的话那就无法进行分销了。

设置方式如下

首先打开你自己仓库的settings, 点击左侧的secrets and variables,新建仓库的secret

image-20240814091243299