fc2ブログ
 
■プロフィール

クリエイトウェーブ

Author:クリエイトウェーブ
開発における、諸々を書いていきたいなと思っています。
mail : info@createwave.jp

■最近の記事
■カテゴリー
■最近のコメント
■月別アーカイブ

■最近のトラックバック
■ブログ内検索

■RSSフィード
■リンク
import firebase from 'firebase' でエラー
訳あって、Vue勉強しはじめたのですが、FireBase認証やってみようと思いました。
VueでFireBase認証やってる人は多いみたいでサンプルとか多いので苦戦はしないだろうと思っていたら、落とし穴が・・・

import firebase from 'firebase'
がうまくいかない。
エラーメッセージでは、
npm install --save firebase
を実行しなさいとか出てるけど、そんな事はとっくにやってるよ〜

海外サイトとか色々見てみましたが、いっこうに解決しそうな気がしない。諦めかけたときに別視点でググって、!と思う情報を発見。

FirebaseのバージョンがV8からV9に上がってるらしく、2021年9月時点では、
npm install --save firebase
ではV9が入るもよう。そしてこれが厄介なのだが
import firebase from 'firebase' では読み込めないように書式が変わってしまっていた。

おいおいおいおい・・・ と思いながら、じゃあどう書くんだと調べたら
import firebase from 'firebase/compat';

でちゃんと動くようになります。
ただこの書き方は、V8で作られてるソースをV9で互換性を高めるための書き方で、V9の書き方はまた別のがあるようです。
とりあえずネットみてもV8のサンプルばかりなので、
import firebase from 'firebase/compat';
でしばらくはいこうと思います。

こういうのが一番疲れる。。。


カテゴリー:FireBase | TM(0) | CM(0)
FireBaseでソーシャルエンジン(ガチャゲー)を作る。どこまでコストを落とせるか
noteに今までのノウハウで
FireBaseでソーシャルエンジン(ガチャゲー)を作る。どこまでコストを落とせるか
を書いてみました。

ブログとNoteを使いわけるか、Noteに移行するか迷ってます。。
まあ、仕事に追われて書けない日も多いのですが、ちょっとした事とかはブログに残しておくと結構後で役に立つ事も多いので、メモ書きとかブログで、ガッツリした内容はnoteがいいのかもしれないですね。

カテゴリー:FireBase | TM(0) | CM(0)
FireStoreバックアップ
FireBaseにおいてFireStoreのバックアップを毎日動くように設定するのですが、すっかりやり方を忘れてる&前と微妙に違う気がするのでメモです。
※FireStoreのバックアップは、無料のSparkプランでは不可なので、従量制のBlazeプランにする必要があります。
もっともNode10 になってFunctionsも従量制のBlazeプランにしないと使えなくなってしまいましたが。。。

FireStoreの毎日の定期バックアップを行うには、GCPコンソールで、バックアップ用のバケットを制作し、そこに書き込む権限をもったサービスアカウントを作成します。
そしてFunctionsにバックアップのプログラムを書き、GCPコンソールにある「Cloud Scheduler」で毎日の定刻にそのFunctionsプログラムを叩くのです。

ただ実際にやってみると色々思考錯誤します。
まずは、GCPコンソールにいき、サービスアカウントを作ります。
GCPコンソールには、ブラウザで直接GCPコンソールに行っても良いですがFireBaseのコンソール画面の場合はプロジェクト概要の右にある設定ボタンを押し表示された中から「プロジェクトを設定」を選びます。

backup1.png

「サービスアカウント」を選択すると、表示されたページの右上に「サービス アカウント権限の管理」というリンクがあるので、そのリンク先に飛びましょう。
backUp2.png


GCPコンソールの「IAMと管理」の画面になってると思いますが
左側に並んでるメニューから「サービスアカウント」を選択し「+サービスアカウントを作成」を選択します。
IAM.png


アカウント名は「backup」としました。
サービスアカウント2


次にロールを割り当てます。
Cloud Datastore インポート / エクスポート管理者
Storage オブジェクト管理者
の2つを割り当てます。
サービスアカウント3

サービスアカウントが出来上がって一覧に表示されたら、作ったサービスアカウントの右側の「・」が縦に3つ並んでるボタンを押して鍵を作成を選びます。
鍵を作成

鍵は、P12形式かJson形式か選べますが、Json形式を選んでください。
鍵が作られ、ダウンロードされますので、ダウンロードされた鍵は、firebaseプロジェクトのfunctionsフォルダに格納します。

念の為IAM画面に行って、
Cloud Datastore インポート / エクスポート管理者
Storage オブジェクト管理者
の2つがついているのを確認します。

サービスアカウント4


次は、バックアップ保存先のバケットを作成します。
GCPコンソール左上の「ナビゲーションメニュー」を押します。

ナビゲーションメニュー

表示されたメニュー群から「ストレージ」を選択し、その中の「Storage」を選んだ中から「ブラウザ」を選びます。
ストレージメニュー

画面上部の「バケットを作成」を選びます。
バケット作成

バケットの名前は、
FirebaseのプロジェクトID-firestore-backup
としました。

ロケーションは、FireBaseのFireStoreで使ってるリージョンと同じにしなければなりません。
FireStoreを設定するときにリージョンを設定しますが、だいたいの場合は「asia-northeast1(東京)」を選択してる方が多いと思いますが、その場合はロケーションタイプは
「Resion」 にして 「asia-northeast1(東京)」か
「Multi-region」で「asia」を選ぶかになるようです。
ここを間違えると、バックアップは失敗します。私は 「Resion」 にして 「asia-northeast1(東京)」にしました。
ストレージクラスは、「Standard」にしました。
詳細設定は、省略で大丈夫です。
バケット作成2

Functionのプログラム(Node10)を準備します。

基本は上記ので動くと思いますが、10行目のJsonは、サービスアカウントで作成したfunctionフォルダに入れたjsonファイルを指定します。

38行目は、先程バケット作成したバケットを指定します。
FirebaseのプロジェクトID-firestore-backup で名前をつけたのであれば、そのままで大丈夫なハズ。
Functionをデプロイします。
デプロイ

次は、「Cloud Scheduler」です。
ストレージのバケットを作った時と同じ要領で「ナビゲーションメニュー」の中から「ツール」から「Cloud Scheduler」を選びます。
CloudScheduler.png

画面上部のジョブを作成を選びます。
ジョブを作成

ジョブの作成で名前をつけます。
任意の名前でいいと思いますが、「firestore-backup」としました。
CloudSchedulerPre.png

諸々せていしたのがこれ。
CloudSchedulerAfter.png

設定できたら、右側にある「今すぐ実行」ボタンを押して、実行されるかみてみます。
job2.png

成功と出ても、プログラムの実行が成功しただけでバックアップが成功してるか判らないので、ストレージのバケットを見て成功してるか確認しましょう。
backUp.png

後はバックアップの保管期限を決めます。画面上部のライフサイクルボタンを押します。
自分はバックアップは30日もあれば十分かなと思っているので設定します。
「オブジェクトを削除する」を選びます。
ライフサイクル

年齢を30日に設定して作成します。
年齢って最初わからなかったですが、、まあ言われてみれば年齢30日ですね。たしかに・・
ライフサイクル2

これでおわりです。

カテゴリー:FireBase | TM(0) | CM(0)
Functionsのログがおかしい
Firebaseの管理画面でサーバーログが見れてデバッグしやすいので、FireBaseのサーバープログラム(Functions)は、そこも気に入ってるのですが・・・

ここ最近サーバープログラム(FunctonsのNodeJS)が吐き出すログがおかしいなと思ってました。
console.logで吐き出されるサーバーログは物凄く見にくい・・・なんじゃ!こりゃ!
いったいどうしたんだと

そしたら、FunctionsがNode8からNode10になったせいらしい。
ログマニュアル

Node10からは、Console.logじゃなくlogger.logというものを使うそうです。

しかし、そうはいっても直すのも大変だぁ・・
このままConsole.logつかえないのかと思っていたら
require("firebase-functions/lib/logging/compat");

を追加すれば、console.logも今まで通り使えるよ! と書いてあるではないですか!!
よし! と思ってFunctionsに追加・・・

結果エラー・・・ モジュールがないからnpm installしてねとか出てきます。
どういうこっちゃと悩んでnode_modulesのパスをみたら

require('firebase-functions/lib/logger/compat');
が正解でした。
logging(誤り)
logger(正解)

実行してみます。
おぉ! 今までと同じ見やすいサーバーログになりました。

ありがちですが、公式マニュアルが間違ってるのは、毎度悩まされます。
人が作業してるのでしょうから仕方ない面もあると思いますが、はよ直して!!


カテゴリー:FireBase | TM(0) | CM(0)
MacでFireBaseデプロイにハマった
いつもは、Windowsで作業してるのですが、仕事場の環境をMacに切り替えました。

Macをメイン機にしたのは何年ぶりだろうか・・・
OS8とか9の頃(Winでいえば98とかMeの頃)は、仕事機はMacがメインでした。
あの頃は、Adobeとかマクロメディアとか、Macじゃないと仕事にならなかった。

で、Fierbaseのデプロイにハマった。
npmやFirebase tools とかのインストールまではうまくいったのですがデプロイがうまくいかない・・・

~/functions/node_modules/.bin/eslint: Permission denied
とかでる。

Permissionなので、権限かえればいいんだよね? とPermission関係いろいろいじったのに効果出ず・・・

結局 ESLint をインストールしてないのが原因だった。

$ npm install -g eslint
で解決・・・・

疲れた。。。 Macはこういうのが疲れる・・・・
でもMacに慣れてきた・・・ 慣れるとMacなかなかいいです。

カテゴリー:FireBase | TM(0) | CM(0)
次のページ