我最喜歡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中，你可以在一個特定的埠上執行一個網路應用，然後將埠轉發到你的本地機器上，這樣你就可以測試和除錯。最重要的是你可以與必要的隊友和合作者分享你的埠，這樣他們就可以檢視你的本地託管的網路應用。
如何使用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。
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/ 。
Codespaces轉發了3000埠到這個URL，所以你可以在簡單瀏覽器標籤中檢視你的網路應用。如果你在一個新的標籤（在Codespaces之外）進入該URL，你會看到相同的Web應用。
Step 4: 分享URL
現在你可以分享你的URL，使它對你的隊友或合作者可用。導航到埠標籤（你的終端通常在這裡），你會看到一個你正在轉發的埠列表。對於每個埠，都有一個：
- 標籤欄、
- 本地地址列
- 正在執行的程序列
- 可見性列
- 和來源列
如果你右擊你想共享的埠，你會看到將埠的可見性從 “Private” 切換到 “Public” 的選項。你現在可以複製本地地址中的值，並與必要的合作者分享。現在，他們可以檢視你的本地託管的網路應用，並對程式碼進行更多知情的修改。
額外提示：如果你在一個組織下建立這個Codespace例項，你可以看到埠可見性的三個選項： “Private”、”Public” 和 “Private to Organization”。這是一種安全地分享你的本地Web應用的好方法，特別是與你的組織成員分享。
給埠貼標籤
如果你有多個埠在執行，給埠貼上標籤是很有幫助的，這樣你就可以確定每個埠的區別。要給埠貼標籤，右鍵單擊該埠，然後選擇 “Label Port”。然後，你可以給該埠一個可以快速識別的名字。
– 如果你有興趣瞭解更多關於GitHub Codespaces的資訊，請檢視GitHub Codespaces文件。
– 在Dev.to上關注原作者和GitHub，瞭解更多GitHub Codespaces的技巧和竅門!
– 你也可以檢視作者的倉庫，作為參考。
評論留言