FlutterアプリをGitHub Pagesへデプロイする方法
始めに
既に多くの方々が Flutter アプリを GitHub Pages にデプロイする記事を書いていますが、私がそれらの方法を試したところどれも再現性がないものでした。
「再現性がない」というと誤解を招きそうなのでもう少し正確に表現すると、公開 URL が「https://アカウント名.github.io」となる GitHub Pages に Flutter アプリをデプロイする場合はいいのですが、この方法では公開 URL が「https://アカウント名.github.io/リポジトリ名」となる個別のリポジトリで作成した GitHub Pages にデプロイをする場合には必ず失敗します。
エラーの内容
試しに Flutter で作成したアプリを flutter web build コマンドでビルドして、個別のリポジトリで作成した GitHub Pages にデプロイした結果が以下になります。
ビルドされたリソースの読み込みで失敗し 404 エラーが発生していますね。もちろん、この状態では描画はできないため待てど暮らせど画面にはなにも出力されません。
エラーの原因
エラーの原因は先に挙げた開発者ツールに出力されたようにビルドされたリソースへのパスが正しくないからなのですが、なぜそのような結果になるのかというと flutter build web コマンドで生成された index.html に理由があります。
以下が flutter build web コマンドで生成された index.html にあるステップなのですが、基準 URL が「https://アカウント名.github.io/リポジトリ名」にあるリポジトリ名を考慮できていないことがわかると思います。
<base href="/" />
解決方法
では、このビルドされた index.html を直接編集して /リポジトリ名/ とするのかというとそうではありません。
非常に気づきにくい仕様ですが次のコマンドを実行することで、ビルド時に /リポジトリ名/ が問題となっていた index.html の 基準 URL に設定されます。
flutter build web --base-href /リポジトリ名/
このコマンドでリソースパスの問題が解決され、次のページのように個別リポジトリでも GitHub Pages に Flutter アプリをデプロイできるようになります。
備考
この記事を書き始めるまで知りませんでしたが、つい最近この問題について先に記事を書いてくれた方がいたようです。GitHub Actions と組み合わせて解決する方法を書いてくれているので、実際に試してみる際にはこちらの方法がおすすめです。
Discussion