Flutter WebをGitHub Pagesにデプロイする方法

おはこんにちは〜
Flutterでモバイル以外のアプリ開発をしたいと考えているRyo24です。
GitHub Pages初学者の私がFlutter Webで作ったアプリをデプロイする方法をメモとして残しておきます。

Flutter WebでGithub Pagesにデプロイする

ローカルでの作業編

プロジェクトを作成

// プラットフォームをWebに設定し、プロジェクトを作成
flutter create <プロジェクト名> --platforms web
// プロジェクトディレクトリに移動
cd  <プロジェクト名>
// プロジェクトを実行
flutter run

いつもの画面が表示されましたね。今回はこのページをデプロイします。
(flutter runだとローカルホスト上に立っているため、http://localhost:49535/#/になります。)

ビルド

flutter build web 

プラットフォームをWebに指定し、ビルドします。そうすると

.
├── README.md
├── analysis_options.yaml
├── build
│   ├── c075001b96339384a97db4862b8ab8db.cache.dill.track.dill
│   ├── flutter_assets
│   └── web
├── flutter_web.iml
├── lib
│   └── main.dart
├── pubspec.lock
├── pubspec.yaml
├── test
│   └── widget_test.dart
└── web
    ├── favicon.png
    ├── icons
    ├── index.html
    └── manifest.json

buildディレクトリにwebディレクトリが作成されます。この中にWebプラットフォームようにビルドされたアプリが入っています。

baseタグの修正

build -> web -> index.htmlのbaseタグを修正します。

index.html

<!-- before -->
<base href="/">

<!-- after -->
<base href="/<リポジトリ名>/">

baseタグの解説は省きますが、この修正をしないと404 NotFoundになるので注意してください。

push

// docsディレクトリにビルドファイルを移動
mv build/web ../docs

git add .
<以下省略>

pushするときにビルドファイルはrootディレクトリ直下のdocsディレクトリに移動させてからpushしましょう。
GitHub Pagesではrootディレクトリもしくはdocsディレクトリの内容をデプロイするため、プロジェクトファイルとセットのリポジトリで管理するためにはdocsディレクトリにビルドファイルを移動させる必要があります。

以上でローカルでの作業は終了です。

GitHub 上での作業編

GitHub Pagesの設定

プロジェクトを管理しているリポジトリを開きます。

1. SettingsからPagesを選択します。
2. Build and deploymentの内容を変更
   1. SourceをDeploy fron a branchに変更
   2. Branchを作業中のブランチに変更し、/docsを指定
3. Saveをクリック
4. (数分待つ)
5. Visit siteをクリック
6. (無事にアプリが表示されたら成功です)

(GitHub Pagesにホスティングされているため、URLはhttps://<GitHubのユーザー名>.github.io/<リポジトリ名>/#/になっていますね)

最後に

今回はGitHub上のGUIでデプロイ作業をしていましたが、Actionsを使って自動デプロイをする方法もあります。
Actionsの使い方を理解次第、自動デプロイの方法＆解説記事を書いてみたいと思います。