arrow_back

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

ログイン 参加
700 以上のラボとコースにアクセス

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

ラボ 1時間 universal_currency_alt クレジット: 5 show_chart 中級
info このラボでは、学習をサポートする AI ツールが組み込まれている場合があります。
700 以上のラボとコースにアクセス

GSP344

Google Cloud セルフペース ラボのロゴ

概要

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

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

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

このラボは、「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 サービス netflix-dataset-service
権限 --allow-unauthenticated

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

  1. pet-theory/lab06/firebase-rest-api/solution-01 にアクセスする。
  2. コードを構築して Google Container Registry にデプロイする。
  3. イメージを Cloud Run サービスとしてデプロイする。
注: 最大インスタンス数が 1 のサービスをデプロイして、Cloud Run インスタンスの上限を超えないようにします。
  1. Cloud Run に移動し、netflix-dataset-service をクリックして、サービス URL をコピーします。
  • SERVICE_URL=copy url from your netflix-dataset-service
  • 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 サービス netflix-dataset-service
権限 --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 に移動し、netflix-dataset-service をクリックして、サービス URL をコピーします。
  • SERVICE_URL=copy url from your netflix-dataset-service
  • 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 サービス frontend-staging-service

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

  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 サービス frontend-production-service

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

  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 とやり取りするフロントエンド アプリケーションをデプロイしました。また、ステージング環境と本番環境のフロントエンド アプリケーションをデプロイする方法についても学習しました。

「Firebase を使用したサーバーレス アプリの開発」スキルバッジ

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

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

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

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

マニュアルの最終更新日: 2024 年 5 月 2 日

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

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

始める前に

  1. ラボでは、Google Cloud プロジェクトとリソースを一定の時間利用します
  2. ラボには時間制限があり、一時停止機能はありません。ラボを終了した場合は、最初からやり直す必要があります。
  3. 画面左上の [ラボを開始] をクリックして開始します

シークレット ブラウジングを使用する

  1. ラボで使用するユーザー名パスワードをコピーします
  2. プライベート モードで [コンソールを開く] をクリックします

コンソールにログインする

    ラボの認証情報を使用して
  1. ログインします。他の認証情報を使用すると、エラーが発生したり、料金が発生したりする可能性があります。
  2. 利用規約に同意し、再設定用のリソースページをスキップします
  3. ラボを終了する場合や最初からやり直す場合を除き、[ラボを終了] はクリックしないでください。クリックすると、作業内容がクリアされ、プロジェクトが削除されます

このコンテンツは現在ご利用いただけません

利用可能になりましたら、メールでお知らせいたします

ありがとうございます。

利用可能になりましたら、メールでご連絡いたします

1 回に 1 つのラボ

既存のラボをすべて終了して、このラボを開始することを確認してください

シークレット ブラウジングを使用してラボを実行する

このラボの実行には、シークレット モードまたはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウントの競合を防ぎ、個人アカウントに追加料金が発生することを防ぎます。