バージョン変えてPushしたらVPMが自動で更新されるようにする

# はじめに
[前回、VPMを作ることが出来ました](https://qiita.com/pandrabox/items/7d1166f1a08853264e7b).
出来たはいいのですが、更新するたびにアップロードしたVPMのリリースアクションと、サイトのほうを更新するアクションをしないといけません。
面倒です。自動化しましょう

# 注意事項
- 動けばよかろうの精神のため冗長です
- 結論だけです[^つかれた・・・]
[^つかれた・・・]:つかれた・・・

# 手順


## トークンの取得
- リポジトリを跨いでプログラム的にアクセスするにはトークンというものが必要らしい。期限があるのでたまにやり直す必要がある
- Github右上の自分のアイコンをクリックしてSettingをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/56ad855a-41bc-c2d0-8fd7-359a9a77468b.png)
- 左メニュー一番下の「Developer Settings」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/98fe351c-ab66-3dae-c69b-e4cd02a0d6c6.png)
- Personal access tokens → Fine-grained tokens
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/998a00c8-7776-ea0f-3d63-bdf4b1e903f9.png)
- Generate new token
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/b563aa27-44c0-d966-c185-5b522758cdb3.png)
- 画像を参考に適切に設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/9b9401ac-5847-732c-fe79-884aa3ae09e5.png)
- Repository Permissionはよくわからないから全部RWにした（よくない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/eddf4124-b62c-5de1-ca48-ac3e422c4b54.png)
- Account Permissionは要らない
- トークンの期限を確認[^忘れそう]して、Generate token
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/a9c502d2-df05-1c92-f5b2-a67be1bf4a83.png)
[^忘れそう]: 忘れると何故か公開できてないという事故を起こしそうなのでスケジュールにいれた
- コピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/1fd0def0-773e-5b7d-539a-6b2db5b1c8f0.png)
:::note warn
- トークンはセキュリティ上重要なものです。流出しないようにしましょう
- トークンは恐らく再表示不可で、なくしたらもう一度手順やりなおしです。なくさないようにしましょう
:::

## トークンをシークレットに登録
- VPMのデータを実際に管理している方(サイトでない方)のリポジトリを開き、Settings→Secrets and variables→Actions→New repository secret
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/114406f3-e384-26ea-391f-db4271fa67a2.png)
- NameにTOKEN[^サンプルがそうなので]、Secretにさっきコピーしたトークンを入れて、Add secretを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/42a3784a-00ec-d088-e2c3-592ced61e699.png)
[^サンプルがそうなので]:サンプルで読み出すところをこの名前にしているだけなので好みで別の名前にしてもよいです
- これでトークンをプログラムから読み出せるようになった。もう記録されているのでなくして大丈夫です



## サイトのほう(Build Repo Listing)のActionの編集
- 該当Actionを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/4709879b-873a-7ece-90f0-d4680e0246ca.png)
- Edit
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/0e71e463-cd78-f978-373b-7b7d3132d7c4.png)
- 次をコピペ(最初のほうがちょっと変わっただけ)
    - 「automatic-web-update」っていう指示をうけとったらこのActionを実行します、という設定をした
```build-listing.yml
name: Build Repo Listing

on: 
  repository_dispatch:
    types: [automatic-web-update]
  workflow_dispatch:
  push:
    branches: main
    paths: source.json

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write
  
# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true
  
env:
  listPublishDirectory: Website
  pathToCi: ci

jobs:
  
  build-listing:
    name: build-listing
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      
      - uses: actions/checkout@v3 # check out this repo
      - uses: actions/checkout@v3 # check out automation repo
        with:
          repository: vrchat-community/package-list-action
          path: ${{env.pathToCi}}
          clean: false # otherwise the local repo will no longer be checked out
          
      - name: Restore Cache
        uses: actions/cache@v3
        with:
          path: |
            ${{env.pathToCi}}/.nuke/temp
            ~/.nuget/packages
          key: ${{ runner.os }}-${{ hashFiles('**/global.json', '**/*.csproj') }}
          
      - name: Build Package Version Listing
        run: ${{env.pathToCi}}/build.cmd BuildMultiPackageListing --root ${{env.pathToCi}} --list-publish-directory $GITHUB_WORKSPACE/${{env.listPublishDirectory}}
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
      - name: Setup Pages
        uses: actions/configure-pages@v3
        
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ${{env.listPublishDirectory}}
          
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2
```



## 実作業側のActionの編集
- PCローカルのVPMを管理しているフォルダ/.github/workflows/release.ymlを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/70c4ebdd-e676-2f23-dc24-7356b7b6d8ac.png)
- 下をコピーして、貼り付ける
    - 前回の状態（手動リリース）を改造して次の機能を加えてあります
        - Pushしたときにバージョンを確認して、新しいバージョンであれば自動でリリースしてサイトを更新
    - もし自分で触ってみたいという方は「ymlは極めてインデントに厳しい言語である」ということを知っているといいと思います
```release.yml
name: Build Release

on: 
  workflow_dispatch:
  push:
    branch: "main"

jobs:

  # Validate Repository Configuration
  config:
    runs-on: ubuntu-latest
    outputs:
      config_package: ${{ steps.config_package.outputs.configPackage }}
    steps:

    # Ensure that required repository variable has been created for the Package
    - name: Validate Package Config
      id: config_package
      run: |
          echo "configPackage=true" >> $GITHUB_OUTPUT;

  # Get Version
  GetTargetVersion:
    needs: config
    runs-on: ubuntu-latest
    outputs:
      TargetVersion: ${{ steps.version.outputs.value }}
      TagExist: ${{ steps.contains_tag.outputs.retval }}
    env:
      packagePath: .
    steps:
      # Checkout Local Repository
      - name: Checkout
        uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac

      # Get the Package version based on the package.json file
      - name: Get Version
        id: version
        uses: zoexx/github-action-json-file-properties@b9f36ce6ee6fe2680cd3c32b2c62e22eade7e590
        with: 
            file_path: "${{ env.packagePath }}/package.json"
            prop_path: "version"

      # Check Exist
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: rickstaa/action-contains-tag@v1
        id: contains_tag
        with:
          reference: "main"
          tag: "${{ steps.version.outputs.value }}"
          frail: false

  # Build and release the Package
  # If the repository is not configured properly, this job will be skipped
  build:
    needs: GetTargetVersion
    runs-on: ubuntu-latest
    permissions:
      contents: write
    env:
      packagePath: .
    if: always() && (needs.GetTargetVersion.outputs.TagExist == 'false')
    steps:

      # Checkout Local Repository
      - name: Checkout
        uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac

      #Configure the Environment Variables needed for releasing the Package
      - name : Set Environment Variables1
        run: |
           echo "version=${{ needs.GetTargetVersion.outputs.TargetVersion }}" >> $GITHUB_ENV
           echo "RepoName=${GITHUB_REPOSITORY#${GITHUB_REPOSITORY_OWNER}/}" >> $GITHUB_ENV

      - name : Set Environment Variables2
        run: |
           echo "zipFile=${{ env.RepoName }}-${{ env.version }}".zip >> $GITHUB_ENV

      # Zip the Package for release
      - name: Create Package Zip
        working-directory: "${{ env.packagePath }}"
        run: zip "${{ github.workspace }}/${{ env.zipFile }}" ./* -r -x .github .git '.git/*' '*~/*' '*.ps1*'
      
      # Build a list of .meta files for future use
      - name: Track Package Meta Files
        run: find "${{ env.packagePath }}/" -name \*.meta >> metaList
      
      # Make a release tag of the version from the package.json file 
      - name: Create Tag
        id: tag_version
        uses: rickstaa/action-create-tag@88dbf7ff6fe2405f8e8f6c6fdfd78829bc631f83
        with:
          tag: "${{ env.version }}"
      
      # Publish the Release to GitHub
      - name: Make Release
        uses: softprops/action-gh-release@de2c0eb89ae2a093876385947365aca7b0e5f844
        with:
          files: |
            ${{ env.zipFile }}
            ${{ env.packagePath }}/package.json
          tag_name: ${{ env.version }}

      - name: Update Website
        run: |
          TOKEN=${{ secrets.TOKEN }}
          curl \
            -X POST \
            -H "Authorization: token $TOKEN" \
            -H "Accept: application/vnd.github.v3+json" \
            https://api.github.com/repos/pandrabox/vpm/dispatches \
            -d '{"event_type":"automatic-web-update","client_payload":{"env": "dev"}}'
```

- コードの下の方にあるapi.github.com/repos/***pandrabox***/***vpm***/dispatchesの部分を適切な名前に変更する（それぞれgithubユーザ名、サイト用のリポジトリ名）

## アップロードと動作チェック
- package.jsonを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/138160d5-ed66-aedb-4d88-5020d9218ca7.png)
- バージョンを上げて保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/f20c9295-dfdb-59ce-a7fb-db10edc83ddb.png)
- Github DesktopでCommitしてPush
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/9df83331-46b7-9b7b-2ae4-2f935f7bd9c0.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2935918/d03c6282-2106-6cbd-aa32-900dbedea21a.png)
- 数分してから前回作成したvpmのページを見たり、VCC/ALCOM等でバージョン確認すると更新されている
- 今後はファイルを変更してCommit→Pushを繰り返していき、リリースしたい時だけpackage.jsonのバージョンを上げるという運用をしていく