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

WBOLT_COM 6 月 04, 2023 460 0

我最喜欢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，如果你需要更多的时间，你可以升级到付费计划。

免费使用60小时的GitHub 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行的 <h1></h1> 元素改为：”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/ 。

带有URL的浏览器地址栏