Firebase の Hosting を利用してみる

Firebase の Hosting 機能を試したときのメモ

全体の流れ

1. firebase-tools のセットアップ
2. 設定
3. デプロイ
4. ionic2 プロジェクトの場合

firebase-tools のセットアップ

基本的には Firebase Docにある手順を実施する。

Firebase CLIの追加

$ npm install -g firebase-tools

Firebase にログイン

$ firebase login

ブラウザが立ち上がりログインを指示されるので利用するアカウントでログインする。

下記コマンドでプロジェクト一覧を確認できる

$ firebase list

初期化

プロジェクトフォルダを作成し、初期化する

$ mkdir helloworld
$ cd helloworld
$
$ firebase init

どの機能でセットアップするか求められるので 「Hosting」 を選択

? 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

「新規で作成」を選択する

❯ [create a new project] 

「firebase.json」が作成される

設定

firebase.json を編集

公開ディレクトリの指定(wwwとする)、デプロイ対象外ファイルの指定をする

firebase.json

{
  "hosting": {
    "public": "www",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

index.html を作成

index.html を作成し、「Hello World」を表示するようにする

$ mkdir www
$ vi index.html

デプロイ

作成した html をデプロイする

$ firebase deploy

または

$ firebase deploy --project [Project ID]

デプロイが完了すると Hosting された URL が出力される

=== Deploying to 'xxxxxxxxxx'...

i  deploying hosting
i  hosting: preparing www directory for upload...
✔  hosting: 1 files uploaded successfully

✔  Deploy complete!

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

ブラウザから URL にアクセスすると無事、HelloWorld が出力されました

ionic2 プロジェクトのデプロイ

ionic2 のプロジェクトをデプロイしてみる

index.html の修正

cordova.js の読み込みをコメントアウト

<!-- cordova.js required for cordova apps (remove if not needed) -->
<!-- <script src="cordova.js"></script> -->

ionic2 プロジェクトをビルド

$ ionic build

ビルドの終了後、デプロイすれば反映されました