LoginSignup
7

More than 5 years have passed since last update.

お手軽Firebase Codelab を Google Cloud Shell で試す時のメリット・落とし穴と解決策

Posted at

https://codelabs.developers.google.com/codelabs/firebase-web/
今回のネタはこちら

Firebaseはお手軽で素晴らしいんだけど,買収先であるGoogle Cloud Platformとの連携がまだ不十分な部分もある(現在急速に強化中.parse.comのように潰されることもなさそうな印象)
Google Cloud Shell(ブラウザ上で手軽に叩けるコマンドライン)で上記コードラボを試すと,そのままではつまづく場所がいくつかあったのでメモ
(まぁ連携云々ほどの話でもないし,Cloud Shellを理解しているなら問題ない内容)

メリット

環境構築不要
ログインも不要かも?
 初期状態でどうかは確認しそこねた

落とし穴と解決策

#4 firebase login

そのまま実行すると,指示されたURLをブラウザで開いてauthした後にlocalhostに誘導されて死ぬ
firebase login --no-localhost
と入力すること

#5 firebase serve

デフォルトのポート5000はファイアウォールで塞がれている(多分)
firebase serve -p 8080
と入力し,Cloud Shell左上の一番左のアイコン > ポート上でプレビュー 8080 を選択

#6- firebase serve再び

(Cloud Shellに限った話ではない)
scripts/main.jsをいじる時に
cd scripts
とかしていると,あとで
firebase serve
した時にブラウザでCannot GET /とだけ出て死ぬ
カレントがweb-startディレクトリであることを確認すること
どこのディレクトリであっても↓のように言ってくるので,ぱっと見ややこしい

stdout
Starting Firebase development server...

Project Directory: /home/<project_no_namae>/friendlychat/web-start
Public Directory: ./

Server listening at: http://localhost:8080

#6 Authリダイレクトドメイン

このページを最後まで進めると,Authを試した時に一瞬窓が開くがすぐ閉じて使えない
Cloud Shellの提供するURL8080-dot-XXXXXXX-dot-devshell.appspot.comが登録されていないのが問題
Firebaseのウェブコンソール > Authentication > ログイン方法 > OAuthリダイレクトドメイン から登録する

#11 database-rules.json

(Cloud Shellに限った話ではない)
全部書き換えよう
よく見ると3行目にも追加されてる
つまりちゃんと読め

 

一部飛ばしたので,まだあるかもしれない
他にもつまづいたかたいたら報告お願いします
あるいはわかりづらかったら言ってください
 
 
 

ついでに補足

#4firebase use --add内でalias設定がある
プロジェクトを簡単に切り替えられるようになるステキ機能
(でも開発・本番環境をプロジェクトで分ける場合,Realtime DatabaseとかStorageとかは一工夫要る)
(参考:FirebaseをStaging環境とかDebug環境とかRelease環境で切り替えをする(Webアプリ編)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7