チェックポイント
Create a Firebase project
/ 25
Register your app
/ 25
Set up authentication and a database
/ 25
Add a customer page to your web app
/ 25
Firebase を使用してサーバーレス ウェブアプリを構築する
- GSP643
- 概要
- 目標
- タスク 1. Firebase 環境のプロビジョニング
- タスク 2. Firebase CLI をインストールする
- タスク 3. Firestore データベースをセットアップする
- タスク 4. Firebase プロジェクトを作成する
- タスク 5. アプリを登録する
- タスク 6. Firebase に対して認証を行いデプロイする
- タスク 7. 認証とデータベースを設定する
- タスク 8. シナリオ: アプリケーションを設定する
- タスク 9. Firestore 認証を構成し、ログインをウェブアプリに追加する
- タスク 10. アプリケーションのデプロイ
- タスク 11. ウェブアプリに顧客ページを追加する
- タスク 12. ユーザーが予約をスケジュールできるようにする
- タスク 13. Firestore のリアルタイム更新を確認する
- まとめ
GSP643
概要
Lily さんは 12 年前、獣医クリニック チェーン「Pet Theory」を開業しました。Pet Theory チェーンはここ数年で急速に拡大しました。古い予約システムでは増加したトラフィックを処理しきれず、クライアントが自分の予約をスケジュールすることもできないため、Lily さんは IT 部門の Patrick さんとコンサルタントの Ruby さんに対して、簡単にスケーリングできるクラウドベースのシステムを構築するよう依頼しました。このラボでは、ユーザーが情報を記録し、予約をリアルタイムでスケジュールできる本格的な Firebase ウェブアプリを構築します。
アーキテクチャ
この図は、使用するサービスの概要と、それらがどのようにつながっているかを示しています。
目標
このラボでは、次の方法について学びます。
- Google Cloud プロジェクトで Firebase API を有効にする。
- Firebase プロジェクトを作成および構成する。
- サーバーサイドの認証と認可が自動化されるように Firestore セキュリティ ルールを構成する。
- Google ログインをウェブ アプリに追加する。
- ユーザーが連絡先情報を追加できるようにデータベースを構成する。
- ユーザーによる予約のスケジュールを可能にするコードを確認してデプロイする。
- ウェブアプリで Firebase のリアルタイム更新を確認する。
前提条件
これは中級レベルのラボです。Cloud コンソール環境とシェル環境に精通していることを前提としています。Firebase の使用経験は役立ちますが、必須ではありません。このラボを受講する前に、次のラボを完了しておくことをおすすめします。
ファイルの編集にも慣れている必要があります。ご自身で使い慣れたテキスト エディタ(nano
、vi
など)を使用するか、上部のリボンにある Cloud Shell からコードエディタを起動できます。
準備ができたら下にスクロールし、手順に沿ってラボ環境をセットアップします。
タスク 1. Firebase 環境のプロビジョニング
Ruby さんは Patrick さんにメールを送りました。
Ruby さん(ソフトウェア コンサルタント) |
Patrick さん 先週はお疲れ様でした。クリニックのデータが Firestore に移行されたことを確認しました。 次のタスクは Firebase を使用して Pet Theory のウェブサイトをホストすることですね。 Ruby |
Patrick さん(IT 管理者) |
Ruby さん Firebase Hosting については聞いたことがありませんが、どのようなメリットがありますか?何から始めればよいですか? Patrick |
Ruby さん(ソフトウェア コンサルタント) |
こんにちは、Patrick さん Firebase Hosting の主なメリットは、サーバーレスであるため、インフラストラクチャを管理しなくてよいことです。セキュリティ ルールもアプリケーション内に埋め込まれるため、権限を絞り込んで、顧客データを処理する際の問題を最小限に抑えることができます。 「従量課金制」料金モデルも用意されているので、Firebase は今回のユースケースに合った包括的なモバイル開発プラットフォームといえます。 Ruby |
Patrick さん(IT 管理者) |
Ruby さん Firebase を使用すると、セキュリティとインフラストラクチャの管理(私の仕事の大部分)がずっと簡単になるように思います。アイドル状態のサーバーには課金されないというのもいいですね。 Patrick |
Ruby さんは Patrick さんに背景情報を電子メールで送信し、重要な作業について検討するための打ち合わせを設定します。この打ち合わせで、Patrick さんは次のことを行う必要があることがわかりました。
- Firestore CLI を Google Cloud プロジェクトに追加する。
- Firestore データベースを作成する。
- Firebase プロジェクトを構成する。
- セキュリティ ポリシーを確立する。
次に、Patrick さんが行うこれらの作業をサポートしていきます。
タスク 2. Firebase CLI をインストールする
-
Cloud Code を開くには、[ラボの詳細] パネルから IDE リンクをコピーして新しいブラウザタブに貼り付けます。
-
ターミナルを開いてコマンドラインにアクセスします。左側のパネルで、アプリケーション メニュー()> [Terminal] > [New Terminal] をクリックします。
-
コマンドラインから GitHub リポジトリのクローンを作成します。
-
左側のパネルでエクスプローラ アイコンをクリックしてから、[Open Folder] > [pet-theory] > [lab02] をクリックします。[OK] をクリックします。
-
ターミナルを開きます。
-
必要なノード パッケージをインストールします。
出力:
これで Firestore データベースを作成する準備が整いました。
タスク 3. Firestore データベースをセットアップする
ターミナルで、Firestore データベースを使用する環境を準備します。
- プロジェクトのリージョンを
に設定します。
-
App Engine
アプリケーションを有効にします。gcloud app create --region={{{project_0.startup_script.app_region|REGION}}} -
Firestore データベースを作成します。
gcloud firestore databases create --region={{{project_0.startup_script.app_region|REGION}}}
これで、Firestore プロジェクトを作成して Google Cloud アカウントにリンクする準備ができました。
タスク 4. Firebase プロジェクトを作成する
シークレット ウィンドウで Firebase コンソールを開きます。
-
ページの右上隅にあるアカウント アイコンをクリックし、このラボ用にプロビジョニングされている Qwiklabs 受講者アカウントであることを確認します。
-
[プロジェクトを追加] をクリックします。プロジェクト名の入力を求められたら、プルダウン メニューにあるプロジェクト ID を使用します。
-
Firebase の利用規約に同意し、[続行] をクリックします。「従量課金制」料金プランを利用することを確認します。
-
[続行] をクリックし、次のページで Firebase プロジェクトの Google アナリティクスを無効にします。
-
次に、[Firebase を追加] をクリックします。新しいプロジェクトが準備できたというプロンプトが表示されたら、[続行] をクリックします。
完了したタスクをテストする
[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。
タスク 5. アプリを登録する
最後のステップを完了すると、Firebase コンソールが表示されます。 このページを閉じた場合は、別のシークレット タブを開いて次の Firebase コンソールへのリンクを使用します。
- [アプリに Firebase を追加して利用を始めましょう] の下に並ぶアイコンのリストから、ウェブアイコン(下図でハイライト表示)を選択します。
-
[アプリのニックネーム] の入力を求められたら、「Pet Theory」と入力します。
-
次に、[このアプリの Firebase Hosting も設定します] の横にあるチェックボックスをオンにします。
-
[アプリを登録] ボタンをクリックします。
-
[次へ] > [次へ] > [コンソールに進む] をクリックします。次のページが表示されます。
これで、プロジェクトの Firebase が構成されました。次に、Firebase Hosting を参照するようにプロジェクトを初期化します。
完了したタスクをテストする
[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。
タスク 6. Firebase に対して認証を行いデプロイする
IDE を使用して Firebase に接続し、アプリケーションをデプロイします。 エディタ内に用意されているターミナルにコマンドを入力します。
- Firebase に対して認証を行います。
-
Firebase にエラー報告情報の収集を許可するかどうかを尋ねられたら「Y」と入力し、Enter キーを押します。
-
生成された URL をコピーして新しいシークレット ブラウザタブに貼り付け、Enter キーを押します(リンクを直接クリックするとエラーが発生します)。
-
ラボアカウントを選択してから [許可] をクリックします。[Yes, I just ran this command] をクリックして続行し、[Yes, this is my session ID] をクリックしてセッション ID を確認します。その後、アクセスコードが付与されます。
-
アクセスコードをコピーして Cloud Shell プロンプト [Enter authorization code:] に貼り付け、Enter キーを押します。次のような出力が返されます。
出力:
- 現在の作業ディレクトリで新しい Firebase プロジェクトを初期化します。
このコマンドを実行すると、プロジェクト ディレクトリと Firebase プロダクトを設定する手順が表示されます。
- このフォルダに設定する Firebase CLI 機能を選択するよう求められます。矢印キーと Space キーを使用して、[Firestore] と [Hosting] を選択します。シェルで次のように選択されていることを確認して、Enter キーを押します。
- 次に、残りの手順を実行して Firebase を構成します。
- [Use an existing project] まで矢印キーで移動して、Enter キーを押します。
- リストから Qwiklabs のプロジェクト ID(「qwiklabs-gcp-」で始まる ID)を選択し、Enter キーを押します。
- Enter キーを押してから「N」と入力して、firestore.rules ファイルを保持します。
- Enter キーを押してから「Y」と入力して、firestore.indexes.json ファイルを保持します。
- Enter キーを押して public ディレクトリを保持し、次に「N」と入力して /index.html ファイルの書き換えを禁止します。
- Enter キーを押して、「Set up automatic builds and deploys with GitHub?」と表示されたら N キーを押します。
- 404.html ファイルの上書きを確認するメッセージが表示されたら、「N」と入力します。
- index.html ファイルの上書きを確認するメッセージが表示されたら、「N」と入力します。
次の出力が表示されます。
これでローカルの構成が完了しました。 サービス間のアクセスを実現するには、データベース認証ステップが必要です。
タスク 7. 認証とデータベースを設定する
このステップを完了するには、Firebase コンソールに戻ります。
-
左側のナビゲーション メニューで [プロジェクトの概要] ボタンをクリックします。
-
[Authentication] タイルを選択し、[始める] をクリックします。
-
[ログイン プロバイダ] をクリックしてから Google アイテムをクリックします。
-
右上隅の [有効にする] 切り替えボタンをクリックし、[プロジェクトのサポートメール] でプルダウン リストからラボアカウントを選択します。ページは以下のようになります。
- 以上を確認したら、[保存] ボタンをクリックします。
これで、Firestore 認証が設定されました。次のステップでは、Firebase でアプリケーションをホストする作業を行います。
完了したタスクをテストする
[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。
タスク 8. シナリオ: アプリケーションを設定する
ここまで、ウェブ開発者がコードをデプロイできるように Firebase Hosting 環境をセットアップする Patrick さんの作業をサポートしてきました。しかし、Patrick さんは Firebase Authentication を有効にしたことも、コードを Firebase にデプロイしたこともないため、メールで Ruby にサポートを求めます...
Patrick さん(IT 管理者) |
Ruby さん ヒントをいただきありがとうございます。Firebase 環境はすべて設定できたようです。次のタスクは、ウェブサイト開発者が作成したコードのデプロイですね。 コードのデプロイにはどのような作業が伴うのか、次に何をする必要があるか教えていただけませんか? Patrick |
Ruby さん(コンサルタント) |
Patrick さん 環境を設定できたんですね。アプリケーションを実行して、次の機能を追加する方法をメールにてご説明します。
Ruby |
Patrick さん(DevOps エンジニア) |
Ruby さん かなりの作業量になりそうですね。 新しい機能を追加するたびに構造を変更する必要があるということですか?確認するだけでも時間がかかりますが... Patrick |
Ruby さん(コンサルタント) |
Patrick さん 面倒な作業のほとんどは Firebase ライブラリで行うことができます。 ブラウザで更新内容を確認するには、コマンドラインから 変更を加える、デプロイする、ウェブサイトで変更を確認する、という流れです。 Ruby |
Patrick さん(IT 管理者) |
Ruby さん それを聞いて安心しました。Firebase Hosting の良いところがだんだんわかってきました。 Patrick |
必要な作業について Patrick さんの理解が深まったところで、あなたは Patrick さんが Pet Theory に Firebase アプリケーションをデプロイすることをサポートします。
タスク 9. Firestore 認証を構成し、ログインをウェブアプリに追加する
このステップはターミナルに戻って行います。 前の手順で Firebase を初期化したときのコマンドライン セッションがまだ開いているはずです。
- 次のコマンドを実行して、
lab02
ディレクトリ内のフォルダとファイルを一覧表示します。
- 次のような出力が表示されることを確認します。
- コードエディタを使って、
pet-theory/lab02/firestore.rules
を開きます。
タスク 10. アプリケーションのデプロイ
すべての変更が行われ、アプリケーションをデプロイするための準備が整いました。pet-theory/lab02 フォルダにいることを確認します。
- 次のコマンドを実行して、Firebase アプリケーションをデプロイします。
出力:
- ホスティング URL(
[プロジェクト ID].web.app
など)をコピーして、新しいタブで開きます。 - [Google でログイン] ボタンをクリックします。
- Google アカウントを選択します。次のページが開きます。
これで、ユーザーが Google 認証を使用して予約アプリにアクセスするためのコードがデプロイされました。
タスク 11. ウェブアプリに顧客ページを追加する
ターミナルに戻り、エディタを使用して public フォルダにあるファイルの内容を表示します。
-
customer.js
ファイルを開き、次のコードをコピーして貼り付けます。
-
styles.css
ファイルを開き、次のコードを貼り付けます。
- コマンドラインで次のコマンドを実行します。
出力:
- アプリのタブに移動し、command+shift+R キー(Mac の場合)または Ctrl+Shift+R キー(Windows の場合)でページのハード再読み込みを行います。通常の更新だけでは、必要な更新内容は表示されません。いくつかの顧客情報を入力します。名前と電話番号を入力し、[Save profile] をクリックします。
- Firebase コンソールに移動して [構築] > [Firestore Database] をクリックし、保存されたプロフィール情報を表示します。
- ウェブアプリのページに戻り、[Appointments] リンクをクリックします。予約コードがまだデプロイされていないため、空白のページが表示されます。
完了したタスクをテストする
[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。
タスク 12. ユーザーが予約をスケジュールできるようにする
次に、ユーザーが予約をスケジュールできるページを作成します。
-
コードエディタのタブに戻ります。
public
ディレクトリの 2 つのファイルにコードを追加します。 -
サイドメニューから appointments.html を選択し、次のコードを貼り付けます。
- appointments.js ファイルを開いて、次のコードを貼り付けます。
- ファイルが作成されたので変更を確認します。Cloud Shell で次のコマンドを実行して、アプリケーションをデプロイします。
出力:
- 以前に空白のページが表示されたウェブアプリのタブを更新します。予約をいくつかスケジュールしてください。
-
次に、Firebase コンソールに移動して [構築] > [Firestore Database] をクリックし、ユーザーの下に作成した
appointments
コレクションを選択します。 -
次のような予約コードのコレクションが表示されます。
タスク 13. Firestore のリアルタイム更新を確認する
Firestore はリアルタイムのデータベースです。 この機能の活用例として、アプリケーションでリアルタイム更新を加えてみます。
-
新しいブラウザタブを開いて [プロジェクト ID].web.app にアクセスした後、Google ボタンを使ってログインして [Appointments] をクリックします。
-
2 つのブラウザタブを並べて配置します。最初のブラウザ ウィンドウで、新しい予約をスケジュールします。
-
次に、他のブラウザタブを確認します。更新しなくても、自動的に追加された予約が表示されます。
正しく表示されました。Firestore では、クライアント(ウェブアプリとネイティブ モバイルアプリ)がリアルタイムで更新されるので、ユーザーが更新または再読み込みを行う必要はありません。
- Firebase コンソールに移動し、Cloud Firestore の [データ] タブをクリックして、データを編集します。ユーザー レコードに含まれる
appointments
コレクションを削除することもできます。どちらのブラウザ ウィンドウもリアルタイムで更新され続けます。
まとめ
このラボでは、Firebase を使用して堅牢なサーバーレス ウェブ アプリケーションを作成しました。Firebase プロジェクトを作成して構成してから、サーバーサイドの認証と認可を自動化する Firestore セキュリティを追加しました。次に、Google ログインをウェブアプリに追加し、ユーザーが連絡先情報や予約を追加できるようにデータベースを構成しました。最後に、ユーザーによる予約とスケジュールを可能にするコードを確認してデプロイし、ウェブアプリで Firebase のリアルタイムの更新を確認しました。これで、この学習パスの他のラボを受講する準備が整いました。
次のステップと詳細情報
- Google Cloud - サーバーレスとは
Google Cloud トレーニングと認定資格
Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。
マニュアルの最終更新日: 2024 年 1 月 30 日
ラボの最終テスト日: 2023 年 1 月 8 日
Copyright 2024 Google LLC All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。