十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

如何在 GitHub Codespaces 中转发端口并在本地浏览器访问应用

如何在 GitHub Codespaces 中转发端口并在本地浏览器访问应用 如何在 GitHub Codespaces 中转发端口并在本地浏览器访问应用【免费下载链接】docsThe open-source repo for docs.github.com项目地址: https://gitcode.com/GitHub_Trending/do/docs当你在一个 codespace 里运行 Web 应用、开发服务器或 API 时进程默认只监听 codespace 内部的 localhost。要把应用暴露出来以便在本地机器的浏览器中测试和调试就需要在 GitHub Codespaces 中转发forward端口。转发之后端口会以一个app.github.dev的 URL 对外提供服务你在浏览器或命令行中访问该地址即可看到应用。适用对象已在浏览器版 Codespaces 或 VS Code 中打开一个 codespace 的开发者CLI 路径要求已安装 {% data variables.product.prodname_cli %}gh。Codespaces 默认使用 HTTP 转发端口本文覆盖手动转发、用 CLI 转发、验证访问以及 HTTPS 与共享等可选配置。端口如何被自动转发应用运行后只要它向终端打印了包含 localhost 地址的输出例如http://localhost:PORT或http://127.0.0.1:PORT这个端口就会被自动转发在浏览器或 VS Code 中使用 Codespaces 时终端里的 URL 字符串会直接变成可点击的链接点一下就在本地浏览器中打开应用页面。如果你要转发一个没有被自动发现的端口比如应用没有打印 URL或用了非常见端口需要手动转发。另外可以在仓库的 dev container 配置中通过forwardPorts属性让端口对所有 codespace 自动转发见文末“可选配置”一节。在 Web 界面或 VS Code 中手动转发端口无论使用浏览器版 Codespaces 还是 VS Code操作路径一致打开 codespace 中的终端。点击PORTS选项卡。在端口列表下方点击Add port。输入端口号或地址然后按 Enter。端口出现在列表中后就可以在本地浏览器中访问了如果终端里已经打印了 localhost URL直接点击该 URL 即可。否则在PORTS选项卡中右键点击该端口选择Copy Local Address把复制到的本地地址粘贴到浏览器地址栏打开。如果列表中端口较多、不好辨认可以右键端口选择Set Port Label给它加一个标签便于识别。使用 CLI 转发端口在本地终端使用gh codespace ports forward子命令。把CODESPACE-PORT:LOCAL-PORT替换为你要连接的远端端口和本地端口输入命令后会从列出的 codespace 列表中选择目标 codespacegh codespace ports forward CODESPACE-PORT:LOCAL-PORT转发成功后查看已转发端口的详细信息输入gh codespace ports如你有多个 codespace从列表中选中对应的那个然后复制列出的地址备用。验证端口是否可访问转发端口后应用会出现在 URLhttps://CODESPACENAME-PORT.app.github.dev上。文档中的示例形式为https://monalisa-hot-potato-vrpqrxxrx-4000.app.github.dev这只是示例地址实际值以你PORTS选项卡中显示的地址为准。访问是否需要认证取决于端口可见性使用 localhost 地址访问或访问public可见性的远程域名不需要认证。访问private可见性默认的远程域名必须在请求中携带GITHUB_TOKEN认证。GITHUB_TOKEN在 codespace 启动时自动创建且在 codespace 会话期间保持不变停止并重新启动 codespace 后会生成新 token。用 curl 访问本地终端在 codespace 终端中查看 token输出是以ghu_开头的字符串复制它注意不要分享给任何人echo $GITHUB_TOKEN然后在本地机器的终端执行把ADDRESS和TOKEN替换为你复制的值curl ADDRESS -H X-Github-Token: TOKEN用 Postman 访问打开 Postman新建一个 GET 请求。把之前复制的端口地址粘贴为请求 URL。在Headers选项卡新建一条记录键为X-Github-Token值为你复制的GITHUB_TOKEN。点击Send。如果浏览器中打不开页面优先核对访问的是不是 private 远程域名但没有带 token改用 localhost 地址或补上X-Github-Token头如果是 CLI 转发先用gh codespace ports确认端口确实出现在转发列表中。可选配置HTTPS、共享与自动转发改用 HTTPS 转发默认是 HTTP。如需某个端口走 HTTPS在PORTS选项卡右键该端口悬停Change Port Protocol选择所需协议。该选择会在该 codespace 的生命周期内一直生效。注意如果把一个public可见性的端口改为 HTTPS其可见性会自动变为private。把端口分享给他人共享前先在PORTS选项卡右键端口选择Port Visibility设为Private to Organization或Public然后在端口本地地址右侧点击复制图标把 URL 发给对方。三种可见性的含义private仅自己可见是转发端口的默认设置。org仓库所属组织的成员可见。public任何知道 URL 和端口号的人都可以访问无需认证。两点限制只有当组织使用 {% data variables.product.prodname_team %} 或 {% data variables.product.prodname_ghe_cloud %} 时才能把端口设为仅组织内可见组织所有者可以通过策略限制把端口设为 public 或 org 的能力你的可选可见性可能因此受限详见 限制转发端口的可见性。用 CLI 调整可见性时使用gh codespace ports visibility把setting替换为private、org或publicgh codespace ports visibility CODESPACE-PORT:SETTINGS一条命令可以设置多个端口例如gh codespace ports visibility 80:private 3000:public 3306:org让端口自动转发把forwardPorts属性写入仓库的 dev container 配置文件通常是.devcontainer/devcontainer.json该端口就会对从此仓库创建的所有 codespace 自动转发。把NUMBER替换为要转发的端口号也可以是逗号分隔的端口列表forwardPorts: [NUMBER],如果希望同时给端口写入标签可以在PORTS选项卡右键端口选择Set Label and Update devcontainer.json仓库有多个 dev container 配置文件时会提示选择要更新哪一个配置文件中会写入portsAttributes属性例如forwardPorts: [3333, 4444], portsAttributes: { 3333: { label: app-standard-preview }, 4444: { label: app-pro-preview } }更新配置后已经创建的 codespace 必须重新构建rebuild后变更才生效。参考文档在 codespace 中转发端口自动转发端口的可复用说明端口可见性设置说明【免费下载链接】docsThe open-source repo for docs.github.com项目地址: https://gitcode.com/GitHub_Trending/do/docs创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表