Hosting概要
このページのゴール
- Firebase Hostingの概要と使い方を知る
Firebase Hosting
Hostingとは
Hosting は
Webアプリを配信するための機能を提供するものです ✨
Webアプリを簡単にデプロイし、
素早くWebアプリを公開することができます。
Firebaseプロジェクト作成・設定
Firebase プロジェクト作成
HostingはFirebaseの機能の１つです。
まずは、Firebaseのプロジェクトを作成しHostingが使える状態にしましょう。
| Firebaseコンソールからプロジェクト作成 |  |
| プロジェクト名を入力し続行 |  |
| 続行 |  |
| 地域と利用規約を確認しプロジェクト作成 |  |
| 準備ができたら続行 |  |
| プロジェクトが作成できました 🎉🎉🎉 |  |
Hostingの機能を有効化
プロジェクトが作成できたら、次はHostingの機能を有効化してみましょう。
|
サイドナビの「開発 → Hosting」を選択 「始める」を選択 |
 |
|
コマンドラインツールをインストール インストールが完了したら「次へ」を選択
npm install -g firebase-tools
❗️npmが使えない場合❗️
curl -sL firebase.tools | bash
|
 |
|
コマンドラインツールを使って プロジェクトの初期設定を行います |
 |
|
ログイン用のコマンドを実行すると 認証画面が表示されるので、 アカウントを選択しログイン
firebase login
|
    |
|
作成したプロジェクトのディレクトリに移動し プロジェクト開始用のコマンドを実行
firebase init
ガイドに従って情報を選択・入力していく
|
 |
|
プロジェクトの初期設定が完了したら 「次へ」を選択 |
 |
|
ここでの作業は一旦スキップして 「コンソールに進む」を選択 |
 |
| Hosting機能が使えるようになりました 🎉🎉🎉 |  |
Flutterプロジェクト作成・設定
無事、Hostingを使うための準備はできたでしょうか？
次は、Flutter側の準備も進めていきましょう。
Flutterプロジェクト作成
アプリ起動のページで紹介したのと同じ様に、
Flutterのプロジェクトを作成し開発できる状態にしましょう。
$ flutter create myapp
Webアプリ用セットアップ
Hostingの機能のみを使用する場合は特に設定は必要ありません。
AuthenticataionやCloud Firestoreを使う場合は、
以前紹介した方法で設定を行う必要があるので注意しましょう 👀
HostingでWebアプリを公開してみる
Hostingを使ってWebアプリを公開してみましょう。
Webアプリをビルドする
Hostingにアップロードするためのファイルを生成します。
./build/web/ ディレクトリにファイルが生成されていればOKです。
$ flutter build web
Downloading Web SDK... 1.2s
Running "flutter pub get" in myapp... 0.3s
Compiling lib/main.dart for the Web... 16.8s
$ ls ./build/web/
assets flutter_service_worker.js index.html main.dart.js.map
favicon.png icons main.dart.js manifest.json
Webアプリをアップロードする
次に生成したWebアプリのファイルをHostingにアップロードします。
インストールしたコマンドラインツールを使って行います。
$ firebase deploy
=== Deploying to 'myapp-xxxxx'...
i deploying hosting
i hosting[myapp-xxxxx]: beginning deploy...
i hosting[myapp-xxxxx]: found 13 files in build/web
✔ hosting[myapp-xxxxx]: file upload complete
i hosting[myapp-xxxxx]: finalizing version...
✔ hosting[myapp-xxxxx]: version finalized
i hosting[myapp-xxxxx]: releasing new version...
✔ hosting[myapp-xxxxx]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/myapp-xxxxx/overview
Hosting URL: https://myapp-xxxxx.firebaseapp.com
Webアプリを開く
アップロードした時にWebアプリのURLが表示されていますね。
Hosting URL: https://myapp-xxxxx.firebaseapp.com
そのURLを開くと、Webアプリが公開されてますね 🎉🎉🎉
URLが分からなくなってしまった時は、
Hostingの管理画面から確認しましょう。
まとめ
- HostingはWebアプリを配信するための機能を提供するもの
- Hostingを使う際は事前に設定を行う必要がある
- コマンドラインツールを使い簡単にWebアプリを公開できる
次回は、Hostingを使って以前作ったチャットアプリを
Webアプリとして公開してみましょう 💪💪💪
