ローカルの VS Code エディタを使用してコードを開発する

ローカルマシンからワークステーションへの SSH トンネルを開き、VS Code リモート開発サポートを使用して、ローカルの VS Code エディタから Cloud Workstations に接続する方法を学習します。

始める前に

始める前に、次のタスクの手順を実施してください。

  1. チームのメンバーがワークステーション構成を作成していることを確認します。
  2. ワークステーションを作成して開始します。

  3. Google Cloud コンソールで作業している間に、次の情報をコピーします。

    1. プロジェクト名と ID: Google Cloud のメニューバーでプロジェクト名をクリックし、表示された [プロジェクト名と ID] ダイアログで ID をコピーします。
    2. リージョン
    3. クラスタ名
    4. 構成名

  4. ローカルマシンから gcloud CLI をインストールします。

    gcloud を初めて実行する場合は、gcloud auth login を実行して認証情報を取得し、gcloud config set project PROJECT_ID を実行して前のプロジェクトをコピーしたプロジェクト ID に設定する必要があります。

  5. ssh を初めて使用する場合は、リモート SSH 拡張機能をインストールして、拡張機能 Marketplace またはコマンド パレットを介して VS Code エディタからワークステーションに接続できるようにします。

    拡張機能 Marketplace

    1. ローカルの VS Code エディタ アプリケーションを開いてから、
      アクティビティ バーで [拡張機能] を選択して、拡張機能 Marketplace を開きます。

    2. [インストール] をクリックして Remote - SSH 拡張機能をインストールします。

    3. 検索欄に「remote ssh」と入力します。これにより、[Remote - SSH] の拡張機能ページが開きます。

      Remote-SSH 拡張機能をインストールする

    コマンド パレット

    1. コマンド パレットを開くには、Ctrl+Shift+P（または macOS の場合は Command+Shift+P）を押すか、[表示] > [コマンド パレット] をクリックします。

    2. 「ext install ms-vscode-remote.remote-ssh」と入力して拡張機能をインストールします。

SSH トンネルを開く

gcloud workstations start-tcp-tunnel コマンドを使用して、ローカルマシンからワークステーションへの SSH トンネルを開きます。

  1. Google Cloud コンソールで、[Cloud Workstations] > [ワークステーション] ページに移動します。

    [ワークステーション] に移動

  2. ワークステーション名をクリックして、[ワークステーションの詳細] ページを開きます。

  3. 次の例では、ワークステーション名、リージョン（ロケーション）、ワークステーション クラスタ名、ワークステーション構成名のプレースホルダを置き換えます。[ワークステーションの詳細] パネルの値を、編集アイコンが付いたプレースホルダにコピーします。

    gcloud workstations start-tcp-tunnel \
  --project=PROJECT_ID \
  --region=REGION \
  --cluster=CLUSTER_NAME \
  --config=CONFIG_NAME \
  --local-host-port=:LOCAL_PORT \
  WORKSTATION_NAME 22

    プロジェクト ID を確認するには、始める前にセクションをご覧ください。

    --local-host-port=:LOCAL_PORT フラグは省略可能です。ローカルポートを指定する場合は、LOCAL_PORT を使用するローカルポート番号に置き換えます。ローカルポートを指定しない場合は、システムで未使用の任意のローカルポートが自動的に選択され、ポート番号を含むメッセージが出力されるため、使用するローカルポートがわかります。

  4. プレースホルダに入力したら、content_copy [コードサンプルをコピー] をクリックして gcloud CLI コマンドをコピーします。

  5. コマンドをローカル ターミナル ウィンドウに貼り付け、Enter キーを押してトンネルを作成します。

    コマンドが成功すると、Listening on port メッセージの後にローカル ポート番号が表示されます。

各構成フラグの詳細については、SSH トンネルまたは start-tcp-tunnel をご覧ください。

Cloud Workstations ホストに接続する

Cloud Workstations ホストに接続する手順は次のとおりです。

  1. VS Code アプリケーションを開くか、それに戻ります。

  2. Remote - SSH を起動するには、ステータスバーで [リモート ウィンドウを開く] をクリックします。

  3. コマンド パレットが開いたら、[ホストに接続する] オプションを選択します。

    ホストに接続する

  4. 「user@localhost:LOCAL_PORT」と入力します。LOCAL_PORT はローカル ポート番号に置き換えます。

    次の例では、user@localhost:1025 を指定してローカルポート 1025 に接続します。

    SSH ホストを追加する

  5. [ホストの追加] という確認メッセージが表示されたら、[接続] をクリックします。

    また、システムでハッシュを確認するプロンプトが表示される場合があります。プロンプトが表示されたら、[続行] をクリックします。

  6. 新しい VS Code エディタが開き、VS Code のステータスバーに SSH: localhost: とポート番号が表示されます。

    これで、リモート ワークステーション上のファイルと言語サーバーにアクセスできるようになり、ワークステーション内で実行されるプロセスのビルドおよび実行が可能になりました。

    次の例は、 SSH: localhost: 1025 を介して Cloud Workstations に接続している VS Code エディタ ウィンドウを示しています。

    ワークステーションに接続

    拡張機能 Marketplace に戻って、Cloud Code とその他のローカル VS Code 拡張機能をインストールして、コードのビルド、実行、テストを行うこともできます。