Cloud Code を使用した開発

1. 目標

このラボでは、次の作業を行います。

  • Cloud Code プラグインを確認する
  • Kubernetes クラスタにデプロイする
  • Kubernetes ログをストリーミングする
  • 変更のホットリロードを利用する
  • ライブ Kubernetes アプリをデバッグする

2. ワークスペースの準備

アプリのクローンを作成する

リポジトリのクローンを作成して開発環境で開くには:

  1. 次の URL にアクセスして Cloud Shell エディタを開きます。

https://ide.cloud.google.com

  1. ターミナル ウィンドウで、次のコマンドを使用してアプリケーション ソースのクローンを作成します。

git clone https://github.com/viglesiasce/sample-app.git -b golden-path

  1. ディレクトリに移動し、IDE ワークスペースをリポジトリのルートに設定します。

cd sample-app && cloudshell workspace .

Minikube を起動する

このセクションでは、Minikube というローカル バージョンの Kubernetes を使用してアプリケーションをビルド、テスト、デプロイし、アクセスします。

  1. ターミナルで次のコマンドを実行して minikube を起動します。

minikube start

Minikube は Cloud Shell でローカル Kubernetes クラスタを設定します。この設定には数分かかります。開始したら、次のステップで Cloud Code が提供するさまざまなインターフェースを確認してください。

3. Cloud Code プラグインの探索

Cloud Code は、既存のテンプレートからのアプリケーション作成から、デプロイしたアプリのリソースのモニタリングまで、Kubernetes アプリケーションと Cloud Run アプリケーションの開発サイクル全体を IDE でサポートします。Cloud Code が提供するさまざまなコマンドとビューを使用します。このステップでは、基本的なインターフェースについて理解します。

アクティビティ バーでエクスプローラ ビューを確認する

アクティビティ バーから複数のユーザー インターフェース パネルにアクセスできます。さまざまなビューについて簡単に理解するには、各ビューのアイコンをクリックします。

API Explorer:

  • アクティビティ バーの [Cloud Code - Cloud APIs] アイコン [Cloud Code] をクリックします。このビューでの操作について詳しくは、ドキュメントをご覧ください。

ded1723c524edd72.png

Secret Manager エクスプローラ:

  • アクティビティ バーの Secret Manager ビュー ` をクリックします。このビューでの操作について詳しくは、ドキュメントをご覧ください。

89f88159bcf79fa9.png

Cloud Run Explorer:

  • 左側のアクティビティ バーにある Cloud Run アイコンを使用して、Cloud Run Explorer に移動します。このビューでの操作について詳しくは、ドキュメントをご覧ください。

a1d583fd06413011.png

Kubernetes Explorer:

  • 左側のアクティビティ バーのアイコンを使用して Kubernetes Explorer に移動します。このビューでの操作について詳しくは、ドキュメントをご覧ください。

b2b8ab3975c5b0c9.png

ステータスバーのコマンドを確認する

よく使用するコマンドには、ステータスバーのインジケーターからすばやくアクセスできます。

  • ステータスバー d61e85cf23a32a40.png で Cloud Code 拡張機能のインジケーターを探してクリックします。
  • CloudRun と Kubernetes で実行およびデバッグできるさまざまなコマンドを確認する
  • 詳細とサンプル アクティビティを確認するには、[Open Welcome Page](ようこそページを開く)をクリックします

コマンド パレット コマンドを確認する

その他のコマンドは、コマンド パレットから使用できます。アクセスできるコマンドの一覧を確認します。

  • コマンド パレットを開き(Ctrl/Cmd + Shift + P を押して)、「Cloud Code」と入力して使用可能なコマンドをフィルタします。
  • 矢印キーを使用してコマンドのリスト間を移動します。

4. Kubernetes クラスタへのデプロイ

このセクションでは、アプリケーションを構築、テスト、デプロイしてアクセスします。

次の手順では、ソースコードのビルドを開始し、テストを実行します。ビルドとテストの実行には数分かかります。これらのテストには、単体テストと、デプロイ環境用に設定されているルールをチェックする検証ステップが含まれます。この検証ステップはすでに構成されているため、開発環境で作業している場合でも、デプロイの問題に関する警告が表示されます。

  1. Cloud Shell エディタの下部にあるペインで、[Cloud Code] d61e85cf23a32a40.png を選択します。
  2. 上部に表示されるパネルで、[Run on Kubernetes] を選択します。プロンプトが表示されたら、[Yes] を選択して minikube Kubernetes コンテキストを使用します。
  3. 下部のペイン 4866761cb9c691e2.png の [出力] タブを選択すると、進行状況と通知が表示されます。
  4. [Kubernetes: Run/Debug - Detailed] を選択します。右側の c5e31091d464dbcf.png のチャネル プルダウンで、詳細とコンテナからライブ ストリーミングされるログを確認します。

ビルドとテストが完了すると、[出力] タブに Resource deployment/sample-app-dev status completed successfully と表示され、2 つの URL が表示されます。

  1. Cloud Code ターミナルで、出力の最初の URL(http://localhost:8080)にカーソルを合わせ、表示されたツールチップで [Open Web Preview] を選択します。

ブラウザでアプリケーションのローカル バージョンが開きます。このバージョンのアプリは minikube の Kubernetes クラスタで実行されています。

  1. ブラウザでページを更新します。[カウンタ] の横にある数字が増加し、アプリが更新に応答していることを示します。

ローカル環境で変更を行うときにアプリケーションを表示できるように、ブラウザでこのページを開いたままにします。

5. 変更のホットリロードを利用する

このセクションでは、アプリケーションに変更を加え、アプリがローカルの Kubernetes クラスタで実行されると、その変更を表示します。Kubernetes: Run/Debug チャンネルの出力タブでは、アプリケーション URL に加えて、出力に Watching for changes. とも表示されます。これは、ウォッチモードが有効になっていることを意味します。Cloud Code がウォッチモードの場合、Cloud Code はリポジトリに保存された変更を検出し、最新の変更を反映してアプリを自動的に再ビルドして再デプロイします。

  1. Cloud Shell エディタで main.go ファイルに移動します。
  2. この main.go ファイルの 23 行目で、色を緑から青に変更します。
  3. ファイルを保存します。

Cloud Code はアプリへの変更が保存されたことを検出し、その変更を自動的に再デプロイします。[出力] タブに [更新の開始] が表示されます。この再デプロイの実行には数分かかります。

この自動再ビルドは、一部のアプリケーション タイプとフレームワークで使用できるホットコード リロードに似ています。

  1. ビルドが完了したら、アプリを開いているブラウザでページを更新します。

更新すると、表の上部にある色が青から緑に変わります。

この設定により、あらゆるアーキテクチャのあらゆるコンポーネントに対して、このように自動的に再読み込みが行われます。Cloud Code と minikube を使用する場合、Kubernetes で実行されているものすべてに、このホットコード リロード機能があります。

6. ライブ Kubernetes アプリのデバッグ

アプリケーションの実行、変更、実行中のアプリの表示が完了しました。このセクションでは、アプリケーションをデバッグして、メイン リポジトリに commit できる状態であることを確認します。

このデバッグ例では、ページカウンタのコードのセクションに焦点を当てます。

  1. Cloud Shell エディタで main.go ファイルを開きます。
  2. 82 行目の左端をクリックしてアプリケーションにブレークポイントを設定します(if err != nil {)
  3. Cloud Shell エディタの下部にある青いペインで、Cloud Code d61e85cf23a32a40.png を選択します。
  4. 上部に表示されるパネルで、[Debug on Kubernetes] を選択します。

Cloud Code はデバッガを実行し、デバッガをアタッチします。これにより、アプリケーションのユーザー向けの動作だけでなく、アプリケーションのメモリ内状態にもアクセスできます。

  1. デプロイ プロセスが終了すると、アプリケーションがデプロイされているコンテナ内のディレクトリを確認するプロンプトがウィンドウの上部に表示されます。f96e9a814edb44f4.png

値が /go/src/app に設定されていることを確認し、Enter キーを押して値を受け入れます。

  1. デバッガのデプロイが完了するまで待ちます。完了すると、ステータスバーがオレンジ色になり、出力に「"Attached debugger to container "sample-app-dev-..." successfully」と表示されます。
  2. Cloud Code ターミナルで、出力の最初の URL(http://localhost:8081)にカーソルを合わせ、表示されたツールチップで [Open Web Preview] を選択します。想定どおり、ページの読み込みが終了しません。
  3. デバッガが表示された IDE に戻ります。コードがタブに表示され、コールスタック、コードの該当箇所で使用できる変数が表示されます。[Variables - Local] を展開すると、現在のカウンタ変数の値を確認できます。
  4. ページの読み込みを続行できるようにするには、[続行]アイコン(デバッグ ウィンドウ 8f395391c4828528.png
  5. デバッグが終了したら、停止ボタンをクリックして、実行中の各スレッドを終了します。81d142a9e1a2c01b.png