【3.0対応】Flutter webをGithub PagesにデプロイするGithub Actions

これじゃ！

プロジェクトに関わらず、このyamlをリポジトリの.github/workflows/配下に置くと動きます。

flutter-version: '3.0.0'のところでFlutterのバージョンを指定しているので、そこだけは自分のプロジェクトに合わせて変えてください。

解説

Checkout

チェックアウトです。ここは特に言うことなし。

Checkout

- uses: actions/checkout@v3
  with:
    token: ${{ secrets.GITHUB_TOKEN }}

Repository

Github Pagesのパス名の元となるリポジトリ名を取得しています。
https://github.com/nekomimi-daimao/kanban_memo
→kanban_memo
このように取れます。後のFlutterで使います。

Repository

- name: Repository
  id: version
  run: |
    REPOSITORY=$(echo ${{ github.repository }} | sed -e "s#.*/##")
    echo ::set-output name=repository::$REPOSITORY

Flutter

FlutterSDKを取得して、プロジェクトをビルドしています。
テストは省いています。

Flutter

- name: Flutter
  uses: subosito/flutter-action@v2
  with:
    flutter-version: '3.0.0'
    channel: 'stable'
    cache: true
- run: flutter --version
- run: flutter pub get
- run: flutter build web --web-renderer html --base-href /${{ steps.version.outputs.repository }}/

Deploy

ビルドできたFlutterのコンテンツをGithub Pagesにデプロイしています。

Deploy

- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./build/web

ハマりどころ

たたかいの きろく

日本語フォント・日本語入力がおかしい

--web-renderer htmlでhtmlを強制しましょう。CanvasKitだと日本語が豆腐になったり変換がおかしかったりハチャメチャになります。
3.0のリリースでFull support for international text input on all desktop platformsって書いてますが、CanvasKitだとまだなんか変換の入力が変なのでhtml安定だと思います。

デプロイが成功しても画面が真っ白

404 Failed to load resource

Consoleがこんな感じのエラーログまみれになります。
なぜかというと、Github Pagesは以下のようなパスになりますが、このリポジトリ名の部分をFlutterが考慮できないからです。パスが間違っているので必要なリソースが取得できず真っ白になっています。
https://{ユーザ名}.github.io/{リポジトリ名}/

なので、Github Actionsの過程でリポジトリ名を取得しておいて、ビルド時に以下のオプションで渡してあげる必要があります。
--base-href /${{ steps.version.outputs.repository }}/
このとき、引数のパスは必ず/で始まって/で終わる必要があります。

gitでエラーが出る

Action failed with "The process '/usr/bin/git' failed with exit code 128"

こんな感じのエラーが出てチェックアウトに失敗します。

https://github.com/actions/checkout/issues/417

どうもFlutterは関係なくてチェックアウトのバグらしいです。
自分はPATを設定してもだめでしたが、以下のようにActionsのpermissionを許可したら動きました。

Settings → Actions → General

まとめ

ネットにそのまま使えるやつが落ちてなくてたいへんつらかったので、過去の自分に向けて書きました。
特に--base-hrefを実行してるやつがない……なんで……なんで？

https://github.com/marketplace/actions/flutter-action
FlutterをActionsでビルドするときはこいつのサンプルをそのまま引っ張ってくればだいたい解決すると思います。

さっと書けるActionsはこれで終わりですが、初めてFlutterで作ったアプリの方でもなにか書きたいと思います。自分が欲しくて作ったアプリなので自分で使う分には大変満足なのでこの満足感を語りたい……。

https://nekomimi-daimao.github.io/kanban_memo/#/

おしまい。

参考

リポジトリ

https://github.com/nekomimi-daimao/kanban_memo

gistにもいちおうとっておく

途中で書いてたメモ的なやつ

https://zenn.dev/nekomimi_daimao/scraps/39153e9039157f

参考リンク

https://qiita.com/qiuyin/items/a80ae53827ffb746a56f
https://future-architect.github.io/articles/20211228a/
https://github.com/flutter/flutter/issues/69760
https://stackoverflow.com/questions/65689346/404-failed-to-load-resource-deploying-flutter-web-app-to-github-pages
https://zenn.dev/m_norii/articles/349b9ce0260631