概要

Cloud Storage では、世界中のどこからでも、いつでもデータを保存、取得できます。データの量に制限はありません。ウェブサイト コンテンツの提供、アーカイブと障害復旧のためのデータの保存、直接ダウンロードによるユーザーへの大きなデータ オブジェクトの配布など、Cloud Storage はさまざまなシナリオで活用することができます。

このラボでは、データの保存と取得に Cloud Storage を使用するようにアプリケーションを構成します。使用するアプリケーションはオンライン クイズ アプリケーション、使用するデータはそのフォームデータです。フォームに含める画像をローカルマシンからアップロードします。

目標

このラボでは、次のタスクの実行方法について学びます。

• Cloud Shell を開発環境として設定する
• アプリケーション コードを更新して Cloud Storage と連携させる
• クイズ アプリケーションを使用して画像ファイルを Cloud Storage にアップロードし、その画像をクイズに表示する

設定と要件

各ラボでは、新しい Google Cloud プロジェクトとリソースセットを一定時間無料で利用できます。

1. Qwiklabs にシークレット ウィンドウでログインします。

2. ラボのアクセス時間（例: 1:15:00）に注意し、時間内に完了できるようにしてください。
   一時停止機能はありません。必要な場合はやり直せますが、最初からになります。

3. 準備ができたら、[ラボを開始] をクリックします。

4. ラボの認証情報（ユーザー名とパスワード）をメモしておきます。この情報は、Google Cloud Console にログインする際に使用します。

5. [Google Console を開く] をクリックします。

6. [別のアカウントを使用] をクリックし、このラボの認証情報をコピーしてプロンプトに貼り付けます。
   他の認証情報を使用すると、エラーが発生したり、料金の請求が発生したりします。

7. 利用規約に同意し、再設定用のリソースページをスキップします。

Google Cloud Shell の有効化

Google Cloud Shell は、開発ツールと一緒に読み込まれる仮想マシンです。5 GB の永続ホーム ディレクトリが用意されており、Google Cloud で稼働します。

Google Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。

1. Google Cloud コンソールで、右上のツールバーにある [Cloud Shell をアクティブにする] ボタンをクリックします。

   

2. [続行] をクリックします。

環境がプロビジョニングされ、接続されるまでしばらく待ちます。接続した時点で認証が完了しており、プロジェクトに各自のプロジェクト ID が設定されます。次に例を示します。

gcloud は Google Cloud のコマンドライン ツールです。このツールは、Cloud Shell にプリインストールされており、タブ補完がサポートされています。

• 次のコマンドを使用すると、有効なアカウント名を一覧表示できます。

gcloud auth list

出力:

Credentialed accounts: - @.com (active)

出力例:

Credentialed accounts: - google1623327_student@qwiklabs.net

• 次のコマンドを使用すると、プロジェクト ID を一覧表示できます。

gcloud config list project

出力:

[core] project =

出力例:

[core] project = qwiklabs-gcp-44776a13dea667a6 注: gcloud ドキュメントの全文については、 gcloud CLI の概要ガイド をご覧ください。

タスク 1. クイズ アプリケーションを確認する

このセクションでは、Cloud Shell にアクセスして、クイズ アプリケーションを含む git リポジトリのクローンを作成し、そのクイズ アプリケーションを実行します。

Cloud Shell でソースコードのクローンを作成する

1. クラスのリポジトリのクローンを作成します。

git clone --depth=1 https://github.com/GoogleCloudPlatform/training-data-analyst

2. 作業ディレクトリへのソフトリンクを作成します。

ln -s ~/training-data-analyst/courses/developingapps/v1.3/java/cloudstorage ~/cloudstorage

クイズ アプリケーションを構成し、実行する

1. このラボのサンプル ファイルが含まれているディレクトリに移動します。

   cd ~/cloudstorage/start

2. アプリケーションを構成します。

   . prepare_environment.sh

   このスクリプト ファイルを実行すると、以下の処理が行われます。

   • App Engine アプリケーションを作成する
   • 環境変数 GCLOUD_PROJECT をエクスポートする
   • mvn clean install を実行する
   • Google Cloud Platform のプロジェクト ID を出力する

   アプリケーションの構成が完了すると、次のような出力が表示されます。

   [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 02:49 min [INFO] Finished at: 2021-12-06T14:03:06Z [INFO] ------------------------------------------------------------------------ Project ID: qwiklabs-gcp-03-99b99f8ca859

3. 次のコマンドを実行して、アプリケーションを実行します。

   mvn spring-boot:run

クイズ アプリケーションを確認する

1. [ウェブでプレビュー] アイコン > [ポート 8080 でプレビュー] をクリックして、アプリケーションをプレビューします。

   

   Quite Interesting Quiz が開きます。

   

2. ツールバーの [Create Question] をクリックします。

   シンプルなフォームが表示されます。このフォームには、質問と解答用のテキストボックスと、正解を選択するためのラジオボタンが含まれています。

   このフォームには、ファイル アップロード用の新しい項目があり、画像ファイルや動画ファイルをアップロードすることができます。このラボでは画像ファイルをアップロードしますが、動画ファイルをアップロードする場合のプロセスも同じです。

   

タスク 2. クイズ アプリケーションのコードを調べる

このセクションでは、Cloud Shell テキスト エディタを使用して、クイズ アプリケーションのコードを確認します。

Cloud Shell テキスト エディタを起動する

1. Cloud Shell で [エディタを開く] をクリックして、コードエディタを起動します。

2. エディタの左側にあるファイル ブラウザ パネルを使用して、/cloudstorage/start フォルダに移動します。

Spring Boot ウェブ アプリケーションを確認する

1. .../src/main/resources/templates フォルダにある new_question.html ファイルを選択します。

   このファイルには、[Create Question] フォームの Thyme テンプレートが含まれています。このフォームでは、enctype に multipart/form-data が使用されています。また、画像用と動画用の次の 2 つのフォーム コントロールがあります。

   • image: ファイル アップロード用コントロール
   • imageUrl: 非表示項目

2. .../src/main/java/com/google/training/appdev フォルダを選択します。

   Java のファイルパスは、このフォルダからの相対パスです。

3. .../web/QuestionsController.java を選択します。

   このファイルの POST ハンドラは、画像サービスのメソッドを呼び出します。

4. .../services/gcp/cloudstorage/ImageService.java ファイルを選択します。

   このファイルに、画像ファイルのデータを Cloud Storage に保存するためのコードを記述します。

タスク 3. Cloud Storage バケットを作成する

このセクションでは、Cloud Storage バケットを作成し、それを参照する環境変数をエクスポートします。

Cloud Storage バケットを作成する

1. Cloud Shell に戻り、Ctrl+C キーを押してアプリケーションを停止します。

2. 次のコマンドを実行して、<プロジェクト ID>-media という名前の Cloud Storage バケットを作成します。

   gcloud storage buckets create gs://$DEVSHELL_PROJECT_ID-media 注: バケットを作成するには gcloud storage buckets create コマンドを使用し、このコマンドにバケットの名前として gs://BUCKET_NAME を渡します。 ここでは、接頭辞 $DEVSHELL_PROJECT_ID に -media を付けたバケット名を指定します。

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

   Storage バケットを作成する

3. 次のコマンドを実行して、GCLOUD_BUCKET という名前の環境変数として Cloud Storage バケット名をエクスポートします。

   export GCLOUD_BUCKET=$DEVSHELL_PROJECT_ID-media

このアプリケーションでは、構成に環境変数を利用します。環境変数を使用することで、開発チームはこれらの変数を変更するだけでアプリケーションを開発環境、テスト環境、ステージング環境、本番環境にデプロイできます。

タスク 4. Cloud Storage にオブジェクトを追加する

このセクションでは、アップロードされたファイルを Cloud Storage に保存するためのコードを記述します。

注: // TODO と // END TODO の間にあるコードを更新してください。

学習効果を最大限に高めるために、コード、インライン コメント、関連する API とリファレンスのドキュメントを確認してください。

Java の Cloud Storage パッケージをインポートして使用する

1. コードエディタで .../services/gcp/cloudstorage/ImageService.java ファイルの先頭に移動します。

2. com.google.cloud.storage.* パッケージのワイルドカード インポートを記述します。

   // TODO: Write a start import for Cloud Storage import com.google.cloud.storage.*; // END TODO

3. StorageOptions クラスを使用して、storage という名前の Cloud Storage クライアントを作成します。

   // TODO: Create the storage client // The StorageOptions class has a getDefaultInstance() // static method. // Use the getService() method to get the storage client private static Storage storage = StorageOptions .getDefaultInstance() .getService(); // END TODO

4. bucketName という名前の String を宣言し、Spring の @Value アノテーションを使用して google.storage.bucket というプロパティから値を取得します。

// TODO: Get the name of the Cloud Storage bucket // Use a Spring @Value annotation to get the value // Get the value using ${google.storage.bucket} // This references the GCLOUD_BUCKET environment variable @Value("${google.storage.bucket}") private String bucketName; // END TODO

ImageService.java

package com.google.training.appdev.services.gcp.cloudstorage; // TODO: Write a start import for Cloud Storage import com.google.cloud.storage.*; // END TODO import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Service; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; import java.util.ArrayList; import java.util.Arrays; @Service public class ImageService { // TODO: Create the storage client // The StorageOptions class has a getDefaultInstance() // static method. // Use the getService() method to get the storage client private static Storage storage = StorageOptions .getDefaultInstance() .getService(); // END TODO // TODO: Get the name of the Cloud Storage bucket // Use a Spring @Value annotation to get the value // Get the value using ${google.storage.bucket} // This references the GCLOUD_BUCKET environment variable @Value("${google.storage.bucket}") private String bucketName; // END TODO

Cloud Storage にファイルを送信するコードを記述する

引き続き ImageService.java を更新します。saveImage(MultipartFile file) ハンドラで、Cloud Storage クライアントを使用して、Cloud Storage バケットにファイルをアップロードして公開します。

1. BlobInfo オブジェクトを宣言し、storage クライアント オブジェクトを使用して初期化します。Builder を使用して、BlobInfo オブジェクトをカスタマイズします。オプションを使用してコンテンツ タイプを設定し、未認証の読み取りアクセスを許可する ACL を設定します。

   // TODO: Create a new Cloud Storage object // Use the BlobInfo class to represent this object // Use the BlobInfo.Builder to customize the Blob // Set the content type from the file // Set the object ACL to Public Read BlobInfo blobInfo = storage.create( BlobInfo.newBuilder(bucketName, fileName) .setContentType(file.getContentType()) .setAcl(new ArrayList<>( Arrays.asList(Acl.of(Acl.User.ofAllUsers(), Acl.Role.READER)))) .build(), file.getInputStream()); // END TODO

2. 新しい Cloud Storage オブジェクトの公開 URL を文字列として返します。

   // TODO: Cloud Storage public URLs are in the form: // https://storage.googleapis.com/[BUCKET]/[OBJECT] // Use String concatentation to create return the URL return "https://storage-download.googleapis.com/" + bucketName+ "/" +fileName; // END TODO

ImageService.java

public String saveImage(MultipartFile file) throws IOException { // The existing code in the method creates a unique name // based on the file's original name. It has a // prefix generated using the current date and time. // This should ensure that a new file upload won't // overwrite an existing object in the bucket String fileName = System.nanoTime() + file.getOriginalFilename(); // TODO: Create a new Cloud Storage object // Use the BlobInfo class to represent this object // Use the BlobInfo.Builder to customize the Blob // Set the content type from the file // Set the object ACL to Public Read BlobInfo blobInfo = storage.create( BlobInfo.newBuilder(bucketName, fileName) .setContentType(file.getContentType()) .setAcl(new ArrayList<>( Arrays.asList(Acl.of(Acl.User.ofAllUsers(), Acl.Role.READER)))) .build(), file.getInputStream()); // END TODO // TODO: Cloud Storage public URLs are in the form: // https://storage.googleapis.com/[BUCKET]/[OBJECT] // Use String concatenation to return the URL return "https://storage-download.googleapis.com/" + bucketName + "/" + fileName; // END TODO }

アプリケーションを実行し、Cloud Storage オブジェクトを作成する

1. .../services/gcp/cloudstorage/ImageService.java を保存して、Cloud Shell に戻ります。

2. 次のように入力してアプリケーションを開始します。

   mvn spring-boot:run

3. ここから画像ファイルをローカルマシンにダウンロードします。

4. Cloud Shell で [ウェブでプレビュー] アイコン > [ポート 8080 でプレビュー] をクリックして、クイズ アプリケーションをプレビューします。

5. [Create Question] をクリックします。

6. フォームに以下の値を入力して、[Save] をクリックします。

   項目	値
   Author	自分の名前
   Quiz	Google Cloud Platform
   Title	Which product does this logo relate to?
   Image	先ほどダウンロードした Google_Cloud_Storage_logo.png ファイルをアップロード
   Answer 1	App Engine
   Answer 2	Cloud Storage（[Answer 2] のラジオボタンを選択して、これが正解であることを示します）
   Answer 3	Compute Engine
   Answer 4	Container Engine

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

   Cloud Storage にオブジェクトを追加する

7. Cloud コンソールに戻り、ナビゲーション メニュー > [Cloud Storage] に移動します。

8. [Cloud Storage] > [バケット] ページで、適切なバケット（<プロジェクト ID>-media という名前）をクリックします。

   #UniqueNumber#Google_Cloud_Storage_logo.png という名前の新しいオブジェクトが表示されます。

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

   Datastore エンティティを作成する

クライアント アプリケーションを実行し、Cloud Storage の公開 URL をテストする

1. クイズ アプリケーションの URL の末尾に /api/quizzes/gcp を追加します。

   先ほどこのウェブ アプリケーションに追加した質問に対応する JSON データがクライアントに返されます。

   {"questions":[{"quiz":"gcp","author":"Mary Smith","title":"Which product does this logo relate to?","correctAnswer":2,"imageUrl":"https://storage-download.googleapis.com/qwiklabs-gcp-33f2cf3e36ee1794-media/2293278773582Websites_and_Web_Apps_GCP.png","image":null,"id":5629499534213120,"answer1":"App Engine","answer2":"Cloud Storage","answer3":"Compute Engine","answer4":"Container Engine"}]}

   imageUrl プロパティには、Cloud Storage に作成した新しいオブジェクトに対応する値が設定されています。

2. アプリケーションのホームページに戻り、[Take Test] をクリックします。

3. [GCP] をクリックし、各質問に答えます。

先ほど追加した質問まで進むと、クライアント側ウェブ アプリケーションに画像が表示されます。

ラボを終了する

ラボが完了したら、[ラボを終了] をクリックします。ラボで使用したリソースが Google Cloud Skills Boost から削除され、アカウントの情報も消去されます。

ラボの評価を求めるダイアログが表示されたら、星の数を選択してコメントを入力し、[送信] をクリックします。

星の数は、それぞれ次の評価を表します。

• 星 1 つ = 非常に不満
• 星 2 つ = 不満
• 星 3 つ = どちらともいえない
• 星 4 つ = 満足
• 星 5 つ = 非常に満足

フィードバックを送信しない場合は、ダイアログ ボックスを閉じてください。

フィードバックやご提案の送信、修正が必要な箇所をご報告いただく際は、[サポート] タブをご利用ください。

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