🧞‍♂️

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

2022/05/18に公開

2件

これじゃ！

プロジェクトに関わらず、この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 }}/
このとき、引数のパスは必ず/で始まって/で終わる必要があります。