flutter1.9以降でwebアプリを作ってfirebase hostingにdeployしよう

はじめに

※最初の記述だと「flutter clean」でfirebase.jsonなどが消えるため、改訂しました。
flutter1.9からwebアプリ作成機能が本体統合（Web support for Flutter）になり、別リポジトリーだった時とはちょっとやり口が変わりました。なるべく簡潔に記載したいと思います。
unix系の人は読み替えに慣れていると思うので、windows向けで記述します。
またflutterやfirebaseコマンド導入済みが前提です。

webアプリの作成

webアプリの作成を有効にするコマンドがあります。

flutter config --enable-web

実行すると、プロジェクト作成時にandroidやiosに加えてwebというフォルダーが生成されるようになります。

D:\git>flutter create proj_qiita
Creating project proj_qiita... androidx: true
（略）
Running "flutter pub get" in proj_qiita...                          6.7s
Wrote 69 files.

All done!
[√] Flutter: is fully installed. (Channel dev, v1.10.6, on Microsoft Windows [Version 10.0.17134.950], locale
    ja-JP)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 28.0.3)
[√] Chrome - develop for the web: is fully installed.
[√] Android Studio: is fully installed. (version 3.5)
[√] IntelliJ IDEA Community Edition: is fully installed. (version 2018.2)
[√] IntelliJ IDEA Community Edition: is fully installed. (version 2019.2)
[√] VS Code, 64-bit edition: is fully installed. (version 1.38.1)
[√] Connected device: is fully installed. (2 available)

In order to run your application, type:

  $ cd proj_qiita
  $ flutter run

Your application code is in proj_qiita\lib\main.dart.

D:\git>

できあがったプロジェクトに入ります。

D:\git>cd proj_qiita

D:\git\proj_qiita>

ではこのままwebアプリをビルドしちゃいましょう。

D:\git\proj_qiita>flutter build web
Compiling lib\main.dart for the Web...                             56.3s

D:\git\proj_qiita>

出来ました。
出来上がると.dart_toolというフォルダーとbuildというフォルダーが仕上がります。
さらにbuildの中にはwebというフォルダーがプロジェクト直下のwebとは別に仕上がります。

D:\git\proj_qiita>dir build\web /w
 ドライブ D のボリューム ラベルは ボリューム です
 ボリューム シリアル番号は 8865-827E です

 D:\git\proj_qiita\build\web のディレクトリ

[.]                [..]               [assets]           index.html         main.dart.js
main.dart.js.map               3 個のファイル　　　（ノイズ除去）バイト
               3 個のディレクトリ　（ノイズ除去）バイトの空き領域

D:\git\proj_qiita>

このbuild\webをdeployできればいいんです。

hosting準備

firebaseにアカウントがあり、かつfirebase login済みであるとして記述します。
D:\git\proj_qiita\buildをカレントディレクトリーとしてfirebase initします。

D:\git\proj_qiita>firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  D:\git\proj_qiita

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter
 to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Create a new project
i  If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
 proj-qiita
? What would you like to call your project? (defaults to your project ID)
√ Creating Google Cloud Platform project
√ Adding Firebase resources to Google Cloud Platform project

=== Your Firebase project is ready! ===

Project information:
   - Project ID: proj-qiita
   - Project Name: proj-qiita

Firebase console is available at
https://console.firebase.google.com/project/proj-qiita/overview
i  Using project proj-qiita (proj-qiita)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build\web
? Configure as a single-page app (rewrite all urls to /index.html)? No
+  Wrote web/404.html
? File web/index.html already exists. Overwrite? No
i  Skipping write of web/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

+  Firebase initialization complete!

D:\git\proj_qiita>

flutterプロジェクト名のproj_qiitaとfirebaseプロジェクト名のproj-qiitaの差分は、利用できる記号の制限によるものです。
ミススペリングではないというか、意味なくはないです。

? What do you want to use as your public directory? build\web

でbuild\webと回答することで、D:\git\proj_qiita\build\webの内容がhostingにミラーリングされます。
以降、index.htmlが上書きされないように操作します。

最後にdeployします。

D:\git\proj_qiita>firebase deploy

=== Deploying to 'proj-qiita'...

i  deploying hosting
i  hosting[proj-qiita]: beginning deploy...
i  hosting[proj-qiita]: found 9 files in web
+  hosting[proj-qiita]: file upload complete
i  hosting[proj-qiita]: finalizing version...
+  hosting[proj-qiita]: version finalized
i  hosting[proj-qiita]: releasing new version...
+  hosting[proj-qiita]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/proj-qiita/overview
Hosting URL: https://proj-qiita.firebaseapp.com

D:\git\proj_qiita>

正常終了したと思います。

deployされたサイトを開く

では、https://proj-qiita.firebaseapp.comを開いてみましょう。

最小手順ではこんなに簡単にできました。

付記

hosting以外を利用する場合でもbuildフォルダー内にfirebaseプロジェクトを作成して運用すればいいように思います。
難読化などはリリースビルドにすれば勝手にやってくれるようです（未検証）。

appendix:
Preparing a web app for release