GithubPagesでFlutterアプリをホスティングする

[前回](https://qiita.com/yu0819ki/items/35e0e56737b47a83d9c5)は `Flutter` のCI環境を整えるということで、 `Github Actions` で `Lint` と `Test` を実行してみたのでした。
今回は外部に公開して、手元のスマホ端末（のブラウザ）で確認できるようにしてみます。

## どこにデプロイするか
タイトルにしたとおり、最終的に `Github Pages` にデプロイすることにしたのですが、決めるに当たって以下の選択肢がありました。

- AWS App Runner
- Heroku
  - コンテナデプロイ
  - ソースデプロイ
- Firebase Hosting
- Github Pages

業務ではDockerを中心に環境構築してたりするので、 「`Nginx` コンテナに `Flutter` のビルド成果物を載せる感じで公開するか〜」という発想をしてました（実際Herokuにコンテナデプロイするとこまでやりました）。

が、フロントエンドリソースしか必要としないので、 `Nginx` すら要らない事に気づきつつ、公式のドキュメントを探したところ以下の記事に当たりました。
https://flutter.dev/docs/deployment/web

ここでは

- Firebase Hosting
- Github Pages
- Google Cloud Hosting

と紹介されており、 `Google Cloud Hosting` は、静的ホスティングする場合結局 `Firebase` になったので、前述のリストになりました。
その中でも`Github Pages` は、すでに利用している `Github` のアカウントで作業ができるという利点があるため、これを選びました。

さて、本題に入っていきます。

## Flutter アプリケーションを Web 向けにビルドする
デプロイされる対象を作成しなければならないので、以下のコマンドでデプロイ対象となるリソースを生成するコマンドを確認します。

```terminal
$ ｆlutter build web
```

このコマンドを実行すると `build/web` ディレクトリ配下にビルド済みのリソースが配置されるようです。
内容は以下のようになりました。

```terminal
$ ls -l build/web
total 2696
drwxr-xr-x  7 yu0819ki  yu0819ki      224  6  5 00:04 assets
-rw-r--r--@ 1 yu0819ki  yu0819ki      917  5 19 04:01 favicon.png
-rw-r--r--  1 yu0819ki  yu0819ki     6749  6  6 00:34 flutter_service_worker.js
drwxr-xr-x  4 yu0819ki  yu0819ki      128  6  5 00:04 icons
-rw-r--r--  1 yu0819ki  yu0819ki     3680  6  6 00:34 index.html
-rw-r--r--  1 yu0819ki  yu0819ki  1352119  6  6 00:34 main.dart.js
-rw-r--r--  1 yu0819ki  yu0819ki      568  5 28 07:03 manifest.json
-rw-r--r--  1 yu0819ki  yu0819ki       58  6  6 00:34 version.json
```

このディレクトリの中身をWebサーバーで配信すれば、[前々回](https://qiita.com/yu0819ki/items/dc9ffa41162aabb7d402)に試しで動かしていた `Flutter` アプリケーションがどこからでも見れるようになる・・・ハズ・・・！

## Github Pages にデプロイする
`Github Pages` についての詳細な説明は割愛します。一応[この辺](https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site)を参考にすれば作成自体は簡単にできるはず・・・

要するに、 `Github Pages` として公開するリソースを含んだブランチを用意して、設定画面でちょっといじれば公開できます。
先程のビルドで生成したリソースを直接適当なブランチにCommit＆Pushしてもいいのですが、すでに前回利用している `Github Actions` でデプロイを自動化します。

`Github Actions` では、公式または有志による `Action` が色いろあるので、今回のような「`Github Actions` で `Github Pages` へのデプロイをする」という比較的誰でも思いつくような処理は、誰かが `Action` として公開してくれているだろう・・・ということで色々物色したところ、以下の`Action` を見つけました。
https://github.com/peaceiris/actions-gh-pages
> This is a GitHub Action to deploy your static files to GitHub Pages. 

そう。今回やりたいのはまさにそれよ・・・ｗ

というわけでデプロイ用の `YAML` を書きます。
https://github.com/yu0819ki/flutter-sample-1/blob/main/.github/workflows/gh_pages.yaml

肝になる記述はこれだけです。ビルドして、できた物を先程の `Action` を利用させてもらうだけ。

```yaml
steps:
# 略 #
  - name: run build
    run: flutter build web
  - name: Deploy to GithubPages
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./build/web
```

## ハマったところ
ここまでの作業で `Github Pages` へのデプロイはできていたんですが、いざURLを開いてみると画面が真っ白でアプリケーションとしては動いてなかったんですよね・・・
原因については[コメントで残した](https://github.com/yu0819ki/flutter-sample-1/pull/3/files#r645987572)んですが、 `Chrome` のデベロッパーツールで確認してみたところ、リソースを参照するパスが違うぞ、と。
![スクリーンショット 2021-06-05 21.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26501/2f61c664-6396-22ec-0f0c-49919caa608e.png)

`Github Pages` では、リポジトリ名をサブディレクトリとして公開されるので、たとえば `https://yu0819ki.github.io/flutter-sample-1/main.dart.js` を参照するのが正解なのに、ドメインの直下を探してしまっています。

これについては `flutter` の `Issue` で取り上げられてる内容をみて「あーなるほど」という感じでした。
https://github.com/flutter/flutter/issues/50580

ここをクリアして、公開したURLが以下になります。Flutterのサンプル置いただけなので「だから何」ではあるんですが、成果物は成果物ということで。。。
https://yu0819ki.github.io/flutter-sample-1/#/



## 参考にさせてもらった記事
https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d

（へーそんなドンピシャで便利な `Action` があるんだー・・・と思ったらご本人の記事でしたｗ）