Cloud Code を使用した開発

1. 目標

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

Cloud Code プラグインを調べる
Kubernetes クラスタにデプロイする
Kubernetes ログをストリーミングする
変更のホットリロードを利用する
実行中の Kubernetes アプリをデバッグする

2. ワークスペースを準備する

アプリをクローンする

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

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

https://ide.cloud.google.com

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

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

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

cd sample-app && cloudshell workspace .

Minikube を起動する

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

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

minikube start

minikube は Cloud Shell でローカル Kubernetes クラスタを設定します。この設定には数分かかります。起動中に、次のステップで Cloud Code が提供するさまざまなインターフェースを確認します。

3. Cloud Code プラグインを調べる

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

アクティビティバーから Explorer ビューを確認する

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

API Explorer:

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

Secret Manager Explorer:

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

Cloud Run Explorer:

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

Kubernetes Explorer:

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

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

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

ステータスバーで Cloud Code 拡張機能インジケーターを見つけてクリックします。
Cloud Run と Kubernetes で実行してデバッグできるさまざまなコマンドを確認します。
[Open Welcome Page] をクリックして、詳細とサンプルアクティビティを表示します。

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

コマンドパレットから追加のコマンドを使用できます。アクセスできるコマンドのリストを確認します。

コマンドパレットを開き（Ctrl/Cmd+Shift+P キーを押します）、Cloud Code と入力して、使用可能なコマンドをフィルタします。
矢印キーを使用して、コマンドのリストを切り替えます。

4. Kubernetes クラスタにデプロイする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

更新すると、テーブルの上部の色が青から緑に変わります。

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

6. 実行中の Kubernetes アプリをデバッグする

アプリケーションを実行し、変更を加えて、実行中のアプリを表示しました。このセクションでは、アプリケーションをデバッグして、メインリポジトリにコミットする準備ができていることを確認します。

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

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

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

デプロイプロセスの最後に、アプリケーションがデプロイされているコンテナ内のディレクトリを確認するよう求めるプロンプトがウィンドウの上部に表示されます。

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

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