🦒

【Flame/Flutter】GitHubPagesを自動でアーカイブする

2024/12/15に公開

Flutter

はじめに

先日Flame(Flutterを用いたゲーム開発ライブラリ)で作成したゲームをweb用にビルドし、GitHubPagesで公開しました。以下を参考に進めれば比較的簡単にデプロイできます。

公開後、遊んでもらった人の意見を参考に新バージョンを作成して再公開しようと思ったのですが、以前のバージョンも残しておいて現行のものと比較できるようにしたいなと考えました。

ありがたいことに、GitHubPagesは適当にファイルやディレクトリを配置すれば複数のページをホスティングしてくれます。

Git Tagやbranchを元に自動で過去バージョンのページを作成・保持してくれるサービスやライブラリがあれば良かったのですが、適当なものが見つからなかったのでGitHub Actionsを自作して実現したので紹介します。

また、私が以前投稿した以下の記事と組み合わせれば「アプリバージョンを変更してpush→自動でタグ付け、GitHub Pagesをアーカイブ」することが可能となります。

作成したworkflow

.github/workflows/gh-pages.yaml

name: Gh-Pages

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: "3.16.5"
      - name: "Check app version"
        run: |
          echo "v$(yq '.version' pubspec.yaml)" | awk -F'[+]' '{print $1}' | sed "s/\./_/g" > VERSION_DIR_NAME
          echo "VERSION_DIR_NAME=$(cat VERSION_DIR_NAME)" >> $GITHUB_ENV
      - name: "Build web page"
        run: |
          flutter config --enable-web
          flutter build web --release --web-renderer=canvaskit --base-href /YOUR_REPOSITRY_NAME/
      - name: "Push web page to gh-pages branch"
        run: |
          git config user.name github-actions
          git config user.email github-actions@github.com
          git fetch origin gh-pages
          git worktree add worktree-gh-pages gh-pages
          cd ./worktree-gh-pages
          cp -r ../build/web/. ./
          git add --all
          git commit -m "Automatic deployment by github-actions"
          git push origin HEAD:gh-pages
      - name: "Check app version's web site exists"
        run: |
          test -d ./versions/${{ env.VERSION_DIR_NAME }} && echo 'true' > TEST_VERSION_DIR || echo 'false' > TEST_VERSION_DIR
          echo "TEST_VERSION_DIR=$(cat TEST_VERSION_DIR)" >> $GITHUB_ENV
        working-directory: ./worktree-gh-pages
      - name: "Push app version's web page"
        if: env.TEST_VERSION_DIR == 'false'
        run: |
          flutter config --enable-web
          flutter build web --release --web-renderer=canvaskit --base-href /YOUR_REPOSITRY_NAME/versions/${{ env.VERSION_DIR_NAME }}/
          cd ./worktree-gh-pages
          mkdir -p versions/${{ env.VERSION_DIR_NAME }}
          cp -r ../build/web/. ./versions/${{ env.VERSION_DIR_NAME }}
          git add --all
          git commit -m "Automatic deployment by github-actions"
          git push origin HEAD:gh-pages

リポジトリのルート直下にpubspec.yamlがある想定です。
上記を使用する際は

flutter-version: "3.16.5"

を使用しているFlutterバージョンに置き換えることと、YOUR_REPOSITORY_NAMEをリポジトリ名に変更してください。

上記のworkflowを追加すると、例えば

version: 0.1.0+1

と記述されているpubspec.yamlをmainブランチにpushした時、gh-pagesブランチに「(root)/versions/v0_1_0」ディレクトリが存在しなければ、pushしたFlutter環境をweb用にビルドしたものを上記ディレクトリ以下に作成します。
また、pushした最新のFlutter環境もweb用にビルドし、gh-pagesブランチのルート直下に配置します。
つまり、

https://(GitHubアカウント名).github.io/(リポジトリ名)/

にアクセスするとmainブランチにpushされている最新のアプリが閲覧でき、

https://(GitHubアカウント名).github.io/(リポジトリ名)/versions/(バージョン名)/

にアクセスすると過去バージョンでpushされたアプリを閲覧できるようになります。

おわりに

GitHubPages、無料で複数ページ作成までできるの神...

【Flame/Flutter】GitHubPagesを自動でアーカイブする

はじめに

作成したworkflow

おわりに

参考文献

Discussion