使用Codespaces分享你的本地托管网络应用程序

我最喜欢GitHub Codespaces的一点是，它使结对编程更容易。随着软件工程行业从现场工作转向远程工作，我们已经学会了如何优先考虑虚拟协作的无缝开发者体验。

当我在一个实体办公室工作时，结对编程包括坐在一个软件工程师同事旁边，一起盯着电脑屏幕。我们可以看着代码编辑器、控制台和浏览器进行调试。虚拟工作提出了一个挑战：即使我们不在同一个房间，我们如何分享屏幕和键盘（打字）？幸运的是，像Zoom、Slack和Visual Studio Code Live Share扩展这样的产品得到了改善，使我们能够更好地一起编码。

由于许多原因，GitHub Codespaces很快就进入了我的远程代码协作的有用工具列表。其中一个原因是，它使开发者能够通过端口转发来分享他们本地托管的网络应用。

在这篇文章中，我将指导你如何使用GitHub Codespaces分享你的本地托管Web应用。

什么是GitHub Codespaces？

GitHub Codespaces 是一个基于云的开发环境，使开发者能够在任何地方进行编码，也就是说，你可以使用 GitHub Codespaces 在浏览器中进行编码。这是在你的浏览器中的一个完整的代码编辑器。只要你有网络，你就可以在任何设备上编写和阅读代码，包括iPad。

谁可以使用GitHub Codespaces?

每个GitHub用户每月都可以免费使用60小时的GitHub Codespaces，如果你需要更多的时间，你可以升级到付费计划。

使用Codespaces分享你的本地托管网络应用程序

什么是端口转发？

端口转发将网络流量从一个端口重定向到生活在同一台计算机或不同计算机上的另一个端口。在Codespaces中，你可以在一个特定的端口上运行一个网络应用，然后将端口转发到你的本地机器上，这样你就可以测试和调试。最重要的是你可以与必要的队友和合作者分享你的端口，这样他们就可以查看你的本地托管的网络应用。

如何使用GitHub Codespaces共享本地托管的Web应用

让我们尝试一下使用GitHub Codespaces共享本地托管的Web应用吧

Step 1: 创建一个Codespaces实例（或Codespaces模板）

你可以通过创建一个GitHub仓库，选择Codespaces标签，并点击 “New codespace” 按钮，来启动一个新的Codespaces实例。然后你可以添加几行你想运行的代码。或者，你可以使用一个Codespaces模板，这更快、更令人兴奋，而且包括一个已经运行的网络应用。

创建一个Codespaces模板

如果你导航到URL https://github.com/codespaces/templates，你会看到一个模板的列表。你可以选择一个你想使用的模板。对于这个例子，我将使用Next.js模板。我们会看到这个模板里面有一些文件，包括.devcontainer.json、组件和CSS。

使用Codespaces分享你的本地托管网络应用程序

Step 2: 查看.devcontainer.json文件

只要你打开Next.js模板，就会打开一个浏览器标签，里面有一个Next.js应用程序。devcontainer.json包含的配置可以帮助我们在Codespace构建完成后立即运行网络应用。

在devcontainer.json文件中，你会看到以下属性和命令，帮助Codespaces实例立即运行网络应用：

"updateContentCommand": "npm install && npm run build",
"postCreateCommand":"  ",
"postAttachCommand": {
"server": "npm run dev"
}

这些属性说明，在Codespaces构建期间和之后，它应该运行上述命令，以安装依赖性并运行Web应用。

devcontainer.json文件还包含一个 forwardedPorts 属性，它接收一个你想转发的端口数组。在模板中，我们已经转发了3000端口。这告诉Codespaces，我们想把3000端口转发到我们的本地机器。

"forwardedPorts": [
3000
]

Step 3: 查看简单浏览器标签

简单的浏览器标签已经渲染了一些代码!

这个模板包含的配置可以打开一个浏览器标签，渲染我们的代码。如果你点击简单浏览器标签，你会看到一个Next.js应用程序。你可以对 pages/index.js 文件中的代码进行修改和查看。试着把第31行的

元素改为：”Codespaces Port Forwarding Is Where It's At!” 你会看到这些变化立即反映在简单浏览器标签中。

简单浏览器标签已经被端口转发了!

你会在简单浏览器标签中看到一个带有URL的浏览器地址栏。URL会因人而异，因项目而异，但一般的格式是 https://<your-github-handle>-<a-codespaces-id-which-combines-a-words and-random-characters>-<your-port-number>.preview.app.github.dev/ 。例如，URL可以像 https://blackgirlbytes-unicorn-poop-5v123456789qvv-3000.preview.app.github.dev/ 。

使用Codespaces分享你的本地托管网络应用程序

Codespaces转发了3000端口到这个URL，所以你可以在简单浏览器标签中查看你的网络应用。如果你在一个新的标签（在Codespaces之外）进入该URL，你会看到相同的Web应用。

Step 4: 分享URL

现在你可以分享你的URL，使它对你的队友或合作者可用。导航到端口标签（你的终端通常在这里），你会看到一个你正在转发的端口列表。对于每个端口，都有一个：

标签栏、
本地地址列
正在运行的进程列
可见性列
和来源列

使用Codespaces分享你的本地托管网络应用程序

如果你右击你想共享的端口，你会看到将端口的可见性从 “Private” 切换到 “Public” 的选项。你现在可以复制本地地址中的值，并与必要的合作者分享。现在，他们可以查看你的本地托管的网络应用，并对代码进行更多知情的修改。

额外提示：如果你在一个组织下创建这个Codespace实例，你可以看到端口可见性的三个选项： “Private”、”Public” 和 “Private to Organization”。这是一种安全地分享你的本地Web应用的好方法，特别是与你的组织成员分享。

使用Codespaces分享你的本地托管网络应用程序

给端口贴标签

如果你有多个端口在运行，给端口贴上标签是很有帮助的，这样你就可以确定每个端口的区别。要给端口贴标签，右键单击该端口，然后选择 “Label Port”。然后，你可以给该端口一个可以快速识别的名字。

使用Codespaces分享你的本地托管网络应用程序

– 如果你有兴趣了解更多关于GitHub Codespaces的信息，请查看GitHub Codespaces文档。

– 在Dev.to上关注原作者和GitHub，了解更多GitHub Codespaces的技巧和窍门!

– 你也可以查看作者的仓库，作为参考。

原文地址：https://www.wbolt.com/share-locally-hosted-web-app-using-codespaces.html

{{userData.name}}已认证