【GCP】Firebase でユーザ認証するサンプルを試す

老体にムチ打ち、ユーザ認証のついでにFirebase を使うサンプルを試してみた。Google Application Engine のサンプルをフォローしてみたのでメモです。
https://cloud.google.com/appengine/docs/standard/python3/building-app?hl=ja

環境はWSL1 (Windows Subsystem Linux)のubuntu18.04 です。

Python3 Standard環境 アプリ構築　のフォロー

先に、サンプル実行のためのお作法のメモ。そのあと、実行時の備忘録。

Google Cloud 関係の用意

アカウントをきちんと切り替えます。

$ gcloud config set account [e-mail]
$ gcloud config configurations list

プロジェクトを用意します。

$ gcloud projects list
$ gcloud projects create [YOUR_PROJECT_ID] --set-as-default
$ gcloud app create --project=[YOUR_PROJECT_ID]
$ gcloud projects describe [YOUR_PROJECT_ID]

ソースコード

git clone する。

使うのは python-docs-samples/appengine/standard_python3/building-an-app/

ローカル環境でのテスト

ローカルで動かすとき

$ python3 -m venv env
$ source env/bin/activate
(env)> pip install  -r requirements.txt

の後で、

$ python3 main.py

普通に動く。deactivate で仮想環境から戻る。

デプロイ

デプロイする。

$ gloucd app deploy

.gcloudignore が無いので作った。先ほどの動作確認のときに作られた./env　以下のファイルが残っていると、全てdeploy のときにローカルのファイルをまとめてアップロードしようとする。ので、手っ取り早く確実な方法として、rm -rf ./env/ で全部消してからgcloud app deploy しました。^^;)

$ gloud app browse

でブラウザで見る。ログも見れる。service 名がdefault なら（app.yaml の設定変えていなければ）

$ gcloud app logs tail -s default

各論

building-an-app-1

普通に動いた。./static/ に script.js があった。flask とrouting はなんとなくわかるが。static に置くのか。app.yaml にこれをアップロードする設定が書いてある。

building-an-app-2

pip install -r reqirements.txt でエラーerror: invalid command 'bdist_wheel'が出た。ので以下で対応したが、結局スキップしたかな。

pip install scrapy 
pip3 install wheel
pip3 install tornado

デプロイは問題なかった。GCP のDatasotre の使い方が分からない。

building-an-app-3

いよいよFirebase を使うときが来た。

Firebase の用意。以下のように言われたが、よくわからない。料金も心配だが、firebase を消すと GCPのプロジェクトも消える、というのがびっくり。

Google Cloud プロジェクトにFirebase を追加する際に注意すべき点

• プロジェクトでの Google Cloud と Firebase の課金は共有されます
  • 詳細：プロジェクトで課金が有効になっているため、Firebase Blaze プラン（従量課金制）が適用され、サイクルごとに Firebase の項目が Cloud の請求に含まれます。
• プロジェクトでのユーザーの役割と権限は共有されます
• 詳細 Firebase プロジェクトを削除すると Google Cloud プロジェクトも削除され、プロジェクトに含まれるすべてのリソースも削除されます。
  この操作は元に戻せません。ただし、多くの Firebase サービスは手動で無効にすることができます。

詳しくは、ログインしてしっかり読むしかないか。とりあえず指示に従った。
https://console.firebase.google.com/

(1) Firebase のプロジェクトの作成

• プロジェクトを作成した（そう何度も行う作業でないだろうが）
• Authentication の SIGN-IN METHOD でメールとパスワード、Gmail を追加した。
• 認証済みドメインで、先にgcloud app browse でテストしたドメイン名を追加した。
  PROJECT_ID. REGION_ID.r.appspot.com PROJECT_ID

(2) アプリの作成

概要で「アプリを追加」でWeb を選択。
アプリの登録で名前を要求されるので、適当に入れたたら、貼り付けようのコードが生成された。

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "691267092448",
    appId: "",
    measurementId: ""
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

タグの下部に貼り付けるようにとのアドバイスがあったので、そうした。がしかし、実際に動かしてブラウザで接続すると、Firebase を初期化せよと怒られる。

URLが登録してあると

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>

とすれば良い、と書いてあるようにも見えたが、動かず。結局、templates/index.html のheader に貼り付けたら動いた。

動作確認では、普通にメールアドレスとパスワードの登録ができた。登録データがどこにあるのかわかっていない。Firebase のプロジェクトのどこかにあるのかな。。。

とりあえず自分メモ

後で知った。よく読むといろいろ書いてあるが、とりあえず

• Firebase 料金。従量制でなく無料枠もある。プロジェクトをGoogle Cloud Platform で拡張できないという制約はある。無料枠で使えるか検討すべし。
• ユーザデータがどこにあるのか確かめる。Google Datastore なのか？
• Firebase でユーザ管理しているとして、それは複数のアプリから利用できるのだと思う。ユーザ認証の部分とWEBのページの部分の切り分けを勉強しないと。。。
• 仮にFirebase でユーザ管理をして、ユーザのデータをCloud Storage に置くとして、どんな構成がいいのかな。あとＤＢも勉強しないとかな。。先は長いぞ、おい。。

まとめ

とりあえずGoogle のtutorial を動かしたときのメモを書いた。しっかり使えるようにして、何かサービスしたいなぁ、と思う、今日この頃でした。
(2021/01/03)