概要

このラボでは、Cloud Storage バケットを作成して画像を配置します。また、Compute Engine で実行されているアプリケーションを、Cloud SQL で管理されるデータベースを使用するように構成します。このラボでは、PHP を使用してウェブサーバーを構成します。PHP は一般的なブログ ソフトウェアの基礎となるウェブ開発環境です。ラボ外では、類似の手法を使用してこれらのパッケージを構成します。

また、Cloud Storage バケット内の画像を参照するようにウェブサーバーを構成します。

目標

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

• Cloud Storage バケットを作成して画像を配置する。
• Cloud SQL インスタンスを作成して構成する。
• ウェブサーバーから Cloud SQL インスタンスに接続する。
• ウェブページで Cloud Storage バケット内の画像を使用する。

タスク 1. Google Cloud コンソールにログインする

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

1. [ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるポップアップでお支払い方法を選択してください。 左側の [ラボの詳細] パネルには、以下が表示されます。

   • [Google Cloud コンソールを開く] ボタン
   • 残り時間
   • このラボで使用する必要がある一時的な認証情報
   • このラボを行うために必要なその他の情報（ある場合）

2. [Google Cloud コンソールを開く] をクリックします（Chrome ブラウザを使用している場合は、右クリックして [シークレット ウィンドウで開く] を選択します）。

   ラボでリソースが起動し、別のタブで [ログイン] ページが表示されます。

   ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

   注: [アカウントの選択] ダイアログが表示されたら、[別のアカウントを使用] をクリックします。

3. 必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。

   {{{user_0.username | "Username"}}}

   [ラボの詳細] パネルでもユーザー名を確認できます。

4. [次へ] をクリックします。

5. 以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。

   {{{user_0.password | "Password"}}}

   [ラボの詳細] パネルでもパスワードを確認できます。

6. [次へ] をクリックします。

   重要: ラボで提供された認証情報を使用する必要があります。Google Cloud アカウントの認証情報は使用しないでください。 注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。

7. その後次のように進みます。

   • 利用規約に同意してください。
   • 一時的なアカウントなので、復元オプションや 2 要素認証プロセスは設定しないでください。
   • 無料トライアルには登録しないでください。

その後、このタブで Google Cloud コンソールが開きます。

注: Google Cloud のプロダクトやサービスのリストを含むメニューを表示するには、左上のナビゲーション メニューをクリックします。

タスク 2. ウェブサーバーの VM インスタンスをデプロイする

1. Google Cloud コンソールのナビゲーション メニュー（）で、[Compute Engine] > [VM インスタンス] をクリックします。

2. [インスタンスを作成] をクリックします。

3. [インスタンスの作成] ページで、[名前] に「bloghost」と入力します。

4. [リージョン] と [ゾーン] は Qwiklabs によって割り当てられたものを選択します。

5. [マシンタイプ] は、デフォルトのままにします。

6. [ブートディスク] で、表示されるイメージが「Debian GNU/Linux 12」でない場合は、[変更] をクリックして、[Debian GNU/Linux 11（bullseye）] を選択します。

7. [ID と API へのアクセス] のデフォルト設定は変更せずにそのままにします。

8. [ファイアウォール] で、[HTTP トラフィックを許可する] をオンにします。

9. [詳細オプション] をクリックし、ダイアログのセクションを開きます。

10. [管理] をクリックし、ダイアログのセクションを開きます。

11. [自動化] セクションまで下にスクロールし、[起動スクリプト] の値として次のスクリプトを入力します。

apt-get update apt-get install apache2 php php-mysql -y service apache2 restart 注: このスクリプトは必ず [起動スクリプト] フィールドの値として入力してください。誤って別の項目に入力すると、VM インスタンスの起動時に実行されません。

12. 残りの設定はデフォルトのままにして、[作成] をクリックします。

注: インスタンスが起動して完全に使用可能になるには、約 2 分かかります。

13. このラボで後ほど使用するために、[VM インスタンス] ページの bloghost VM インスタンスの内部 IP アドレスと外部 IP アドレスをテキスト エディタにコピーします。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 ウェブサーバーの VM インスタンスをデプロイする

タスク 3. gcloud storage コマンドラインを使用して Cloud Storage バケットを作成する

すべての Cloud Storage バケット名は、グローバルに一意である必要があります。バケット名が必ず一意になるように、ここでの手順ではバケットに Google Cloud プロジェクト ID と同じ名前を付けるよう指示されます。この ID もグローバルに一意です。

Cloud Storage バケットは、リージョンかマルチリージョンのロケーション（US、EU、ASIA）のいずれかに関連付けることができます。このアクティビティでは、Qwiklabs またはインストラクターによって割り当てられたリージョンとゾーンに最も近いマルチリージョンにバケットを関連付けます。

1. Google Cloud コンソールの右上のツールバーにある [Cloud Shell をアクティブにする] をクリックします。ダイアログ ボックスが表示されたら [続行] をクリックします。

2. 便宜上、選択したロケーションを LOCATION という環境変数に入力します。次のいずれかのコマンドを入力します。

export LOCATION=US

または

export LOCATION=EU

または

export LOCATION=ASIA

3. Cloud Shell では、DEVSHELL_PROJECT_ID 環境変数にプロジェクト ID が含まれています。次のコマンドを入力して、そのプロジェクト ID に基づいた名前のバケットを作成します。

gcloud storage buckets create -l $LOCATION gs://$DEVSHELL_PROJECT_ID

プロンプトが表示されたら [承認] をクリックして続行します。

4. Cloud Storage の一般公開されているロケーションから、バナー画像を取得します。

gcloud storage cp gs://cloud-training/gcpfci/my-excellent-blog.png my-excellent-blog.png

5. 新しく作成した Cloud Storage バケットにバナー画像をコピーします。

gcloud storage cp my-excellent-blog.png gs://$DEVSHELL_PROJECT_ID/my-excellent-blog.png

6. 作成したオブジェクトのアクセス制御リストを変更し、誰でも読み取れるようにします。

gsutil acl ch -u allUsers:R gs://$DEVSHELL_PROJECT_ID/my-excellent-blog.png

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 gcloud storage コマンドラインを使用して Cloud Storage バケットを作成する

タスク 4. Cloud SQL インスタンスを作成する

1. Google Cloud コンソールのナビゲーション メニュー（）で、[SQL] をクリックします。

2. [インスタンスを作成] をクリックします。

3. [データベース エンジンの選択] で、[MySQL を選択] をクリックします。

4. [Cloud SQL のエディションの選択] で、[Enterprise] をクリックし、プルダウンから [サンドボックス] を選択します。

5. [インスタンス ID] に「blog-db」と入力し、[root パスワード] に任意のパスワードを入力します。

注: 覚えやすいパスワードにしてください。使用する接続メカニズムは誰もが自由に利用できるものではないので、パスワードを隠す必要はありません。

6. [シングルゾーン] を選択し、Qwiklabs によって割り当てられたリージョンとゾーンを設定します。

注: これは、bloghost インスタンスを起動したリージョンおよびゾーンと同じになります。クライアントとデータベースを互いに近くに配置すると、最も良いパフォーマンスを得られます。

7. [インスタンスを作成] をクリックします。

注: インスタンスのデプロイが完了するまで待ちます。これには数分かかります。

8. インスタンスの名前 [blog-db] をクリックし、その詳細ページを開きます。

9. このラボで後から使用できるように、[SQL インスタンス] 詳細ページで、SQL インスタンスの [パブリック IP アドレス] をテキスト エディタにコピーします。

10. 左側の [ユーザー] メニュー、[ユーザー アカウントを追加] の順にクリックします。

11. [ユーザー名] に「blogdbuser」と入力します。

12. [パスワード] に任意のパスワードを入力します。これをメモします。

13. [追加] をクリックして、データベースにユーザー アカウントを追加します。

注: ユーザーが作成されるのを待ちます。

14. 左側の [接続] メニュー、[ネットワーキング] タブの順にクリックします。

15. [ネットワークを追加] をクリックします。

注: プライベート IP 接続とパブリック IP 接続を選択できる場合、このラボでは [パブリック IP] を選択します。 注: ユーザー アカウントの作成がまだ完了していない場合、[ネットワークを追加] ボタンが使用できない可能性があります。

16. [名前] に「web front end」と入力します。

17. [ネットワーク] に、bloghost VM インスタンスの外部 IP アドレスを入力し、末尾に /32 を付加します。

結果は次のようになります。

35.192.208.2/32 注: VM インスタンスの外部 IP アドレスの末尾に /32 を付加したものを使用するようにしてください。VM インスタンスの内部 IP アドレスや、ここで示したサンプル IP アドレスは使用しないでください。

18. [完了] をクリックして承認済みネットワークの定義を終了します。

19. [保存] をクリックして構成の変更を保存します。

注: 別のオペレーションが進行中ですといったメッセージが表示された場合、blog-db の緑色のチェックマークが表示されるまで数分待って、構成を保存してください。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Cloud SQL インスタンスを作成する

タスク 5. Cloud SQL を使用するように Compute Engine インスタンスでアプリケーションを構成する

1. ナビゲーション メニュー（）で、[Compute Engine] > [VM インスタンス] をクリックします。

2. VM インスタンス リストの VM インスタンス「bloghost」の行で [SSH] をクリックします。

3. 「bloghost」の ssh セッションで、作業ディレクトリをウェブサーバーのドキュメント ルートに変更します。

cd /var/www/html

4. nano テキスト エディタを使用して、index.php というファイルを編集します。

sudo nano index.php

5. 次の内容をファイルに貼り付けます。

<html> <head><title>Welcome to my excellent blog</title></head> <body> <h1>Welcome to my excellent blog</h1> <?php $dbserver = "CLOUDSQLIP"; $dbuser = "blogdbuser"; $dbpassword = "DBPASSWORD"; // 本番のブログでは、MySQL のパスワードを // ドキュメント ルートに保存しません。代わりに Secret Manger に // 保存します。詳細については、 // https://cloud.google.com/sql/docs/postgres/use-secret-manager をご覧ください。 try { $conn = new PDO("mysql:host=$dbserver;dbname=mysql", $dbuser, $dbpassword); // PDO エラーモードを例外に設定します $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); echo "Connected successfully"; } catch(PDOException $e) { echo "Database connection failed:: " . $e->getMessage(); } ?> </body></html> 注: 後の手順で、Cloud SQL インスタンスの IP アドレスとデータベース パスワードをこのファイルに挿入しますが、今はこのファイルの変更は行いません。

6. Ctrl+O キーの次に Enter キーを押し、編集したファイルを保存します。

7. Ctrl+X キーを押して nano テキスト エディタを終了します。

8. ウェブサーバーを再起動します。

sudo service apache2 restart

9. 新しいウェブブラウザ タブを開き、bloghost VM インスタンスの外部 IP アドレスの末尾に /index.php を付加してアドレスバーに貼り付けます。URL は次のようになります。

35.192.208.2/index.php 注: VM インスタンスの外部 IP アドレスの末尾に /index.php を付加したものを使用するようにしてください。VM インスタンスの内部 IP アドレスや、ここで示したサンプル IP アドレスは使用しないでください。

ページを読み込むと、次で始まるエラー メッセージが含まれています。

Database connection failed: ... 注: このメッセージが表示されるのは、Cloud SQL インスタンスへの PHP の接続が構成されていないためです。

10. bloghost の ssh セッションに戻ります。nano テキスト エディタを使用して、再度 index.php を編集します。

sudo nano index.php

11. nano テキスト エディタで CLOUDSQLIP を、先ほどメモした Cloud SQL インスタンスのパブリック IP アドレスに置き換えます。値を引用符で囲みます。

12. nano テキスト エディタで、DBPASSWORD を先ほど定義した Cloud SQL データベース パスワードに置き換えます。値を引用符で囲みます。

13. Ctrl+O キーの次に Enter キーを押し、編集したファイルを保存します。

14. Ctrl+X キーを押して nano テキスト エディタを終了します。

15. ウェブサーバーを再起動します。

sudo service apache2 restart

16. bloghost VM インスタンスの外部 IP アドレスを開いたウェブブラウザのタブに戻ります。ページを読み込むと、次のメッセージが表示されます。

Database connection succeeded. 注: 実際のブログでは、データベース接続ステータスはブログの訪問者に表示されません。データベース接続は管理者によってのみ管理されます。

タスク 6. Cloud Storage オブジェクトを使用するように Compute Engine インスタンスでアプリケーションを構成する

1. Google Cloud コンソールで、[Cloud Storage] > [バケット] をクリックします。

2. Google Cloud プロジェクトに基づいた名前のバケットをクリックします。

3. このバケットには、my-excellent-blog.png というオブジェクトがあります。そのオブジェクトの [公開アクセス] 列に表示されているリンクアイコンの URL、または [公開リンク] という単語（表示されている場合）のリンク先の URL のいずれかをコピーします。

注: リンクアイコンも [公開リンク] も表示されない場合は、ブラウザを更新します。それでもリンクアイコンが表示されない場合は Cloud Shell に戻り、gsutil acl ch コマンドによるオブジェクトのアクセス制御リストの変更が成功しているかを確認します。

4. bloghost VM インスタンスの ssh セッションに戻ります。

5. 次のコマンドを入力して、作業ディレクトリをウェブサーバーのドキュメント ルートに設定します。

cd /var/www/html

6. nano テキスト エディタを使用して、index.php を編集します。

sudo nano index.php

7. 矢印キーを使用して、h1 要素を含む行にカーソルを移動します。Enter キーを押して新しい空白の画面行を開き、上記でコピーした URL を貼り付けます。

8. 次の HTML マークアップを URL の直前に貼り付けます。

<img src='

9. URL の末尾に閉じ一重引用符と閉じ山かっこを配置します。

'>

行は次のようになります。

<img src='https://storage.googleapis.com/qwiklabs-gcp-0005e186fa559a09/my-excellent-blog.png'>

この手順により、<h1>...</h1> を含む行の直前に <img src='...'> を含む行が挿入されます。

注: ここで示した URL をコピーしないでください。代わりに、独自の Cloud Platform プロジェクトで Storage ブラウザに表示された URL をコピーします。

10. Ctrl+O キーの次に Enter キーを押し、編集したファイルを保存します。

11. Ctrl+X キーを押して nano テキスト エディタを終了します。

12. ウェブサーバーを再起動します。

sudo service apache2 restart

13. bloghost VM インスタンスの外部 IP アドレスを開いたウェブブラウザのタブに戻ります。ページを読み込むと、そのコンテンツにバナー画像が表示されています。

まとめ

このラボでは、Cloud SQL インスタンスを構成し、そのインスタンスに Compute Engine インスタンス内のアプリケーションを接続しました。また、Cloud Storage バケットを使って作業しました。

ラボを終了する

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

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

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

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

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

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

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

その他のリソース

Cloud SQL に関する Google Cloud Platform のドキュメントをご覧ください。

Cloud Storage に関する Google Cloud Platform のドキュメントをご覧ください。