ハカセノオト

moon indicating dark mode
sun indicating light mode

Flutter で作成した Web アプリを Github Pages で公開する

January 22, 2022

背景

Flutter で作った静的コンテンツを Github Pages に公開する方法を記載します。

以下のサイトは、Flutter で使える物理エンジンモジュール Forge2D を利用して遊びで作ったものです。

https://hnishi.github.io/hello_forge2d/

これを github pages で公開しようとしたときに、 flutter 公式の doc があまり親切に書いてくれていないのと、意外と記事が少なかったのと、ちょっとハマりどころがあったため、記事にします。

結論

Github Actions を利用して、repository に push されたら自動で公開されるようにします。

以下のページを参考に、github repository で github pages で公開するための設定を行う。

https://pages.github.com/

以下、github actions の設定をご覧ください。

https://github.com/hnishi/hello_forge2d/blob/be8b68af1b95d2d5e0a77f5609d4b769c86d687f/.github/workflows/release_deploy_web.yml#L25

肝は、 flutter build -v web --release --web-renderer canvaskit --base-href "/$(basename $GITHUB_REPOSITORY)/"--base-href オプションです。

https://hnishi.github.io/hello_forge2d/ のように、ページの URL が、ドメイン直下ではない場合には、 --base-href オプションを指定すれば良いです (ここに少しハマりました)。(ドメイン直下を root として使う場合には、関係ない話ですが。。。)

参考


hnishi のブログ


技術系の記事など。
綺麗に書こうとすると続かない気がするので、割と雑に、備忘録的に書いていく方針。
内容に誤りがあった場合などのご連絡は、Twitter の DM などで頂けると幸いです。