Firebase Hosting 入門

事前準備 †

• Firebase にログイン（Google アカウント要）
• HTML / CSS 準備

プロジェクト作成 †

• "プロジェクトを追加" をクリック
• プロジェクト名: MyFirstFirebaseProject
• 国 / 地域: 日本
• "プロジェクトを作成" をクリック
• ローカルに作業用フォルダ "MyFirstFirebaseProject" を作成
• "MyFirstFirebaseProject" フォルダ配下に "public" フォルダを作成し公開するコンテンツ（html / css / img / etc.）を移動

Node.js インストール †

• Node.js Official Site より macOS (x64) 用の推奨版 (LTS) をダウンロード
• インストーラーを利用して node.js をインストール
• node.js バージョン確認

$ node -v
v8.11.3

• npm バージョン確認

$ npm -v
5.6.0

• ターミナルの画面クリア: Ctrl + l

Firebase CLI (firebase-tools) インストール †

• Firebase CLI バージョン確認

$ firebase -V
3.19.3

• Firebase CLI ログイン

$ firebase login

• ブラウザが起動するので Google アカウントを指定して "許可" をクリック

✔  Success! Logged in as example@gmail.com

プロジェクトの初期設定 †

• ローカルの作業用フォルダへ移動

$ cd Desktop/MyFirstFirebaseProject

• Firebase 初期化

$ firebase init

• 利用するサービスにカーソルを移動して Space キーを選択し Return キーをクリック

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

• Firebase プロジェクトを選択
• 公開するフォルダを選択

? What do you want to use as your public directory? public

• SPA として公開するかどうか選択

? Configure as a single-page app (rewrite all urls to /index.html)? No

• index.html を上書きするかどうか選択

? File public/index.html already exists. Overwrite? No

• Firebase 初期化完了

✔  Firebase initialization complete!

サイト公開 †

• フォルダ構造（firease.json, public/404.html は自動生成）

|--.firebaserc
|--firebase.json
|--public
|  |--404.html
|  |--index.html
|  |--style.css

• Firebase 上にデプロイ

$ firebase deploy

=== Deploying to 'myfirststyledpageproject'...

i  deploying hosting
i  hosting: preparing public directory for upload..
✔  hosting: 3 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/myfirstfirebaseproject/overview
Hosting URL: https://myfirstfirebaseproject.firebaseapp.com

• URL を確認
• エラーページを確認（存在しない URI を指定）

サイト更新 †

• html / css を修正後に firebase を再デプロイ

$ firebase deploy

• Firebase console (Web console) でデプロイ履歴や過去バージョンへのロールバックも可能

別のサイトを作成 †

• 1サイトにつき1プロジェクト作成する必要があるため新規サイトを作成する際は新規プロジェクト作成が必要
• デフォルトではプロジェクト作成数の上限が存在するため必要に応じて上限解除のリクエストを送信する必要あり

プロジェクト削除 †

• FIrebase console >> Project Overview >> プロジェクトの削除