arrow_back

Firebase を使用したサーバーレス アプリの開発: チャレンジラボ

ログイン 参加
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

Firebase を使用したサーバーレス アプリの開発: チャレンジラボ

Lab 1時間 universal_currency_alt クレジット: 5 show_chart 中級
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

GSP344

Google Cloud セルフペース ラボ

概要

チャレンジラボでは、シナリオと一連のタスクが提供されます。手順ガイドに沿って進める形式ではなく、コース内のラボで習得したスキルを駆使して、ご自身でタスクを完了していただきます。タスクが適切に完了したかどうかは、このページに表示される自動スコアリング システムで確認できます。

チャレンジラボは、Google Cloud の新しいコンセプトについて学習するためのものではありません。デフォルト値を変更する、エラー メッセージを読み調査を行ってミスを修正するなど、習得したスキルを応用する能力が求められます。

100% のスコアを達成するには、制限時間内に全タスクを完了する必要があります。

このラボは、「Develop Serverless Apps with Firebase」コースに登録している受講者を対象としています。準備が整ったらチャレンジを開始しましょう。

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの手順をお読みください。ラボの時間は記録されており、一時停止することはできません。[ラボを開始] をクリックするとスタートするタイマーは、Google Cloud のリソースを利用できる時間を示しています。

このハンズオンラボでは、シミュレーションやデモ環境ではなく、実際のクラウド環境を使ってご自身でラボのアクティビティを行うことができます。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

  • 標準的なインターネット ブラウザ(Chrome を推奨)
注: このラボの実行には、シークレット モードまたはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生することを防ぎます。
  • ラボを完了するために十分な時間を確保してください。ラボをいったん開始すると一時停止することはできません。
注: すでに個人の Google Cloud アカウントやプロジェクトをお持ちの場合でも、このラボでは使用しないでください。アカウントへの追加料金が発生する可能性があります。

環境のプロビジョニング

  1. プロジェクトへのリンク:
gcloud config set project $(gcloud projects list --format='value(PROJECT_ID)' --filter='qwiklabs-gcp')
  1. リポジトリのクローン作成:
git clone https://github.com/rosera/pet-theory.git

チャレンジ シナリオ

このラボでは、REST API と Firestore データベースを使用してフロントエンド ソリューションを作成します。Cloud Firestore は Firebase プラットフォームの一部となる NoSQL ドキュメント データベースであり、ここでモバイルやウェブアプリのデータを大規模に格納、同期、クエリできます。ラボの内容は Google Cloud サーバーレス インフラストラクチャを使用して実際のシナリオを解決する作業に基づいています。

次のアーキテクチャを構築します。

アプリケーション アーキテクチャの図

タスク 1. Firestore データベースを作成する

このシナリオでは Google Cloud に Firestore データベースを作成します。以下のアーキテクチャ概要図は、一般的なアーキテクチャの概略を示しています。

Firebase チャレンジラボのアーキテクチャの図

要件:

項目
Cloud Firestore ネイティブ モード
ロケーション

Firestore データベースを作成する

このセクションを正常に完了するには、次のタスクを実装する必要があります。

  • Cloud Firestore データベースを実装する
  • Firestore ネイティブ モードを使用する
  • ロケーション を追加する

[進行状況を確認] をクリックして、上記のタスクを実行したことを確認します。 Firestore データベースを作成する

タスク 2. データベースにデータを入力する

このシナリオではテストデータを使用してデータベースにデータを入力します。

以下のアーキテクチャ概要図は、一般的なアーキテクチャの概略を示しています。

Firebase チャレンジラボのアーキテクチャ

データベースにデータを入力する

Firestore のサンプル スキーマ:

コレクション ドキュメント 項目
data 70234439 [dataset]

Netflix 番組データセットには、以下の情報が含まれています。

項目 説明
show_id: 映画やテレビ番組の一意の ID
type: 識別子 - 映画かテレビ番組か
title: 映画やテレビ番組のタイトル
director: 映画の監督
cast: 映画や番組に出演している俳優
country: 映画や番組が製作された国
date_added: Netflix に追加された日付
release_year: 映画や番組が実際に公開された年
rating: 映画や番組のテレビ レーティング
duration: 全体の期間 - 分単位またはシーズン数

このセクションを正常に完了するには、次のタスクを実装する必要があります。

  1. pet-theory/lab06/firebase-import-csv/solution のサンプルコードを使用する
npm install
  1. ノード pet-theory/lab06/firebase-import-csv/solution/index.js を使用して CSV をインポートする
node index.js netflix_titles_original.csv 注: Firestore UI でデータを参照して、Firestore データベースが更新されたことを検証します。

[進行状況を確認] をクリックして、上記のタスクを実行したことを確認します。 Firestore データベースにデータを入力する

タスク 3. REST API を作成する

このシナリオでは REST API のサンプルを作成します。

以下のアーキテクチャ概要図は、一般的なアーキテクチャの概略を示しています。

Firebase チャレンジラボのアーキテクチャの図

Cloud Run 開発

項目
Container Registry のイメージ rest-api:0.1
Cloud Run サービス
権限 --allow-unauthenticated

このセクションを正常に完了するには、次のタスクを実装する必要があります。

  1. pet-theory/lab06/firebase-rest-api/solution-01 にアクセスする。
  2. コードを構築して Google Container Registry にデプロイする。
  3. イメージを Cloud Run サービスとしてデプロイする。
注: 最大インスタンス数が 1 のサービスをデプロイして、Cloud Run インスタンスの上限を超えないようにします。
  1. Cloud Run に移動し、 をクリックして、サービス URL をコピーする。
  • SERVICE_URL=copy url from your
  • curl -X GET $SERVICE_URL に対して次の応答が返されることを確認する: {"status":"Netflix Dataset! Make a query."}

[進行状況を確認] をクリックして、上記のタスクを実行したことを確認します。 REST API をデプロイしてテストする

タスク 4. Firestore API にアクセスする

このシナリオでは、コードのアップデートされたリビジョンをデプロイして Firestore DB にアクセスします。

以下のアーキテクチャ概要図は、一般的なアーキテクチャの概略を示しています。

Firebase チャレンジラボのアーキテクチャの図

Cloud Run リビジョン 0.2 をデプロイする

項目
Container Registry のイメージ rest-api:0.2
Cloud Run サービス
権限 --allow-unauthenticated

このセクションを正常に完了するには、次のタスクを実装する必要があります。

  1. pet-theory/lab06/firebase-rest-api/solution-02 にアクセスしする。
  2. アップデートされたアプリケーションを構築する。
  3. Cloud Build を使用してイメージ リビジョンにタグ付けし、Container Registry にデプロイする。
  4. 新しいイメージを Cloud Run サービスとしてデプロイする。
注: 最大インスタンス数が 1 のサービスをデプロイして、Cloud Run インスタンスの上限を超えないようにします。
  1. Cloud Run に移動し、 をクリックして、サービス URL をコピーする。
  • SERVICE_URL=copy url from your
  • curl -X GET $SERVICE_URL/2019 への応答として json データセットを取得する

[進行状況を確認] をクリックして、上記のタスクを実行したことを確認します。 REST API をデプロイしてテストする

タスク 5. ステージング フロントエンドをデプロイする

このシナリオではステージング フロントエンドをデプロイします。

以下のアーキテクチャ概要図は、一般的なアーキテクチャの概略を示しています。

Firebase チャレンジラボのアーキテクチャの図

フロントエンドをデプロイする

項目
REST_API_SERVICE REST API サービス URL
Container Registry のイメージ frontend-staging:0.1
Cloud Run サービス

このセクションを正常に完了するには、次のタスクを実装する必要があります。

  1. pet-theory/lab06/firebase-frontend にアクセスする。
  2. フロントエンド ステージング アプリケーションを構築する。
  3. Cloud Build を使用してイメージ リビジョンにタグ付けし、Container Registry にデプロイする。
  4. 新しいイメージを Cloud Run サービスとしてデプロイする。
注: 最大インスタンス数が 1 のサービスをデプロイして、Cloud Run インスタンスの上限を超えないようにします。
  1. REST API と Firestore データベースにフロントエンド アクセスする。
  2. フロントエンド サービス URL にアクセスします。
注: 画面表示エントリを示すためにデモ データセットを使用しています。

Introduction to Serverless ウェブページ

[進行状況を確認] をクリックして、上記のタスクを実行したことを確認します。 ステージング フロントエンドをデプロイする

タスク 6. 本番環境フロンドエンドをデプロイする

このシナリオでは Firestore データベースで使用するステージング フロントエンドを更新します。

以下のアーキテクチャ概要図は、一般的なアーキテクチャの概略を示しています。

Firebase チャレンジラボのアーキテクチャの図

フロントエンドをデプロイする

項目
REST_API_SERVICE REST API サービス URL
Container Registry のイメージ frontend-production:0.1
Cloud Run サービス

このセクションを正常に完了するには、次のタスクを実装する必要があります。

  1. pet-theory/lab06/firebase-frontend/public にアクセスする。
  2. REST API で使用するフロントエンド アプリケーション(app.js)を更新する。
  3. SERVICE_URL に必ず年を追加する。
  4. Cloud Build を使用してイメージ リビジョンにタグ付けし、Container Registry にデプロイする。
  5. 新しいイメージを Cloud Run サービスとしてデプロイする。注: 最大インスタンス数が 1 のサービスをデプロイして、Cloud Run インスタンスの上限を超えないようにします。
  6. REST API と Firestore データベースにフロントエンド アクセスする。

サービスをデプロイしたので、フロントエンド サービスを使用して Firestore データベースのコンテンツを参照できます。

Introduction to Serverless ウェブページ

[進行状況を確認] をクリックして、上記のタスクを実行したことを確認します。 本番環境フロントエンドをデプロイする

お疲れさまでした

これで完了です。このラボでは、Firestore データベースを作成してデータを入力し、REST API を作成し、Firestore データベースや REST API とやり取りするフロントエンド アプリケーションをデプロイしました。また、ステージング環境と本番環境のフロントエンド アプリケーションをデプロイする方法についても学習しました。

「Develop Serverless Apps with Firebase」スキルバッジ

次のスキルバッジを獲得する

このセルフペース ラボは、「Develop Serverless Apps with Firebase」スキルバッジ コースの一部です。このコースを完了すると成果が認められて上のようなバッジが贈られます。獲得したバッジを履歴書やソーシャル プラットフォームに記載し、#GoogleCloudBadge を使用して成果を公表しましょう。

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

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

マニュアルの最終更新日: 2024 年 3 月 22 日

ラボの最終テスト日: 2024 年 2 月 5 日

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