firestoreのサンプル「quickstart-js」を試した(がローカルでの動作確認に失敗した)

TL;DR

実行したコマンドだけ抜粋

# サンプルプロジェクトのダウンロード
git clone https://github.com/firebase/quickstart-js
# firestore チュートリアルのディレクトリへ移動
cd ./quickstart-js/firestore

# Dockerコンテナ起動
docker run --rm -it  -p 5000:5000 -v "$(pwd):/srv" devillex/docker-firebase /bin/bash

# (以下、コンテナ内での操作)
cd /srv
firebase login --no-localhost
firebase use --add
# すべてのファイルをデプロイ
firebase deploy
#(クラウド上にホスティングされたページにアクセス)

概要

firebase環境構築済みのDockerイメージをお借りして、quickstart-jsのfirestoreサンプルを試してみた。

github.com

(ただし、2017年12月時点でFirestoreはまだβ版。でも、内部構造はGoogleのDatastoreとほぼ同じみたいなので私的に期待大)

qiita.com

クラウドへデプロイしてホスティングされたアプリの動作確認はできたが、ローカルのDockerコンテナで実行したアプリの動作確認には失敗した。 そこまでの手順のメモ。(自分用の備忘なのでDocker自体の使い方とかも記述した)

環境とか

  • Windows 10 Pro
  • Docker for Windows Community Edition Version 17.09.1-ce-win42 (14687)
  • Dockerイメージ
    • devillex/docker-firebase:latest (2017/12/20頃)
  • quickstart-js のコミットハッシュ値
    • 149898be49e398b3cbd472e89baec5498d8353d0

詳細な内容とか

使い方は↓のreadme.mdに概ね準拠。ただし、クラウドへデプロイする部分は本記事で追記した内容。

github.com

Firebase クラウドコンソールでプロジェクト作成

Firebaseクラウドコンソール:https://console.firebase.google.com/?hl=ja

  • Firebaseプロジェクトを作成
  • Firebase クラウドコンソールで匿名認証を有効にする
    • Authentication > SIGN-IN METHOD > Anonymous > Enable > SAVE
  • Firebase クラウドコンソールでFirestoreを有効にする
    • Database > TRY FIRESTORE BETA > ENABLE

Dockerコンテナ起動

 2つポートを割り当ててDockerコンテナを起動する。

  • ポート5000:アプリ表示用
  • ポート9005:login時、クラウドコンソールの認証画面からlocalhostへのリダイレクト先
docker run --rm -it  -p 9005:9005 -p 5000:5000 -v "$(pwd):/srv" devillex/docker-firebase /bin/bash

firebaseのクラウドコンソールへログイン

(以降の操作はコンテナ内で行うこと)

cd /srv
firebase login
  • ブラウザでshellに表示されたアドレスへアクセスし、ログインするアカウントを選択
  • 成功すると、以下の画像のような画面へリダイレクトする

f:id:black-skin:20180103183248p:plain

firebase login --no-localhost

firestore機能のみ部分デプロイ

firebase deploy --only firestore

ローカルで実行(失敗する)

firebase serve
# http://localhost:5000 へアクセス
  • こうなる

f:id:black-skin:20180103185039p:plain

クラウドへデプロイ

(firebase serveをCtrl+Cで中断した後)

firebase deploy

f:id:black-skin:20180103184327p:plain

  • 成功すると以下のような画面になる
    • 「Add Mock なんとか」ボタンを押したかも

f:id:black-skin:20180103184017p:plain

その他

firebaseコマンドリファレンス https://firebase.google.com/docs/cli/?hl=ja#deployment