使用本地 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 CLI,可能还需要 运行 gcloud auth login 以获取凭据,并 gcloud config set project PROJECT_ID 以将当前 项目设置为您在上一步中复制的项目 ID。

  5. 首次使用 ssh 时,请安装远程 SSH 扩展程序,以便您可以通过 Extension Marketplace 或通过命令面板从 VS Code 代码编辑器连接到工作站。

    Extension Marketplace

    1. 打开本地 VS Code 代码编辑器应用,然后在活动栏中选择
      Extensions,打开 Extension Marketplace。

    2. 点击 Install 以安装 Remote - SSH 扩展程序。

    3. 在搜索字段中输入 remote ssh,这将打开 Remote - SSH 的扩展程序页面。

      安装 Remote-SSH 扩展程序

    命令面板

    1. 如需打开命令面板,请按 Control+Shift+P (在 macOS 上,按 Command+Shift+P),或者点击 View > Command Palette

    2. 输入 ext install ms-vscode-remote.remote-ssh 以安装扩展程序。

打开 SSH 隧道

使用 gcloud workstations start-tcp-tunnel 命令从本地机器打开到工作站的 SSH 隧道:

  1. 在 Google Cloud 控制台中, 前往 Cloud Workstations > Workstations 页面。

    进入“工作站”

  2. 点击工作站名称以打开工作站详细信息 页面。

  3. 在以下示例中,替换工作站名称、区域(位置)、工作站集群名称和工作站配置名称的占位符。将“工作站详细信息” 面板中的值复制到标有 修改Edit 图标的占位符中。

    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,请点击状态栏中的 Open a Remote Window

  3. 当命令面板打开时,选择 Connect to Host 选项。

    连接到主机

  4. 输入 user@localhost:LOCAL_PORT,将 LOCAL_PORT 替换为您的本地端口号。

    以下示例通过指定 user@localhost:1025连接到本地端口1025

    添加 SSH 主机

  5. 在看到 Host Added 确认消息后,如果系统提示您进行连接,请点击 Connect

    系统可能还会提示您确认哈希。如果看到提示,请点击 Continue

  6. 系统会打开一个新的 VS Code 代码编辑器,VS Code 状态栏会显示 SSH: localhost: ,后跟端口号。

    您现在可以访问远程工作站上的文件和语言服务器,并且可以构建和运行在工作站内运行的进程。

    以下示例显示了一个 VS Code 代码编辑器窗口,该窗口通过 SSH: localhost: 1025连接到 Cloud Workstations。

    已连接到工作站

    您还可以返回到 Extension Marketplace,安装 Cloud Code 和其他本地 VS Code 扩展程序,以帮助您 构建、运行和测试代码。