🦄

FlutterアプリをGitHub Pagesへデプロイする方法

2022/05/25に公開約1,900字

始めに

既に多くの方々が Flutter アプリを GitHub Pages にデプロイする記事を書いていますが、私がそれらの方法を試したところどれも再現性がないものでした。

https://qiita.com/yu0819ki/items/2c8f4c9e32dbecca0590

https://qiita.com/CLOSED_nikoniko/items/82c97ab6275c559d1b77

https://maheshmnj.medium.com/deploying-your-flutter-webapp-to-github-pages-111ff9e5cbc9

「再現性がない」というと誤解を招きそうなのでもう少し正確に表現すると、公開 URL が「https://アカウント名.github.io」となる GitHub Pages に Flutter アプリをデプロイする場合はいいのですが、この方法では公開 URL が「https://アカウント名.github.io/リポジトリ名」となる個別のリポジトリで作成した GitHub Pages にデプロイをする場合には必ず失敗します

エラーの内容

試しに Flutter で作成したアプリを flutter web build コマンドでビルドして、個別のリポジトリで作成した GitHub Pages にデプロイした結果が以下になります。

0001

ビルドされたリソースの読み込みで失敗し 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 アプリをデプロイできるようになります。

https://twitter-dart.github.io/twitter-api-v2-website/#/

備考

この記事を書き始めるまで知りませんでしたが、つい最近この問題について先に記事を書いてくれた方がいたようです。GitHub Actions と組み合わせて解決する方法を書いてくれているので、実際に試してみる際にはこちらの方法がおすすめです。

https://zenn.dev/nekomimi_daimao/articles/26fd2e3b763191

宣伝

https://zenn.dev/kato_shinya/articles/released-twitter-api-v2-dart

https://zenn.dev/kato_shinya/articles/what-is-batch-dart

スポンサーの募集

オープンソース開発をサポートしてくださるスポンサーを募集しています。少額からの寄付も可能ですので、以下のリンクから是非ご支援ください。

https://github.com/sponsors/myconsciousness

また、この記事にバッジを贈っていただくことでも支援は可能です。

GitHubで編集を提案

Discussion

ログインするとコメントできます