Firebase - Firebase Hostingを使ってデプロイをする
初めに
本記事は、Firebase Hostingを使ってデプロイする方法をまとめます。
Firebase CLIをインストールする
Firebase CLIをインストールします。
下記の方法があります。自分の環境に合わせて選択しましょう。詳細は上のリンク先のドキュメントをご覧ください。
| 方法 | 備考 |
|---|---|
| スタンドアロンバイナリ | Firebase CLI のバイナリをダウンロードして実行する |
| npm | Node,jsをインストールし、npmから npm install -g firebase-tools を実行する |
| 自動インストールスクリプト | macOS または Linux のみ 自動インストールスクリプトで curl -sL https://firebase.tools | bash を実行する |
（npmからインストールする場合）
プロジェクトを初期化する
ローカルプロジェクトファイルを Firebase プロジェクトに接続するには、ローカルプロジェクトディレクトリのルートから次のコマンドを実行します。
- プロジェクトを作成するローカルディレクトリを指定する
cd ディレクトリパス
- Firebaseにログインし、プロジェクトを初期化する
firebase login firebase init hosting
- 初期化のための選択肢を選ぶ
Are you ready to proceed?（続行する準備ができていますか）
→ "y" を入力
First, let's associate this project directory with a Firebase project.（まず、このプロジェクト ディレクトリを Firebase プロジェクトに関連付けます。） You can create multiple project aliases by running firebase use --add,（firebase use --add を実行すると、複数のプロジェクト エイリアスを作成できます。） but for now we'll just set up a default project.（ただし、今のところはデフォルトのプロジェクトを設定するだけです。） ? Please select an option:（Use arrow keys）（矢印キーを使い、オプションを選択してください） Use an exist project（既存のプロジェクトを使う） Create a new project（新しいプロジェクトを作る） Add Firebase to an existing Google Cloud Platform project（Firebase を既存の Google Cloud Platform プロジェクトに追加する） Don't set up a default project（デフォルトのプロジェクトを設定しない）
→ 今回はプロジェクトをすでに作成しているので、"Use an exsit project" を選択する
? Select a default Firebase project for this directory（このディレクトリのデフォルトの Firebase プロジェクトを選択する）
→ FIrebase プロジェクトのリストが表示されるので、そのなかから適切なものを選択
? What do you want to use as your public directory?（public）（パブリックディレクトリとして何を使用しますか?）
→ デフォルトでは、public ディレクトリを指定する。そのままで良ければ Enter。指定する場合は、ディレクトリ名を入力し、Enter。
? Configure as a single-page app (rewrite all urls to /index.html)?（シングルページアプリとして設定しますか (すべての URL を /index.html に書き換えますか)?）
→ 書き換えてよければ "y"、書き換えたくなければ "N" と入力
? Set up automatic builds and deploys with GitHub?（GitHub を使用して自動ビルドとデプロイを設定しますか?）
→ Github を使わなければ "N"
"Firebase initialization complete!" と表示されれば、初期化完了です。
プロジェクトディレクトリは次のようになっています。public フォルダ内には、index.html
が入っています。
デプロイする
- Firebaseプロジェクトのダッシュボードを開く
- プロジェクトの概要画面から、
</>をクリックする
- Firebase SDKを追加する
表示されたJavaScriptのコード（<script type="module">~</script>）を、初期化の際に指定したプロジェクトディレクトリ内の index.html の
