Demo丨GitHub Codespaces，雲上開發完整專案

微軟技術棧發表於2022-04-03
Github

GitHub 是全球最受歡迎的開發者平臺，⾃從微軟收購了 GitHub 後，GitHub 的功能就越來越強⼤，除了原有的程式碼管理外，也增加了很多硬貨，這就包括了整合 CI/CD 的 GitHub Actions，以及完善的項⽬管理功能，還有⼀個雲端的開發環境 GitHub CodeSpace。GitHub Codespaces 並不只是⼀個簡單的改改程式碼的編輯器，它還包含了⼀個完整開發環境，讓你可以在雲上開發完整的項⽬。

什麼是 GitHub Codespaces

GitHub Codespaces 是雲端的開發環境，它允許開發⼈員通過瀏覽器或從本地的 Visual Studio Code IDE 直接進⾏除錯、維護、更改、部署 GitHub 上的程式碼。現階段 GitHub Codespaces 只提供給團隊和企業版本。

image.png

上圖是官⽅對於 GitHub Codespaces 實現的描述。你可以把 GitHub 看成⼀個傳統的 C/S 架構。在後端使⽤虛擬化技術（容器/虛擬機器）設定你的程式碼，開發環境以及相關依賴等，在前端部分可以通過本地安裝的 Visual Studio Code 或者瀏覽器訪問使⽤。

GitHub Codespaces 有⼏個優點：

  1. ⾼效能 ⸺ 開發⼈員可以使⽤更好效能的虛擬開發環境，提⾼開發⼈員的⽣產⼒
  2. ⾼安全 ⸺ 只有授權⽤戶才能訪問 GitHub Codespaces
  3. 易管理 ⸺ 開發⼈員可以輕鬆地在每個項⽬的基礎上管理依賴項和擴充套件
  4. ⼀致性 ⸺ 團隊開發⾥，通過 GitHub Codespaces 開發⼈員之間有統⼀的的開發環境，可以⾮常輕鬆地管理項⽬上的依賴和擴充套件
  5. 跨裝置 ⸺ 基於瀏覽器的編碼體驗意味著可以在任何裝置上進⾏開發，例如：⼿機、iPad、平板電腦等，從⽽提⾼了開發⽣產效率

通過 iPad 開發⼀個 Azure Functions 的項⽬

1.⾸先開啟我的 iPad Safari 瀏覽器，訪問我的⼀個 GitHub Repository，選擇Code 按鈕，再選擇Codespaces 標籤點選 New Codespaces，你就可以啟動⼀個基於該 Repo 下的 Codespaces 環境

image.png

2.選擇成功後，會讓你選擇需要的虛擬開發環境配置 (你可以根據你的需要去設定)，這⾥我選擇⼀個4核CPU，8G 記憶體，32GB 儲存的虛擬環境

image.png

選擇後，需要稍等⽚刻， 這⾥會幫你在雲端開啟虛擬環境

image.png

配置成功後，在瀏覽器就可以啟動雲端的 Visual Studio Code 環境

image.png

3.按 Cmd + Shift + P 選擇開發開發環境 ( Codespaces: Configure Container Features... ) ，你可以選擇你的應⽤場景和開發的語⾔

image.png

如果你是第⼀次會讓你新增相關的⽂件

image.png

列表選擇展示所有設定( Show All Definitions...)

image.png

選擇 Azure Functions & Python 3

image.png

建立成功後，你會看到 Repo 會新增.devcontainer⽂件夾，新增 devcontainer.json 和 Dockerfile

image.png

選擇右下⻆ Rebuild / Cmd + Shift + P 選擇 Codespaces: Rebuild Container 就可以配置好你的 Azure Functions 開發環境了

image.png

這⾥我要說說在 .devcontainer 下的兩個⽂件

devcontainer.json

devcontainer.json 是 Codespace 下設定的開發環境配置，除了對應的 Dockefile 外，還包括開發需要到的端⼝，設定，以及對應的 Visual Studio Code 外掛安裝。像我這⾥就有開發的 Docker 端⼝，以及 Python/Docker/Azure Functions 等外掛。這個配置環境對於多⼈開發的項⽬是⾮常有⽤的，因為新的開發⼈員不⽤再關⼼開發環境如何配置，節約了配置時間

image.png

例如我想安裝 Thunder Client 外掛給到開發團隊 ，就可以在 extensions 欄位新增 "rangav.vscode-thunderclient"


"extensions": [
"ms-azuretools.vscode-azurefunctions",
"ms-azuretools.vscode-docker",
"ms-python.python",
"rangav.vscode-thunder-client"
]

再選擇 Rebuild container 就可以為以後的開發者，安裝好 Thunder Client 元件了
image.png

Dockerfile

Dockerfile 就是對應的開發環境設定，當然你也可以根據⾃身開發需要，建立⾃⼰的開發環境容器

4.這個時候你就可以選擇 Azure 環境建立 Azure Functions 應⽤了（這⼀步我就不⼀⼀介紹了，和本地建立是⼀樣的）

image.png

5.來談談除錯，可以直接進⾏除錯，就如本地應⽤⼀樣，⾮常⽅便

image.png

除錯成功後，你可以同步⼀下程式碼到你的 GitHub

image.png

當然你也可以直接通過 GitHub Actions 對 Repo 進⾏ CI/CD 操作，這⾥篇幅有限我就不⼀⼀多說了。

總結

GitHub Codespaces 與 GitHub ⽆縫連線，通過雲端不僅管理好你的程式碼，更可以作為開發環境，直接通過任意瀏覽器就可以完成整個研發週期的⼯作，降低了對本地硬體的依賴。更讓依賴於 GitHub 的個⼈和團隊，提供更好的⽣產⼒。⼩夥伴們快快⽤起來。

相關資源

1.點選瞭解 GitHub Codespaces 更多資訊

2.點選瞭解 Azure Functions 的開發

點選瞭解使用 Visual Studio 開發 Azure Functions

相關文章