如何在github代码空间中转发端口?

在您的代码空间中转发端口

您可以在代码空间中转发端口以测试和调试您的应用程序。您还可以管理端口协议,并在组织内部或公开分享端口。

端口转发使您能够访问在代码空间内运行的 TCP 端口。例如,如果您在代码空间的某个特定端口上运行一个 Web 应用程序,您可以转发该端口。这使您能够从本地机器的浏览器访问该应用程序,以便进行测试和调试。

当代码空间内运行的应用程序在终端中输出包含本地主机 URL 的内容时,例如 http://localhost:PORThttp://127.0.0.1:PORT,该端口会自动转发。如果您在浏览器或 Visual Studio Code 中使用 GitHub Codespaces,终端中的 URL 字符串会转换为可点击的链接,您可以点击该链接在本地机器上查看网页。默认情况下,GitHub Codespaces 使用 HTTP 转发端口。

您可以编辑仓库的开发容器配置,以自动转发一个或多个端口。您还可以手动转发端口、为转发端口添加标签、与组织成员分享转发端口、公开分享转发端口,以及将转发端口添加到代码空间配置中。

注意

组织所有者可以限制将转发端口公开或在组织内部可见的能力。更多信息,请参见限制转发端口的可见性

转发端口

您可以手动转发未自动转发的端口。

  1. 在代码空间中打开终端。
  2. 点击 PORTS 选项卡。
  3. 在端口列表下方,点击 添加端口

  1. 输入端口号或地址,然后按 Enter 键。

使用 HTTPS 转发

默认情况下,GitHub Codespaces 使用 HTTP 转发端口,但您可以根据需要将任何端口更新为使用 HTTPS。如果您将具有公共可见性的端口更新为使用 HTTPS,该端口的可见性将自动更改为私有。

  1. 在代码空间中打开终端。
  2. 点击 PORTS 选项卡。
  3. 右键点击您想要更新的端口,然后将鼠标悬停在 更改端口协议 上。

  1. 选择该端口所需的协议。您选择的协议将在代码空间的生命周期内记住。

分享端口

注意

只有当您的组织使用 GitHub Team 或 GitHub Enterprise Cloud 时,您才能将端口设为组织私有。

如果您想与他人分享转发端口,可以将其设为组织私有或公开。将其设为组织私有后,组织内任何拥有该端口 URL 的人都可以查看运行中的应用程序。将其设为公开后,任何知道 URL 和端口号的人都可以查看运行中的应用程序,而无需进行身份验证。

注意

您的端口可见性选项可能受到组织配置策略的限制。更多信息,请参见限制转发端口的可见性

  1. 在代码空间中打开终端。
  2. 点击 PORTS 选项卡。
  3. 右键点击您想要分享的端口,点击 端口可见性,然后选择 组织私有公开

  1. 在端口本地地址的右侧,点击复制图标。

  1. 将复制的 URL 发送给您想要分享端口的人。

使用命令行工具和 REST 客户端访问端口

当您转发一个端口时,您的应用程序将在 URL https://CODESPACENAME-PORT.app.github.dev 上可用。例如,https://monalisa-hot-potato-vrpqrxxrx7x2rxx-4000.app.github.dev。如果您从 VS Code 桌面应用程序转发一个私有端口,您的应用程序还将在本地主机端口(如 127.0.0.1:4000)上可用。

要使用 REST 客户端(如 Postman)或命令行工具(如 curl)访问您的应用程序,如果您使用的是本地主机端口,或者访问远程域的公共端口,则无需进行身份验证。然而,要连接到远程域的私有端口,您必须在请求中使用 GITHUB_TOKEN 访问令牌进行身份验证。

注意

GITHUB_TOKEN 会在您启动代码空间时自动创建,并在代码空间会话期间保持不变。如果您停止并重新启动代码空间,将生成一个新的 GITHUB_TOKEN

查找连接地址

  1. 在代码空间中打开终端。
  2. 点击 PORTS 选项卡。此处列出您已转发的所有端口。
  3. 右键点击您想要连接的端口,然后点击 复制本地地址

  1. 将复制的地址粘贴到某处以备后用。

查找 GITHUB_TOKEN

  1. 在代码空间的终端中,输入 echo $GITHUB_TOKEN。令牌是一个以 ghu_ 开头的字符串。
  2. 复制该令牌。

重要提示

请勿将此访问令牌分享给任何人。

使用 curl 访问转发端口

在本地计算机的终端中输入:

curl ADDRESS -H "X-Github-Token: TOKEN"

ADDRESSTOKEN 替换为您之前复制的值。

使用 Postman 访问转发端口

  1. 打开 Postman。
  2. 创建一个新的 GET 请求。
  3. 将您之前复制的地址粘贴为请求 URL。

  1. Headers 选项卡中,创建一个新条目,键为 “X-Github-Token”,值为您之前复制的 GITHUB_TOKEN

  1. 点击 发送

自动转发端口

您可以将转发端口添加到仓库的 GitHub Codespaces 配置中,以便从该仓库创建的所有代码空间都会自动转发该端口。更新配置后,必须重建之前创建的代码空间才能应用更改。有关开发容器配置文件的更多信息,请参见开发容器简介

  1. 在代码空间中,打开您想要更新的开发容器配置文件。通常此文件为 .devcontainer/devcontainer.json
  2. 添加 forwardPorts 属性。
"forwardPorts": [NUMBER],

NUMBER 替换为您想要转发的端口号。可以是逗号分隔的端口号列表。
3. 保存文件。

为端口添加标签

当您在浏览器或 VS Code 桌面应用程序中打开代码空间时,可以为转发端口添加标签,以便在列表中更容易识别。

  1. 在代码空间中打开终端。
  2. 点击 PORTS 选项卡。
  3. 右键点击您想要添加标签的端口,然后点击 设置端口标签

  1. 为您的端口输入标签,然后按 Enter 键。

自动为转发端口添加标签

您可以为端口添加标签,并将更改写入仓库的开发容器配置文件中。如果您为使用 forwardPorts 属性自动转发的端口执行此操作,则该标签将自动应用于使用该配置文件从仓库创建的所有未来代码空间的转发端口。

  1. 在代码空间中打开终端。
  2. 点击 PORTS 选项卡。
  3. 右键点击您想要将标签属性添加到代码空间配置的端口,然后点击 设置标签并更新 devcontainer.json

  1. 为您的端口输入标签,然后按 Enter 键。

  1. 如果您的仓库有多个开发容器配置文件,您将被提示选择要更新的文件。开发容器配置文件将更新为在 portsAttributes 属性中包含新标签。例如:
// 使用 'forwardPorts' 使容器内的端口列表在本地可用。
"forwardPorts": [3333, 4444],

"portsAttributes": {
  "3333": {
    "label": "app-standard-preview"
  },
  "4444": {
    "label": "app-pro-preview"
  }
}