GithubPagesでFlutterアプリをホスティングする

前回は Flutter のCI環境を整えるということで、 Github Actions で Lint と Test を実行してみたのでした。
今回は外部に公開して、手元のスマホ端末（のブラウザ）で確認できるようにしてみます。

どこにデプロイするか

タイトルにしたとおり、最終的に Github Pages にデプロイすることにしたのですが、決めるに当たって以下の選択肢がありました。

• AWS App Runner
• Heroku
  • コンテナデプロイ
  • ソースデプロイ
• Firebase Hosting
• Github Pages

業務ではDockerを中心に環境構築してたりするので、 「Nginx コンテナに Flutter のビルド成果物を載せる感じで公開するか〜」という発想をしてました（実際Herokuにコンテナデプロイするとこまでやりました）。

が、フロントエンドリソースしか必要としないので、 Nginx すら要らない事に気づきつつ、公式のドキュメントを探したところ以下の記事に当たりました。
https://flutter.dev/docs/deployment/web

ここでは

• Firebase Hosting
• Github Pages
• Google Cloud Hosting

と紹介されており、 Google Cloud Hosting は、静的ホスティングする場合結局 Firebase になったので、前述のリストになりました。
その中でもGithub Pages は、すでに利用している Github のアカウントで作業ができるという利点があるため、これを選びました。

さて、本題に入っていきます。

Flutter アプリケーションを Web 向けにビルドする

デプロイされる対象を作成しなければならないので、以下のコマンドでデプロイ対象となるリソースを生成するコマンドを確認します。

$ ｆlutter build web

このコマンドを実行すると build/web ディレクトリ配下にビルド済みのリソースが配置されるようです。
内容は以下のようになりました。

$ ls -l build/web
total 2696
drwxr-xr-x  7 yu0819ki  yu0819ki      224  6  5 00:04 assets
-rw-r--r--@ 1 yu0819ki  yu0819ki      917  5 19 04:01 favicon.png
-rw-r--r--  1 yu0819ki  yu0819ki     6749  6  6 00:34 flutter_service_worker.js
drwxr-xr-x  4 yu0819ki  yu0819ki      128  6  5 00:04 icons
-rw-r--r--  1 yu0819ki  yu0819ki     3680  6  6 00:34 index.html
-rw-r--r--  1 yu0819ki  yu0819ki  1352119  6  6 00:34 main.dart.js
-rw-r--r--  1 yu0819ki  yu0819ki      568  5 28 07:03 manifest.json
-rw-r--r--  1 yu0819ki  yu0819ki       58  6  6 00:34 version.json

このディレクトリの中身をWebサーバーで配信すれば、前々回に試しで動かしていた Flutter アプリケーションがどこからでも見れるようになる・・・ハズ・・・！

Github Pages にデプロイする

Github Pages についての詳細な説明は割愛します。一応この辺を参考にすれば作成自体は簡単にできるはず・・・

要するに、 Github Pages として公開するリソースを含んだブランチを用意して、設定画面でちょっといじれば公開できます。
先程のビルドで生成したリソースを直接適当なブランチにCommit＆Pushしてもいいのですが、すでに前回利用している Github Actions でデプロイを自動化します。

Github Actions では、公式または有志による Action が色いろあるので、今回のような「Github Actions で Github Pages へのデプロイをする」という比較的誰でも思いつくような処理は、誰かが Action として公開してくれているだろう・・・ということで色々物色したところ、以下のAction を見つけました。
https://github.com/peaceiris/actions-gh-pages

This is a GitHub Action to deploy your static files to GitHub Pages.

そう。今回やりたいのはまさにそれよ・・・ｗ

というわけでデプロイ用の YAML を書きます。
https://github.com/yu0819ki/flutter-sample-1/blob/main/.github/workflows/gh_pages.yaml

肝になる記述はこれだけです。ビルドして、できた物を先程の Action を利用させてもらうだけ。

steps:
# 略 #
  - name: run build
    run: flutter build web
  - name: Deploy to GithubPages
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./build/web

ハマったところ

ここまでの作業で Github Pages へのデプロイはできていたんですが、いざURLを開いてみると画面が真っ白でアプリケーションとしては動いてなかったんですよね・・・
原因についてはコメントで残したんですが、 Chrome のデベロッパーツールで確認してみたところ、リソースを参照するパスが違うぞ、と。

Github Pages では、リポジトリ名をサブディレクトリとして公開されるので、たとえば https://yu0819ki.github.io/flutter-sample-1/main.dart.js を参照するのが正解なのに、ドメインの直下を探してしまっています。

これについては flutter の Issue で取り上げられてる内容をみて「あーなるほど」という感じでした。
https://github.com/flutter/flutter/issues/50580

ここをクリアして、公開したURLが以下になります。Flutterのサンプル置いただけなので「だから何」ではあるんですが、成果物は成果物ということで。。。
https://yu0819ki.github.io/flutter-sample-1/#/

参考にさせてもらった記事

（へーそんなドンピシャで便利な Action があるんだー・・・と思ったらご本人の記事でしたｗ）