【Flutter/Dart】Firebase/HostingでWebアプリを外部公開しよう

# 1.はじめに
新たに6つのAndroidStudio&Flutter&Firebase記事を書いている。以下は内容、
- 【Flutter/Dart】Firebaseを使おう
https://qiita.com/my_programming/private/7b3251701183ff59b97c
- 【Flutter/Dart】Firebase Authenticationを使って認証アプリを作ろう
https://qiita.com/my_programming/private/2d81229942bc0d61da6b
- 【Flutter/Dart】Firebase/Firestoreを使ったチャットアプリを作ろう
https://qiita.com/my_programming/private/ad0f7a5f7637a1a37842
- 【Flutter/Dart】Firebase/Firestoreを使ったToDoアプリを作ろう
https://qiita.com/my_programming/private/2da77f3a36bf120761c5
- **【Flutter/Dart】Firebase/HostingでWebアプリを外部公開しよう**
- 【Flutter/Dart】Firebase/Firestoreを使ったBlogアプリを作ろう
https://qiita.com/my_programming/private/6f8515dca825e55d0f07

Flutterで作成したアプリをモバイルだけでなくWebでデプロイ（外部公開）する方法を学ぶ。

# 2.Webアプリを外部公開しよう
認証アプリのために作ったFirebaseのプロジェクトは過去記事で作成したものを流用する。
・Hostingの機能を有効化する。サイドナビの`構築`から`Hosting`を選択した後、`始める`を選択。
<img width="500" alt="step2_1_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/b9dbf718-7d6d-f82d-d30e-7621d01e13c1.png">

・コマンドラインツールをインストールするために、ターミナルで以下を実行。
※windowsでは[こちら](https://qiita.com/jp-96/items/3d06b57758520ff6918f)参考
``` 
curl -sL firebase.tools | bash
```
<img width="500" alt="step2_1_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/bca46823-6e2b-ee8a-7ade-a8604fbbf6a9.png">

・済んだら`次へ`を押す。
<img width="500" alt="step2_1_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/7a87b06b-72a7-bba5-7f5a-4af085e33e15.png">

・コマンドラインツールを使ってプロジェクトの初期設定を行う。`firebase login`をターミナルで実行するとブラウザに認証画面が表示されるので、アカウントを選択しログイン。
<img width="500" alt="step2_1_4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/4629c48f-453c-451c-5024-e10b149d40c3.png">

・ここまできたら、Flutterのプロジェクトを作成し開発できる状態にする。今回は`flutter_hosting`という名前のflutterプロジェクトを作成する。android/iosのチェックを外し、逆にwebのチェックを入れておく。
<img width="300" alt="step2_1_5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/318a004d-c06f-aa69-6290-c242b928e083.png">

・ターミナルで`flutter build web`を実行。build/webフォルダ内にindex.htmlが作成されていることを確認する。
<img width="400" alt="step2_1_6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/aa506cb4-65df-f05f-c3f1-993adb460c7f.png">

・ターミナルのカレントフォルダがflutter_hostingのルートであることを確認したのち、ターミナルで`firebase init`を実行。
```
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
```
と聞かれたら以下を選択。選択肢の移動は上下の矢印キー、選択そのものスペースボタン、決定はエンターキー。
```
 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
```
以下の質問を聞かれたら、
```
? Please select an option: (Use arrow keys)
```
`Use an existing project`を選択。
以下の質問を聞かれたら、
```
? Select a default Firebase project for this directory: (Use arrow keys)
```
現在firebase上で選択しているデータベースのあるプロジェクト名を選択。
その他の設定は以下の通り。
```
? 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
? Set up automatic builds and deploys with GitHub? No
? File build/web/404.html already exists. Overwrite? No
i  Skipping write of build/web/404.html
? File build/web/index.html already exists. Overwrite? No
```
ターミナル画面のスクリーンショットを参考までに以下に示す。
<img width="500" alt="step2_1_7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/ce9e6d41-a1ed-3923-e003-958872afaf71.png">


・ブラウザに戻って、`プロジェクトの初期化`の画面では何もせずに「次へ」を選択。次の`Firebase Hostingへのデプロイ`の画面では何もせずに「コンソールに進む」を選択。

・ターミナルに戻ってから`firebase deploy`を実行。以下が表示されていれば成功。
``` 
=== Deploying to 'my-first-project-98282'...

i  deploying hosting
i  hosting[my-first-project-98282]: beginning deploy...
i  hosting[my-first-project-98282]: found 22 files in build/web
✔  hosting[my-first-project-98282]: file upload complete
i  hosting[my-first-project-98282]: finalizing version...
✔  hosting[my-first-project-98282]: version finalized
i  hosting[my-first-project-98282]: releasing new version...
✔  hosting[my-first-project-98282]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/my-first-project-98282/overview
Hosting URL: https://my-first-project-98282.web.app
```

・`https://my-first-project-98282.web.app`をブラウザに貼り付けてEnterを押すとブラウザにWebアプリが表示される。ここでWebアプリが表示されない場合、flutter build webで作成されたbuild/webを「? What do you want to use as your public directory?」で選択できていないか、「? Configure as a single-page app (rewrite all urls to /index.html)?」で「Y」を選択してindex.htmlの内容を書き換えてしまっていることが原因になっている可能性がある。
<img width="500" alt="step2_1_8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/892339/96059dea-8ff4-3414-453b-45e1350a932b.png">


# 3.まとめ
Webアプリを外部公開する方法を学んだ。