事前準備 †
- Firebase にログイン(Google アカウント要)
- HTML / CSS 準備
プロジェクト作成 †
- "プロジェクトを追加" をクリック
- プロジェクト名: MyFirstFirebaseProject
- 国 / 地域: 日本
- "プロジェクトを作成" をクリック
- ローカルに作業用フォルダ "MyFirstFirebaseProject" を作成
- "MyFirstFirebaseProject" フォルダ配下に "public" フォルダを作成し公開するコンテンツ(html / css / img / etc.)を移動
Node.js インストール †
$ node -v
v8.11.3
$ npm -v
5.6.0
Firebase CLI (firebase-tools) インストール †
$ firebase -V
3.19.3
$ firebase login
- ブラウザが起動するので Google アカウントを指定して "許可" をクリック
✔ Success! Logged in as example@gmail.com
プロジェクトの初期設定 †
$ cd Desktop/MyFirstFirebaseProject
$ 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
? Configure as a single-page app (rewrite all urls to /index.html)? No
? File public/index.html already exists. Overwrite? No
✔ Firebase initialization complete!
サイト公開 †
- フォルダ構造(firease.json, public/404.html は自動生成)
|--.firebaserc
|--firebase.json
|--public
| |--404.html
| |--index.html
| |--style.css
$ 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 >> プロジェクトの削除