Vue3 + TypeScript プロジェクト から Firestore に接続する サンプル

Vue3 + TypeScript プロジェクト で Firebase の リアルタイム DB である Firestore に アクセス して データ を取得する サンプル を紹介します。 本記事では、事前に Firestore に格納しておいた データ を Vue アプリケーション で表示してみようと思います。 なお、 今回は例として、開発環境で実装していきます。 vue: 3.2.33 firebase: 9.6.11 firebase-admin: 10.1.0 準備 Firestore に作成済みの データ Firestore には 以下のようなデータを作成してあります。 この データ を Vue プロジェクト で読み出して 画面に表示する アプリケーション を作っていきます。 プロジェクト作成 (Vue3 + TypeScript) まずは、Vue3 + Typescript でプロジェクトを作成します。 Vue3 プロジェクト に Firebase SDK を インストール 以下の コマンド で Firebase SDK を インストール していきます。 Firebase 接続設定情報 を Vite 環境変数に登録 Firebase に接続するためには API Key などの接続設定情報が必要になります。 これらの取得方法については 公式サイト を参照してください。この 接続設定情報 を Firebase SDK に渡すことで、Vue プロジェクト から Firebase に アクセス することができるようになります。 このように Firebase への アクセス は簡単に実現できるのですが、 逆に言うと、これらの接続設定情報 を悪用されてしまうと、第三者が簡単にあなたの課金設定済みアカウントを用いることもできてしまいます。そういった事態を避けるためにも、 Firebase 接続設定情報 は git に登録しないことが望ましいケースが多いと思います。 ここでは … Read more

Google Cloud Functions (Python) から Cloud Firestore の データを 読み出す – Cloud SDK を使う方法 と Firebase Admin SDK を使う方法 –

Cloud Firestore を Python で作成した Cloud Functions から利用するには 活用する SDK 別に以下の2つがあります。 Cloud SDK を使う方法 Firebase Admin SDK を使う方法 両者に特に メリット / デメリット があるわけではなさそうですが、少し紛らわしい部分もありますので、 簡単なサンプルコード を用いて整理していきたいと思います。 前提 本記事は以下を前提としてすすめていきます。 Cloud SDK インストール 済み Firebase Admin SDK インストール 済み Cloud Firestore データベース作成 済み これらについては、以下の記事も参考にしてください。 Cloud Firestore の内容を Read する データ 登録済みの Cloud Firestore のデータを Python で作成した Cloud Functions で読み出してみます。 Read する Cloud Firestore データ の内容 今回読み出してみる Firestore のデータを GCP Console からみてみます。名前 フィールド のみを持つ シンプル な データ 構造となっています。 ちなみに Firebase Console からみてみても、同じ データ を確認することができます。 ベース となる 関数の準備 次に、 ベース となる 最小構成の Python 関数を作成していきます。 この関数を以下の コマンド で Functions Framework を用いて ローカル 環境で実行してみます。 http://localhost:5000 にアクセスしてみると、以下の結果が表示されます。 Python Client for Google Cloud Firestore の インストール Cloud SDK を用いる方法を進める前に … Read more

Google Secret Manager に 辞書型データを格納し、Cloud Functions から アクセスする方法

こちらの記事 で Google Secret Manager に パスワード や API キー といった 「他者に知られたくない」あるいは 「公開したくない」 情報を格納する方法を紹介しました。 今回はより実践的な管理方法として 辞書型 の データ を Secret に登録して Python で 作成した Cloud Functions 関数 で 意図通り 辞書型 として扱う方法について紹介していきます。  前提 本記事を読みすすめるにあたっては、以下を実施済みであることが前提となっています。 Python 開発環境の設定 サービスアカウント作成済み Secret Manager API の有効化 Secret Manager への アクセス ロール 付与済み これらが未実施の場合は 以下の 関連記事 を参照してください。 Secret の作成 それでは早速 辞書型の データ を Secret Manager に登録していきます。本記事では 以下のような 構造をもつ Dict 型 の データ を登録してみます。 以下の リンク を クリック して GCP コンソール から Secret Manager を表示し、「 シークレットを作成 」を クリック します。 https://console.cloud.google.com/security/secret-manager シークレット の詳細として 以下を設定します。 名前: 任意の名称(ここでは、 my-dict-secret ) シークレットの値: 上述した 辞書型 の データ 他の項目は デフォルト のままで 「シークレット を作成」 をクリックし、 Secret の作成を完了させます。 Secret 作成後 Secret の値を確認してみます。 特に フォーマット が変換されることもなく、そのままの テキスト … Read more

Google Secret Manager で パスワードや API キー などの秘匿情報を管理し Cloud Funcitons から参照する方法

ソフトウェアデベロッパー にとって、 パスワード、 APIキー、 認証情報 といった秘匿情報の管理は頭を悩ませる問題の一つといえます。 開発環境と本番環境では別の情報を用いる必要があることが殆どだと思いますし、 このような秘匿情報を誤って公開 Repository にコミットしてしまうと、 様々な被害を被る危険性があります。 一方で、秘匿情報をローカルで管理すると、 紛失のリスクや、バージョン管理面での不都合などが生じてしまいます。 その問題に対処すべく Google Cloud では Secret Manager を使うことで、 秘匿情報を安全に管理する方法を提供しています。 本記事では、 Secret Manager に サンプルの API キー を格納し、 Python で作成した Cloud Functions から参照する方法を紹介します。 引用元: https://cloud.google.com/secret-manager/ 本記事の概要 本記事では以下を実施していきます。 シークレット バージョン の作成 Python で作成した Cloud Functions 関数から 事前に作成した シークレット バージョン の値を取得 なお、“シークレット バージョン” という呼称は、個人的に少し馴染みが無いため以下のように捉えています。 「パスワードなどの秘匿情報 = (Secret) をバージョン管理したもの」 前提 なお本記事を読みすすめるにあたっては、以下を実施済みであることが前提となっています。 Python 開発環境の設定 サービスアカウント作成済み 参考記事: Secret Manager を利用するための準備 Secret Manager API の有効化 まずは、 Secret Manager API を有効化します。この API を有効化することで、後述する Secret Manager を使って シークレット バージョン を管理することができるようになります。 GCP コンソール から以下のように遷移し有効にしていきます。 既存 サービスアカウント への Secret Manager への アクセスロール 付与 次に、Secret Manager にアクセスできるようにしていきます。最初に Secret Manager 関連のロールにどのようなものがあるのかを確認していきます。 Secret Manager 関連ロール Secret Manager 関連ロールには以下が用意されています。今回は、作成済みの シークレット に Cloud Functions … Read more

[ Vue 3 ] Vue CLI を GCP App Engine に デプロイ する手順

Vue CLI (Vue3) で作成した サンプルアプリケーションを GCP App Engine に デプロイ する手順をまとめてみました。なお、こちらの記事 でまとめている通り、ライブラリの追加など、細かなカスタマイズが必要な場合は 同じ GCP であれば Cloud Run を用いる必要があります。 環境 npm: 7.23.0 node: v14.17.0 vue: @vue/cli 4.5.12 前提 GCP プロジェクト作成済み GCP プロジェクトの課金設定済み Google Cloud SDK (gcloud コマンド ) 導入済み ローカル 側準備 Vue CLI プロジェクト の準備 まずは、任意のディレクトリに Vue CLI プロジェクト を作成していきます。 今回は vue3-cli という名称で プロジェクト を作成して進めていきます。 起動確認していきます。 おなじみのトップ画面が表示され、Vue CLI プロジェクトが作成されたことが確認できます。 app.yaml の準備 App Engine のデプロイには Vue CLI プロジェクト の トップディレクトリ に app.yaml ファイルを配置する必要があります。 app.yaml ファイルがない場合、 デプロイ 時に以下のような エラー が出力されてしまいます。 Vue CLI 用 app.yaml 以下の内容を app.yaml として、Vue CLI のトップディレクトリに配置してください。 この app.yaml ですが、 今回は ローカルの環境にあわせ nodejs14 としていますが、そのまま 推奨されている nodejs16 としても サンプルアプリに関しては動作するようでした。 Google App Engine 側準備 GCP への ログイン 最初に 対象となる GCP プロジェクトを選択していきます。 gcloud auth … Read more

[ GCP / Firebase ] Web アプリ デプロイ 先 サービス 比較 Cloud Functions for Firebase, Cloud Functions, Cloud Run and App Engine

Cloud 上に Web アプリ、Web サービス を デプロイ する際に、 AWS, Azure, GCP といった各種 クラウドサービス が選択肢に挙がってきます。今回はその中でも、 Google が提供している 以下のサービス について 比較 しながら 整理 していきます。 Firebase / Cloud Functions for Firebase GCP / Cloud Functions GCP / Cloud Run GCP / App Engine Google が提供するサービスには 「いわゆる Google Cloud Platform (GCP) 」だけでなく「 モバイル 向けのソリューションでもある Firebase 」 も含まれています。 Firebase は別会社で開発されていたサービスを Google が買収して自社サービスに取り入れた経緯もあることから、少し GCP と Firebase の棲み分けが分かりづらい部分もあります。今回は、 GCP, Firebase の差分を整理しつつ、それぞれの サービスの違い などを見ていきます。 GCP, Firebase の関係 Firebase now integrates with various other Google services, including Google Cloud Platform, AdMob, and Google Ads to offer broader products and scale for developers. https://en.wikipedia.org/wiki/Firebase GCP と Firebase の関係ですが、公式ドキュメントなどを眺めていてもどうも腑に落ちる表現をしているものが少ないと感じてしまいます。個人的には「 Google が提供する Cloud Platform には 2つあり、 1つは モバイルアプリ開発に特化した Firebase であり、もう1つは汎用的な Google Cloud … Read more

[ Vue3 ] Vue CLI から Firestore データベースにアクセスする方法 と サンプルアプリ

Vue3 として作成した Vue CLI プロジェクトにおいて、 Firestore データベースに接続する方法を、簡単なサンプルアプリの実装を通じて紹介していきます。 macOS: Big Sur 11.4 Firebase SDK: 9.0.1 node: v14.17.0 npm: 7.19.1 作成するサンプルアプリ 今回は 「 Firestore に手動で登録された複数のデータ(名前の一覧)を、 Vue.js の コンポーネントに読み込み、そのまま表示する」というサンプルアプリを作成していきいます。 Firestore 準備 Firestore データベースの作成 Firestore データベースは こちらの記事 の内容で作成します。 Firebase, GCP 双方からアクセス可能なデータベースとして作成していますが、 Firebase からアクセスできれば本記事で紹介するサンプルアプリは動作すると思います。 Firestore データベース ルールの設定 Firestore データベースを作成した際に忘れずに実施しておく必要があるのが データベースルールの設定 です。以下の URL をクリックして、 Firestore コンソール を開き、 対象のプロジェクトを選択します。 https://console.firebase.google.com/ メニュー から 「 Firestore Database 」をクリックし、表示されたタブから 「 ルール 」 をクリックして、ルールを表示させます。 初期状態のルールは以下の様になっているかと思いますが、これは、「このデータベースに対して read も write も許可しない」という内容になっています。 今回は、 read だけできればよいサンプルアプリを作っていきますので、「 read であれば、特に制限なくすべて許可する設定」としていきます。 このあたりは、以下の参考サイトにより詳しい説明がありましたので、必要な方は参考にしてみてください。 参考:Qiita:Firestore Security Rules の書き方と守るべき原則 なお、ルールを初期状態のままにしておくと、以下のようなエラーが出力され、データを取得することができません。 Vue CLI プロジェクト 準備 Firestore 側の準備ができたところで、 Web アプリ側である Vue CLI プロジェクトを作成していきます。 Vue CLI プロジェクト作成 今回は、適当なディレクトリに “vue3-cli” という名前でプロジェクトを Vue 3 Preview として作成していきます。 Firebase SDK のインストール Vue CLI プロジェクト作成に引き続き、 Firebase を利用可能にすべく、 Firebase SDK をインストールしていきます。Firebase … Read more

[ GCP / Firebase ] GCP からも Firebase からも利用可能な Firestore データベース の 作成方法

Google が提供する NoSQL クラウド データベース である Firestore をWeb アプリや モバイルアプリで利用可能な状態の 作成方法 を紹介します。Firestore は GCP プロジェクトとして利用する方法、 Firebase プロジェクトとして利用する方法がありますが、今回は GCP / Firebase 両方のプロジェクトでデータを共有するようなデータベースの 作成方法 を紹介していきます。 Cloud Firestore は、Firebase と Google Cloud からのモバイル、ウェブ、サーバー開発に対応した、柔軟でスケーラブルなデータベースです。 https://firebase.google.com/docs/firestore Firestore は 以下のような 作成方法 があります。 Firebase プロジェクトとして作成し、 Firebase で利用する方法 GCP プロジェクトとして作成し、 GCP で利用する方法 GCP プロジェクトとして作成し、 GCP, Firebase 双方で利用する方法 Firebase で利用することで、モバイルアプリとの連携が容易になり、 GCP で利用することで、 機械学習などの各種 Google Cloud プロダクトとの統合が可能になります。 今回は、その両方を可能にする3番目の 作成方法 を紹介します。 関連記事: 作業の流れ 作業の流れは大まかに以下の 2 ステップになります。 GCP 側作業:接続先となる Firestore データベースの作成 Firebase 側作業:GCP プロジェクトとの紐付け GCP で Firestore データベースを作成 最初に、接続先となる Firestore を作成していきます。以下の URL をクリックして、 Cloud Console を開きます。 https://console.cloud.google.com/firestore/ 今回は “sample-for-blog” という名称の GCP プロジェクトを用いて進めていきます。 Firestore の作成 ( モード選択 ) Firestore を作成するにあたって、モードを選択する必要があります。 注意書きがあるように、ここでの選択は後で変更できないため、注意深く選択することが重要です。 ざっくりいってしまうと、モバイルアプリからのアクセスをする可能性がある場合は「ネイティブモード」を選択する、という感じでしょうか。逆に、App Engine で Python 2.7 や PHP 5.5 といった 少し古い環境 で用いる場合は「 Datastore … Read more

[GCP Cloud Functions Tutorial] First Python(関数の作成、デプロイ、テスト、関数の削除)

GCP の サーバーレスコンピューティング サービス の一つである、 Cloud Functions について、 Python で作成した プログラム を動作させるための チュートリアル 、最初の関数: Python (First Python) について解説していきます。 別途解説した、Python クイックスタートが GCP 上ですべて完結していたのに対し、最初の関数: Python は ローカル で開発、テストしたものを GCP に デプロイ するという、より実践的な内容となっています。 事前準備1、事前準備2が完了していることが前提となりますので、そちらがまだの場合は是非先にご参照ください。 Cloud SDK を使用した GCP プロジェクトの作成 ここでは、以下を実施します。 GCP プロジェクト の作成は事前準備1を参照してください。 GCP プロジェクト の作成 Cloud SDK の インストール Cloud SDK の インストール チュートリアル の通りに、 gcloud コマンドを用いてインストール します。 既に インストール 済みの場合でも、以下のように更新を見つけることができますので、更新したほうがよさそうです。 なお、更新前の バージョン に戻したい場合は、以下の コマンド で戻すことができるようです。 関数の作成 それでは、ローカル 環境に関数を作成していきます。今回は first-python ディレクトリ を作成し、その中で作業していきます。 作成した helloworld ディレクトリ 内に main.py という名称で、 チュートリアル に掲載されている ソースコード を作成します。 依存関係の指定 python の実行に必要な ライブラリ 依存関係 を pip で管理するために、 requirements.txt を作成します。こちらも、 チュートリアル に掲載されている内容 のままで作成していきます。 以上で最小構成となる Cloud Funtions 用の python 関数 の作成が完了となります。 関数のデプロイ 作成した 関数 を GCP Cloud Functions に デプロイ していきます。 … Read more

[GCP Cloud Functions Tutorial] Python クイックスタート(関数の作成、デプロイ、テスト、関数の削除)

GCP のサーバーレスコンピューティングサービスである、 Cloud Functions について、 Python で動作させるためのチュートリアル、Python クイックスタートについて解説していきます。 事前準備1、事前準備2が完了していることが前提となりますので、そちらがまだの場合は是非先にご参照ください。なお、各見出しに対応するチュートリアルページへのリンクを設定しています。 関数を作成する GCP コンソール左上のハンバーガーメニューを下にスクロールしていくと、「サーバーレス」セクションの中に「Cloud Functions」がありますので、これをクリックして、 Cloud Functions を作成していきます。 余談ですが、ピンアイコンをクリックすることで、そのサービスがリストの上に固定表示されるようになります。GCP のサービスは数も多いので、よく使うサービスの場合はピン留めしておくと便利です。 「関数を作成」をクリックします。 次に、関数の基本情報を設定します。チュートリアルに記載されている内容に従って必要な項目を埋めていきます。チュートリアル上の手順6番までを実施することになります。 「リージョン」に関しては、後から変更できないため、適切なものを検討した上で選択してください。 なお「ランタイム、ビルド、接続の設定」はこのタイミングでは特に変更する必要はありません。「保存」をクリックした後、画面の一番下に出現する「次へ」ボタンをクリックして関数のコードを記載する画面を表示します。 ここでは、チュートリアルの残りの手順(7、8)を実施していきます。 手順が前後してしまいますが、まずは「ランタイム」プルダウンから使用したいランタイムを選択します。ここでは、Python 3.9 を選択して進めていきます。 ランタイム選択前はデフォルトの Node.js 14 に関するコードが表示されていましたが、Python 3.9 選択後は Python 3.9 のものに更新されます。 サンプルコードの内容 チュートリアルでは触れられていませんが、ここで簡単にサンプルコードの内容を見ていきます。 main.py Cloud Functions の関数は基本的に Web の API として動作することを想定していて、デフォルトで用意されているものはFlaskフレームワークを用いています。このチュートリアルでは ここで定義した hello_world というエンドポイントをデプロイすることになり、API 呼出し時の情報は request 変数に格納されることになります。 最初に、 request_json 変数に、呼出し時の情報を JSON化します。 次に、API呼出し情報にパラメータがあり、そのパラメータ名が message なら、そのmessageパラメータに指定された内容をそのまま呼出し元に返すようにしています。 同様に、JSON化した際に、message が存在した場合にも同様の処理を施すようにしています。前者がGETによるクエリパラメータへの対応で、後者がJSON形式でのPOSTへの対応となっています。(後ほど、それぞれテスト動作させてみます) API呼出し情報に message パラメータが存在しない場合は、Hello World! を返します。 requirements.txt 初期段階では本ファイルはコメント行があるのみの状態です。 関数をデプロイする デプロイするには画面下部の「デプロイ」をクリックします。 デプロイには1〜2分ほどかかります。デプロイが完了すると、以下の様にリスト表示されます。それでは、デプロイした関数をテストして動作をみていきます。「操作」列の3点リーダーをクリックして、「関数をテスト」をクリックします。 関数をテストする テスト画面が表示されます。まずは、そのまま、「関数をテストする」をクリックしてみます。これは、パラメータなしで関数を呼び出すことになりますので、さきほどコードを見たとおり、 Hello World! が返ってくることが期待値になります。 テストが完了すると、「出力」と「実行ログ」が表示されます。期待値通り、 Hello World! と表示されていることが確認できます。 JSON形式POST 次に、JSON形式のPOSTをした場合の動作をテストしてみます。message パラメータに指定された内容がそのまま返ってくることが期待値になります。 こちらも期待どおりの動作が確認できます。 エンドポイントへのGET確認 チュートリアルには言及がありませんが、ブラウザでエンドポイントにアクセスして動作を確認してみます。 関数一覧から、関数名をクリックして「関数の詳細」を表示します。 「トリガー」タブを選択すると、エンドポイントのURLが記載されていますので、これをコピーしてブラウザに貼りつます。 パラメータ指定がないため、 期待値の Hello World! が表示されました。 パラメータを指定してみます。こちらも期待通りの結果となりました。 ログを表示する テスト実施時のログを確認してみます。関数一覧のページの操作列、「ログを表示」をクリックします。 各種ログが表示されます。赤枠で囲った「クエリ」部分に、プロジェクトやCloud Functions といった情報であらかじめフィルタリングされた状態でログが表示されています。 関数を削除する 最後に、チュートリアルには言及がありませんが、関数を削除します。チュートリアルということもあり、未認証でもアクセスできてしまう状態で進めていますので、忘れない内に削除しておかないと、何かがきっかけで想定外の請求が来てしまいかねないリスクは回避したいところです。Cloud Functions では、有効・無効を切り替えるようなことはできないようなので、削除することにします。 関数一覧のページの、操作列「削除」をクリックします。 「削除」をクリックします。削除してしまうと関数内のコードは失われてしまうので、必要に応じて手元にコピーするなどバックアップ対策を講じてください。 なお、一時的に無効化する Tips としては、単純にコード全体をコメントアウトするのが現実解のようです。 参考: https://stackoverflow.com/questions/43681644/is-there-a-way-to-stop-disable-a-google-cloud-function まとめ … Read more