使用本地 VS Code 编辑器开发代码

了解如何从本地计算机到工作站打开 SSH 隧道,然后使用 VS Code 远程开发支持从本地 VS Code 编辑器连接到 Cloud Workstations。

准备工作

在开始之前,请确保您已按照以下步骤完成以下任务:

  1. 确保您的团队中有人创建了工作站配置
  2. 创建并启动工作站
  3. 在 Google Cloud 控制台中,复制以下信息:

    1. 项目名称和 ID:点击菜单栏中的项目名称,然后复制随即打开的项目名称和 ID 对话框中的 ID。 Google Cloud
    2. 区域
    3. 集群名称
    4. 配置名称
  4. 在本地机器上,安装 gcloud CLI

    如果您是首次运行 gcloud CLI,可能还需要运行 gcloud auth login 来获取凭据,并运行 gcloud config set project PROJECT_ID 将当前项目设置为您在上一步中复制的项目 ID。

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

    Extensions Marketplace

    1. 打开本地 VS Code 编辑器应用,然后在活动栏中依次选择
      Extensions(扩展程序)以打开 Extensions Marketplace(扩展程序市场)。

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

    3. 在搜索字段中输入 remote ssh,系统随即会打开远程 - SSH 的扩展程序页面。

      安装 Remote-SSH 扩展程序

    命令面板

    1. 如需打开命令面板,请按 Control+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 Copy code sample 复制 gcloud CLI 命令。

  5. 将该命令粘贴到本地终端窗口中,然后按 Enter 键以创建隧道。

    命令成功后,系统会显示 Listening on port 消息,后跟本地端口号。

如需详细了解每个配置标志,请参阅 SSH 隧道start-tcp-tunnel

连接到 Cloud Workstations 主机

请按照以下步骤连接到 Cloud Workstations 主机:

  1. 打开或返回 VS Code 应用。
  2. 如需启动远程 - SSH,请点击状态栏中的 打开远程窗口

  3. 当 Command Palette 打开时,选择 Connect to Host 选项。

    连接到主机

  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 编辑器窗口。

    已连接到工作站

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