Web や Android アプリから ネット上のサーバーでデータ共有したい。
OS、DB、HTTP通信なら httpdソフトウェア、HTTPS通信ならドメインと証明書・・・等が必要。これらのサーバーサイド機能を Firebase で代替する備忘録。
今回は 手元PCのブラウザだけで Firebase 動作を確認する手順。 クラウド上で提供される [Firebase Functions]、[Google Cloud Shell] を利用。
HTTPSリクエストすると「Hello from Firebase!」と応答するサンプル。
[Google Cloud Shell] は Firebase 管理ツールが含まれる為、PC非依存。
前提
■Google アカウント
https://accounts.google.com
...▼
今回は 手元PCのブラウザだけで Firebase 動作を確認する手順。 クラウド上で提供される [Firebase Functions]、[Google Cloud Shell] を利用。
HTTPSリクエストすると「Hello from Firebase!」と応答するサンプル。
[Google Cloud Shell] は Firebase 管理ツールが含まれる為、PC非依存。
前提
■Google アカウント
https://accounts.google.com
...▼
■Firebase Console
https://console.firebase.google.com/
Firebase コンソールでプロジェクトを新規作成。
▼
プロジェクト名「myProject」など。
▼
動作確認なのでアナリティクスは OFF。
▼
▼
ウェブ(web appli)を作成。
▼
ウェブ名「マイウェブ」など。
Firebase Hosting 設定をチェック。
▼
▼
(Firebase Hosting 設定 チェック時)
▼
(Firebase Hosting 設定 チェック時)
▼
トップメニュー
▼
構築 / Functions
▼
資料:Firebase 料金プラン
▼
要 従量制Blazeプラン。
▼
予算99円など。
▼
初回は 要 クレジットカード登録。
▼
▼
資料:開始方法、Functionsの仕組み
資料:実現できること
▼
▼
▼
▼
■Google Cloud Shell
https://console.cloud.google.com/cloudshelleditor
新規作成したプロジェクト「myProject」になっていない場合
▼
[すべて]でカレントプロジェクト「myProject」へ切替。
▼
トップメニュー
▼
その他のプロダクト
▼
ツール「Cloud Shell Editor エディター」
Cloud Shell Editor
https://console.cloud.google.com/cloudshelleditor
* Linux無料ストレージ5GB
* bash vi Java Python など
* Firebase CLI (Firebaseプロジェクト管理に必要)
etc...
資料:プリインストールされたツールの一覧
資料:Firebase CLI リファレンス
▼
ターミナル
●貼り付け : [Ctrl+v]
●コピー : マウスドラッグ
●終了 : exit かタイムアウト
▼
▼
プロジェクト一覧を問い合わせると ログインしている google アカウントと紐づく。
プロジェクト一覧
▼
プロジェクト別にフォルダを作成し その中での作業がお勧め。
初期化
▼
▼
サンプル
~/functions/index.js
▼
試しにサンプルをそのままデプロイ。初期化(firebase init)で ESLint Yes だとに 定義シンボル未使用チェックに引っかかり停止。 ~/functions/index.js の exports.helloWorld で始まる末尾4行のコメントアウトを外し有効化。
▼
ブラウザ内のエディタか viエディタで ~/functions/index.js を編集
再度 デプロイ。
関数一覧
▼
Firebase Console / functions / ダッシュボード
デプロイした関数が一覧に。
Firebase CLI から 関数を削除する場合
▼
完成。
もし応答が
Cloud Shell リセット手順
1.$ sudo rm -rf $HOME
2.Cloud Shell メニュー [さらに表示] > [再起動]
https://console.firebase.google.com/
Firebase コンソールでプロジェクトを新規作成。
▼
プロジェクト名「myProject」など。
▼
動作確認なのでアナリティクスは OFF。
▼
▼
ウェブ(web appli)を作成。
▼
ウェブ名「マイウェブ」など。
Firebase Hosting 設定をチェック。
▼
▼
(Firebase Hosting 設定 チェック時)
▼
(Firebase Hosting 設定 チェック時)
▼
トップメニュー
▼
構築 / Functions
▼
資料:Firebase 料金プラン
▼
要 従量制Blazeプラン。
▼
予算99円など。
▼
初回は 要 クレジットカード登録。
▼
▼
資料:開始方法、Functionsの仕組み
資料:実現できること
▼
▼
▼
▼
■Google Cloud Shell
https://console.cloud.google.com/cloudshelleditor
新規作成したプロジェクト「myProject」になっていない場合
▼
[すべて]でカレントプロジェクト「myProject」へ切替。
▼
トップメニュー
▼
その他のプロダクト
▼
ツール「Cloud Shell Editor エディター」
Cloud Shell Editor
https://console.cloud.google.com/cloudshelleditor
* Linux無料ストレージ5GB
* bash vi Java Python など
* Firebase CLI (Firebaseプロジェクト管理に必要)
etc...
資料:プリインストールされたツールの一覧
資料:Firebase CLI リファレンス
▼
ターミナル
●貼り付け : [Ctrl+v]
●コピー : マウスドラッグ
●終了 : exit かタイムアウト
▼
$ node -vv18.12.1 (Node)
$ npm -v9.7.2 (Node Package Manager)
$ firebase --version12.4.0 (Firebase CLI)
▼
プロジェクト一覧を問い合わせると ログインしている google アカウントと紐づく。
プロジェクト一覧
$ firebase projects:list
▼
プロジェクト別にフォルダを作成し その中での作業がお勧め。
$ mkdir ~/myProject1 $ cd ~/myProject1
初期化
$ firebase initFunctions を選択
▼
? What language would you like to use to write Cloud Functions?使用言語は JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style?1行文字数制限・インデント位置等の厳密チェック不要なら No
? Do you want to install dependencies with npm now?Firebase関連ライブラリを使う為 Yes
▼
サンプル
~/functions/index.js
▼
試しにサンプルをそのままデプロイ。初期化(firebase init)で ESLint Yes だとに 定義シンボル未使用チェックに引っかかり停止。 ~/functions/index.js の exports.helloWorld で始まる末尾4行のコメントアウトを外し有効化。
▼
ブラウザ内のエディタか viエディタで ~/functions/index.js を編集
$ vi ~/functions/index.js
/** * Import function triggers from their respective submodules: * * const {onCall} = require("firebase-functions/v2/https"); * const {onDocumentWritten} = require("firebase-functions/v2/firestore"); * * See a full list of supported triggers at https://firebase.google.com/docs/functions */ const {onRequest} = require("firebase-functions/v2/https"); const logger = require("firebase-functions/logger"); // Create and deploy your first functions // https://firebase.google.com/docs/functions/get-started exports.helloWorld = onRequest((request, response) => { logger.info("Hello logs!", {structuredData: true}); response.send("Hello from Firebase!"); });▼
再度 デプロイ。
$ firebase deploy --only functionsFunction URL が示される。
関数一覧
$ firebase functions:list
▼
Firebase Console / functions / ダッシュボード
デプロイした関数が一覧に。
Firebase CLI から 関数を削除する場合
$ firebase functions:delete helloWorld
▼
完成。
もし応答が
Error: Forbidden Your client does not have permission to get URL / from this server.だった場合、「Google Cloud Consoleで権限([Cloud Functions Invoker 起動元]を[allUsers]に)を付与する」 情報が多く見つかるが改善しない。 Google Cloud Console の Cloud Functions から 該当関数を削除・再デプロイで改善。
Cloud Shell リセット手順
1.$ sudo rm -rf $HOME
2.Cloud Shell メニュー [さらに表示] > [再起動]