GSP643

概要

Lily さんは 12 年前、獣医クリニック チェーン「Pet Theory」を開業しました。Pet Theory チェーンはここ数年で急速に拡大しました。古い予約システムでは増加したトラフィックを処理しきれず、クライアントが自分の予約をスケジュールすることもできないため、Lily さんは IT 部門の Patrick さんとコンサルタントの Ruby さんに対して、簡単にスケーリングできるクラウドベースのシステムを構築するよう依頼しました。このラボでは、ユーザーが情報を記録し、予約をリアルタイムでスケジュールできる本格的な Firebase ウェブアプリを構築します。

アーキテクチャ

この図は、使用するサービスの概要と、それらがどのようにつながっているかを示しています。

目標

このラボでは、次の方法について学びます。

• サーバーサイドの認証と認可が自動化されるように Firestore セキュリティ ルールを構成する。
• Google ログインをウェブ アプリに追加する。
• ユーザーが連絡先情報を追加できるようにデータベースを構成する。
• ユーザーによる予約のスケジュールを可能にするコードを確認してデプロイする。
• ウェブアプリで Firebase のリアルタイム更新を確認する。

前提条件

これは中級レベルのラボです。Cloud コンソール環境とシェル環境に精通していることを前提としています。Firebase の使用経験は役立ちますが、必須ではありません。このラボを受講する前に、次のラボを完了しておくことをおすすめします。

• Firestore データベースへデータを読み込む

ファイルの編集にも慣れている必要があります。ご自身で使い慣れたテキスト エディタ（nano、vi など）を使用するか、上部のリボンにある Cloud Shell からコードエディタを起動できます。

準備ができたら下にスクロールし、手順に沿ってラボ環境をセットアップします。

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 さんは次のことを行う必要があることがわかりました。

• Firebase プロジェクトを構成する。
• セキュリティ ポリシーを確立する。
• Firestore CLI を Google Cloud プロジェクトに追加する。

次に、Patrick さんが行うこれらの作業をサポートしていきます。

タスク 1. Firebase アプリケーションを登録する

シークレット ウィンドウを開き、Firebase コンソールの URL（Firebase コンソール）にアクセスします。

プロンプトが表示されたら、次の情報を入力します。

• ユーザー名（）
• パスワード（）

注:
というラベルの Firebase プロジェクトがプロビジョニングされています。このプロジェクトを選択して Firebase プロダクトにアクセスし、このチュートリアルに沿って操作します。

Firebase プロジェクトの概要画面で、次のコマンドを入力します。

1. [アプリに Firebase を追加して利用を始めましょう] の下に並ぶアイコンのリストから、ウェブアイコン（下図でハイライト表示）を選択します。

   

2. [アプリのニックネーム] の入力を求められたら、「Pet Theory」と入力します。

   Pet Theory

3. [このアプリの Firebase Hosting も設定します] の横にあるチェックボックスをオンにします。

4. デプロイのプルダウンをクリックし、[新しいサイトを作成] を選択します。

5. デフォルトを変更して、生徒の接頭辞を含めます。

   student-bucket-{{{ project_0.project_id | "PREFIX" }}}-1 注:
   続行する前に、サイトのプルダウンに student-bucket--1 が含まれていることを確認してください。サイトのドメインは、この設定に基づいて決定します。

6. [アプリを登録] ボタンをクリックします。

7. [次へ] > [次へ] > [コンソールに進む] をクリックします。

   注:
   デフォルトの Firebase サイト ドメインを変更するには、ローカル環境を変更する必要があります。
   具体的には以下を行います。
   1. firebase.json を更新して、カスタム サイト ID を含めます。サイトのデプロイ ターゲットを設定する
   2. firebase deploy --only hosting:student-bucket--1 コマンドを使用する場合は、サイト ID を使用する

これで、Firebase アプリケーションが構成されました。

完了したタスクをテストする

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

Firebase アプリを登録する

タスク 2. Firebase プロダクトを有効にする

Firebase Authentication

Firebase コンソールで Firebase Authentication を設定します。

1. 左側のナビゲーション パネルで [作成] プルダウン ボタンをクリックします。

2. [Authentication] タイルを選択し、[始める] をクリックします。

3. [ログイン方法] タブをクリックしてから Google アイテムをクリックします。

4. 右上隅の [有効にする] 切り替えボタンをクリックし、[プロジェクトのサポートメール] でプルダウン リストからラボアカウントを選択します。

   {{{ user_0.username | "USERNAME" }}}

   ページは以下のようになります。

5. 以上を確認したら、[保存] ボタンをクリックします。

   注:
   Firebase でカスタム ドメインを使用する場合は、[承認済みドメイン] の設定も変更する必要があります。

6. [設定] タブをクリックします。

7. [ドメイン] の見出しで、[承認済みドメイン] メニュー項目をクリックします。

   ページは以下のようになります。

8. [ドメインを追加] ボタンをクリックします。

9. 次のドメインを入力します。

   student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app 注:
   カスタム ドメインを追加すると、Firebase OAuth フローが正しく動作するようになります。

10. [追加] ボタンをクリックします。

完了したタスクをテストする

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

Firebase Authentication を設定する

FirebaseFirestore

Firebase コンソールで Firebase Authentication を設定します。

1. 左側のナビゲーション パネルで [作成] プルダウン ボタンをクリックします。

2. [Firestore Database] タイルを選択し、[データベースを作成] をクリックします。

3. デフォルトの設定をそのまま使用し、[次へ] をクリックします。

4. [作成] をクリックして Cloud Firestore をプロビジョニングします。

5. [ルール] タブをクリックします。

   注:
   認証を使用するように Firestore データベースのセキュリティ ルールを更新します。新しいルールでは、ユーザーが認証されている場合はデータベースに対する読み取り/書き込みを行えます。

6. ルールを次のように更新します。

   rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /customers/{email} { allow read, write: if request.auth.token.email == email; } match /customers/{email}/{document=**} { allow read, write: if request.auth.token.email == email; } } }

これで、カスタム サイト ID を使用して Firebase Authentication と Firestore が設定されました。これでバックエンドの構成が完了しました。

Firebase Localhost

ここまで、ウェブ デベロッパーがコードをデプロイできるように Firebase Hosting 環境をセットアップする Patrick さんの作業をサポートしてきました。

しかし、Patrick さんは Firebase Authentication を有効にしたことも、コードを Firebase にデプロイしたこともないため、メールで Ruby にサポートを求めます...

Patrick さん（IT 管理者）	Ruby さん ヒントをいただきありがとうございます。Firebase 環境はすべて設定できたようです。次のタスクは、ウェブサイト開発者が作成したコードのデプロイですね。 コードのデプロイにはどのような作業が伴うのか、次に何をする必要があるか教えていただけませんか？ Patrick
Ruby さん（コンサルタント）	Patrick さん 環境を設定できたんですね。アプリケーションを実行して、次の機能を追加する方法をメールにてご説明します。 ログインする際のウェブ認証をセットアップする。 顧客の詳細をプロフィール ページに記録できるようにする。 予約用のセルフサービス ポータルを作成する。 Ruby
Patrick さん（DevOps エンジニア）	Ruby さん かなりの作業量になりそうですね。 新しい機能を追加するたびに構造を変更する必要があるということですか？確認するだけでも時間がかかりますが... Patrick
Ruby さん（コンサルタント）	Patrick さん 面倒な作業のほとんどは Firebase ライブラリで行うことができます。 Firebase には、ローカルホストをバックエンドの Firebase プロジェクトに接続するための優れたコマンドライン ツールが用意されています。 firebase init を使用して、使用するプロダクトを Firebase に通知します。 プロジェクトの設定が完了したら、コマンドラインから firebase deploy を呼び出すだけです。 Ruby
Patrick さん（IT 管理者）	Ruby さん それを聞いて安心しました。Firebase Hosting の良いところがだんだんわかってきました。 Patrick

タスク 3. Firebase CLI をインストールする

IDE を使用して Firebase に接続し、アプリケーションをデプロイします。

注:
開発環境には Firebase ツールが事前構成されています。

1. [ラボの詳細] パネルから IDE リンクをコピーします。

   {{{ project_0.startup_script.service_url | "IDE" }}}

2. リンクを新しいシークレット ブラウザタブに貼り付けて、Cloud Code を開きます。

3. アプリケーション メニュー（）> [Terminal] > [New Terminal] をクリックして、ターミナルを開きます。

4. コマンドラインから GitHub リポジトリのクローンを作成します。

   git clone https://github.com/rosera/pet-theory.git

5. 左側のパネルでエクスプローラ アイコンをクリックしてから、[Open Folder] > [pet-theory] > [lab02] をクリックします。[OK] をクリックします。

   注:
   [Do you trust the authors of the files in this folder?]（このフォルダ内のファイルの作成者を信頼しますか？）というポップアップが表示されたら、チェックボックスをオンにして [Yes, I trust the authors]（はい、作成者を信頼します）をクリックします。

6. アプリケーション メニュー（）> [Terminal] > [New Terminal] をクリックして、ターミナルを再度開きます。

7. ノード パッケージを更新します。

   npm i

   出力例:

   added 630 packages, and audited 631 packages in 42s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities npm notice npm notice New minor version of npm available! 10.7.0 -> 10.8.3 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.3 npm notice To update run: npm install -g npm@10.8.3 npm notice npm warn using --force Recommended protections disabled. up to date, audited 631 packages in 2s 69 packages are looking for funding run `npm fund` for details found 0 vulnerabilities

これで、アプリケーションをバックエンドの Firebase プロジェクトにリンクする準備が整いました。

タスク 4. Firebase へのアクセスを承認する

IDE で Firebase を接続し、アプリケーションをデプロイします。

1. 次のコマンドを入力して、Firebase プロジェクトへのアクセスを承認します。

   firebase login --no-localhost 注:
   Firebase は、ローカル環境が Firebase プロジェクトに接続できるように承認しようとします。そのため、適切な認証情報を使用してこの操作を容易にするために、ブラウザ アクティビティがシークレット ウィンドウで実行されていることを確認してください。

2. Firebase にエラー報告情報の収集を許可するかどうかを尋ねられたら「Y」と入力し、Enter キーを押します。

3. 生成された URL をコピーして新しいシークレット ブラウザタブに貼り付け、Enter キーを押します（リンクを直接クリックするとエラーが発生します）。

4. ラボのアカウントを選択し、[許可] をクリックします。

5. [Yes, I just ran this command] をクリックして続行します。

6 [Yes, this is my session ID] をクリックしてセッション ID を確認します。

7. その後、アクセスコードが付与されます。

8. アクセスコードをコピーして Cloud Shell プロンプト [Enter authorization code:] に貼り付け、Enter キーを押します。

次のような出力が返されます。

出力例:

✔ Success! Logged in as student-02-21ab4a7ce0d1@qwiklabs.ne 注:
この時点で、localhost はバックエンドの Firebase プロジェクトにリンクされています。

これで Firebase が接続され、承認されました。次のステップは、使用する Firebase プロダクトを初期化することです。

タスク 5. Firebase プロダクトを初期化する

IDE で、必要なプロダクトを Firebase に通知します。

1. 現在の作業ディレクトリで新しい Firebase プロジェクトを初期化します。

   firebase init 注:
   このコマンドを実行すると、プロジェクト ディレクトリと Firebase プロダクトを設定する手順が表示されます。このフォルダに設定する Firebase CLI 機能を選択するよう求められます。 矢印キーを使用してリスト内を上下移動します。プロダクト オプションを選択するには Space キーを使用します。

2. 次のプロダクトが必要です。

   • Firestore
   • Hosting

3. 矢印キーと Space キーを使用して、[Firestore] と [Hosting] を選択します。シェルで次のように選択されていることを確認して、Enter キーを押します。

   ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default insta ◉ Firestore: Configure security rules and indexes files for Firestore ◯ Functions: Configure a Cloud Functions directory and its files ❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ◯ Hosting: Set up GitHub Action deploys ◯ Storage: Configure a security rules file for Cloud Storage

4. 残りの手順を実行して Firebase を構成します。

   • [Use an existing project] まで矢印キーで移動して、Enter キーを押します。
   • リスト からプロジェクト ID を選択して、Enter キーを押します。
   • Enter キーを押してから「N」と入力して、firestore.rules ファイルを保持します。
   • Enter キーを押してから「N」と入力して、firestore.indexes.json ファイルを保持します。
   • Enter キーを押して public ディレクトリを保持し、次に「N」と入力して /index.html ファイルの書き換えを禁止します。
   • Enter キーを押して、「Set up automatic builds and deploys with GitHub?」と表示されたら N キーを押します。
   • 404.html ファイルの上書きを確認するメッセージが表示されたら、「N」と入力します。
   • index.html ファイルの上書きを確認するメッセージが表示されたら、「N」と入力します。

   出力例:

   ✔ Wrote public/404.html ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebase... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete!

これでローカルの構成が完了しました。

タスク 6. Firebase へのデプロイ

このステップはターミナルで続行します。pet-theory/lab02 フォルダにいることを確認します。

1. firebase.json を編集し、hosting セクションを site に更新します。

   想定される出力

   { ... "hosting": { "site": "student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1", ... } }

2. サイト ID 値を使用して Firebase アプリケーションをデプロイします。次に例を示します。

   firebase deploy --only hosting:student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1

   出力:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://student-bucket-{{{ project_0.project_id| "site" }}}-1.web.app

3. ホスティング URL（.web.app など）をコピーして、新しいシークレット タブで開きます。

   https://student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1.web.app 重要:
   個人の認証情報をこのラボの認証として使用しないでください。アカウント: を使用して Google ログインを行ってください。

4. [Google でログイン] ボタンをクリックします。

   注:
   ブラウザがサポートされていない、またはサードパーティの　Cookie およびデータが無効になっている旨のエラーが表示された場合は、ブラウザで Cookie を有効にしてください。

   

   Chrome の場合は、URL タブの右端にある目のアイコンをクリックし、ポップアップに表示される青いリンクをクリックします。[site not working?] をクリックしてブラウザ設定を更新し、Cookie の使用を許可します。

5. 指定されたユーザー名（）でログインします。次のページが開きます。

   

   Pet Theory のような小さな会社には、これを行うためのリソースや必要なスキルがありません。 この場合、アプリケーション ユーザーが既存の Google アカウント（または他の ID プロバイダ）でログインできるようにすると便利です。

   注:
   パスワードの管理は難しく、会社側のリスクを高める可能性があります。ユーザーも、別のユーザー ID やパスワードを作成することは望みません。
   

これで、ユーザーが Google 認証を使用して予約アプリにアクセスするためのコードがデプロイされました。

タスク 7. ウェブアプリに顧客ページを追加する

ターミナルに戻り、エディタを使用して public フォルダにあるファイルの内容を表示します。

1. public/customer.js ファイルを開き、次のコードをコピーして貼り付けます。

   let user; firebase.auth().onAuthStateChanged(function(newUser) { user = newUser; if (user) { const db = firebase.firestore(); db.collection("customers").doc(user.email).onSnapshot(function(doc) { const cust = doc.data(); if (cust) { document.getElementById('customerName').setAttribute('value', cust.name); document.getElementById('customerPhone').setAttribute('value', cust.phone); } document.getElementById('customerEmail').innerText = user.email; }); } }); document.getElementById('saveProfile').addEventListener('click', function(ev) { const db = firebase.firestore(); var docRef = db.collection('customers').doc(user.email); docRef.set({ name: document.getElementById('customerName').value, email: user.email, phone: document.getElementById('customerPhone').value, }) })

2. public/styles.css ファイルを開き、次のコードを貼り付けます。

   body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; } #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } }

3. ターミナル コマンドラインから次のコマンドを実行します。

   firebase deploy --only hosting:student-bucket-{{{ project_0.project_id | PROJECT_ID }}}-1

   出力:

   ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/project_0.project_id| "PROJECT_ID"/overview Hosting URL: https://student-bucket-{{{ project_0.project_id| "site" }}}-1.web.app

4. アプリのタブに移動し、command+shift+R キー（Mac の場合）または Ctrl+Shift+R キー（Windows の場合）でページのハード再読み込みを行います。通常の更新だけでは、必要な更新内容は表示されません。

   

5. いくつかの顧客情報を入力します。名前と電話番号を入力します。

   顧客名:

   John

   顧客の電話番号:

   98473757454

6. [Save Profile] をクリックします。

7. Firebase コンソールに戻ります。

8. [構築] > [Firestore Database] をクリックして、保存されたプロフィール情報を表示します。

   

9. ウェブアプリのページに戻り、[Appointments] リンクをクリックします。予約コードがまだデプロイされていないため、空白のページが表示されます。

完了したタスクをテストする

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

ウェブアプリに顧客ページを追加する

正しく表示されました。

Firestore では、クライアント（ウェブアプリとネイティブ モバイルアプリ）がリアルタイムで更新されるので、ユーザーが更新または再読み込みを行う必要はありません。

お疲れさまでした

このラボでは、Firebase を使用して堅牢なサーバーレス ウェブ アプリケーションを作成しました。Firebase プロジェクトを作成して構成してから、サーバーサイドの認証と認可を自動化する Firestore セキュリティを追加しました。次に、Google ログインをウェブアプリに追加し、ユーザーが連絡先情報や予約を追加できるようにデータベースを構成しました。最後に、ユーザーによる予約とスケジュールを可能にするコードを確認してデプロイし、ウェブアプリで Firebase のリアルタイムの更新を確認しました。これで、この学習パスの他のラボを受講する準備が整いました。

次のステップと詳細情報

• Google Cloud - サーバーレスとは

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2024 年 10 月 16 日

ラボの最終テスト日: 2024 年 10 月 16 日

Copyright 2024 Google LLC All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。