Github CodeSpaces 使用及定制化

Intro

Github 最近推出了很多令人興奮的新功能，最近使用了 Github CodeSpaces，覺得還是挺不錯的，CodeSpaces 相當于自己有了一個云主機，真正實現(xiàn)了云端開發(fā)，CodeSpaces 和 Github 做了很好的集成，可以很方便的針對 Github 項目做修改，而且可以根據(jù)自己的需要自定義服務器配置和環(huán)境，很多開源項目已經(jīng)集成了 CodeSpaces 的支持，可以很方便的在線開發(fā)。

使用示例

我們以 asp.net core 的項目為例，來建一個 Codespaces，ASP.NET Core 已經(jīng)實現(xiàn)了較好的 Codespaces 支持，我們可以直接使用 Codespaces 來對 ASP.NET Core 的源碼進行編譯和貢獻。

Github 針對 CodeSpaces 提供了支持，在原來克隆倉庫的地方多了一個使用 Codespaces 的選項

新建之后，就會開始創(chuàng)建一個容器來運行我們的 codespace

在上面的截圖中可以看到，我們也可以在本地的 VSCode 中打開 codespace，這需要我們本地 VSCode 安裝一個 Github CodeSpaces 插件即可，但是既然要云端開發(fā)在本地打開干嘛呢，還是完全在云端更能體現(xiàn)其優(yōu)勢吧

等待容器構建完成后就會進入到我們的 codespace 中，第一次創(chuàng)建的話會執(zhí)行一個腳本，執(zhí)行完成后，我們就可以編譯自己想要編譯的項目了，這里我選擇了一個較小的一個項目 Localization 項目，在 對應的目錄下執(zhí)行 dotnet build 來編譯項目，可以看到成功編譯通過了

如果你要給微軟提 PR，就可以很方便的進行編譯測試自己的變更，完全是在云端進行，不需要在本地安裝任何環(huán)境，而且在創(chuàng)建 Codespace 之后也不需要安裝任何環(huán)境，在創(chuàng)建 Codespace 的過程中就完成所需環(huán)境的安裝配置(通常要提 PR 的話，需要先 Fork 原始的項目，在自己 Fork 的項目上創(chuàng)建 Codespace，然后再來修改和提交更新)

再回到 asp.net core 項目之后，我們就可以在 Codespaces 處看到我們剛才創(chuàng)建的 Codespace 了，我們再次打開就不再需要重新創(chuàng)建了，之前做的變更也會保留下來

定制 CodeSpaces

Codespaces 默認的配置會支持絕大多數(shù)語言，會安裝很多很多環(huán)境，針對大多數(shù)項目來說是可以拿來即用的，但是對于某一些項目可能支持不太好，比如說，現(xiàn)在默認是沒有 .NET 6 的 SDK 的，.NET 6 目前還是預覽版，目前默認配置并沒有 .NET 6 的環(huán)境，如果你的項目是 .NET 6 的，那可能就要自定義 Codespace 的環(huán)境了

Codespace 是以容器技術為基礎的，運行在微軟的 Azure 虛擬機之上的，第一次根據(jù)配置創(chuàng)建容器之后會把當前項目克隆下來并根據(jù)配置初始化 VS Code，安裝必要的插件等

要自定義 Codespace 的配置，有多種方式，整體環(huán)境配置就是配置容器，有三種方式，可以直接指定要使用的鏡像，也可以提供一個自定義的 Dockerfile 去構建，也可以通過 docker-compose 來創(chuàng)建一個稍微復雜一些的環(huán)境

而且我們可以配置 VS Code 需要的插件，還可以暴露端口到公網(wǎng)上

要自定義 Codespace 的配置，我們可以通過在項目根目錄下創(chuàng)建一個 .devcontainer 目錄，在此目錄下創(chuàng)建一個 devcontainer.json 配置所需的配置，具體的配置項目可以參考下面的示例和 ?VS Code 的文檔 <https://code.visualstudio.com/docs/remote/devcontainerjson-reference>

如果不確定配置是不是正確，可以在本地用 VS Code 來測試，需要安裝 Remote Container 插件，然后在 Remote Container 中打開項目即可測試了

Samples

Docker-Image

首先我們來看一個最簡單的示例，自定義鏡像，示例配置如下：

{"image":?"mcr.microsoft.com/dotnet/sdk:6.0",//?Install?needed?extensions"extensions":?["ms-dotnettools.csharp","davidanson.vscode-markdownlint"] }

上面的 image 就是指定我們使用鏡像，extensions 是我們 VS Code 中想要安裝的插件

Dockerfile

再來看一個 Dockerfile 的示例，在 .devcontainer 目錄中添加一個 Dockerfile

FROM?mcr.microsoft.com/dotnet/sdk:6.0-alpine RUN?apk?add?git

devcontainer.json

{"name":?"CodeSpace","dockerFile":?"Dockerfile",//?Install?needed?extensions"extensions":?["ms-dotnettools.csharp","davidanson.vscode-markdownlint"] }

上面的 dockerFile 就是配置的自定義 Dockerfile（也可以使用 build.dockerfile 來指定 Dockfile, 默認的 Dockerfile 構建時上下文是配置文件所在目錄，如果需要可以配置 context 或者 build.context 來配置構建上下文）

Docker-compose

接著我們來看一個 docker-compose 的示例，和 Dockerfile 類似的，我們在 .devcontainer 目錄下添加一個 docker-compose.yml 文件

version:?'3.7'services:dev-container:image:?mcr.microsoft.com/dotnet/sdk:6.0-alpinevolumes:-?..:/workspace:cacheddepends_on:-?redislinks:-?"redis:redis"environment:-?'App_ConnectionStrings__Redis=redis'???command:?/bin/sh?-c?"while?sleep?1000;?do?:;?done"redis:image:?redis:6.2-alpine

然后在 ?devcontainer.json 文件中配置使用 docker-compose

{"name":?"CodeSpace","service":?"dev-container","dockerComposeFile":?[????"docker-compose.yml"],"extensions":?["ms-dotnettools.csharp"] }

這里項目里依賴 redis，所以在 compose 文件中聲明了一個 redis 容器，這樣我們在代碼里也可以使用這個 redis 來做測試了

Port-forward

我們也可以指定 port-forward，這樣就可以通過一個公網(wǎng)域名來訪問 codespace 里的服務了，配置示例如下 forwardPorts

{"name":?"Codespace","dockerFile":?"Dockerfile","forwardPorts":?[80,?5000],?//?[codespace-id]-[port].githubpreview.dev"extensions":?["ms-dotnettools.csharp","davidanson.vscode-markdownlint"] }

使用 dotnet run 運行項目之后，就可以通過公網(wǎng)訪問了

可以看到 5000 端口當前是 active 的，我們就可以通過 5000 端口對應的鏈接來訪問了(如果想要臨時添加某一個端口，直接通過上面的 Add Port 來配置就可以了)，效果如下：

這樣就有了一個公網(wǎng)可以訪問的服務了

More

Codespaces 標準化了開發(fā)環(huán)境，其他人需要編譯時不需要再安裝這個安裝那個，使用同樣的環(huán)境開發(fā)運行就可以了，統(tǒng)一了開發(fā)環(huán)境，而且基于云端，性能還不錯，即使沒有電腦在身邊，甚至也是可以通過手機來操作的，非常的方便，而且環(huán)境都是配置好的，去網(wǎng)吧寫個代碼還要裝環(huán)境呢，這下好了，啥環(huán)境都不用裝了

如果你的開源項目也希望別人功能來參與功能，強烈推薦為你的項目提高較好的 CodeSpaces 貢獻體驗，現(xiàn)在 ASP.NET Core、?.NET Runtime?、StackExchange.Redis 以及其他很多開源項目已經(jīng)提供了?CodeSpaces 的支持，上面的示例也是來自于我的幾個開源項目配置，可以參考文末的參考鏈接

目前個人用戶有數(shù)量限制，如果達到限制了可以刪除之前的 Codespace, 所有的 Codespaces 可以在 https://github.com/codespaces 看到

Codespaces 還有很多功能強大的配置就不一一細說了，可以自己去了解一下

References

• https://github.com/features/codespaces

• https://docs.github.com/en/codespaces/getting-started/quickstart

• https://docs.github.com/en/codespaces/getting-started/deep-dive

• https://code.visualstudio.com/docs/remote/create-dev-container#_use-docker-compose

• https://github.com/microsoft/vscode-dev-containers

• https://code.visualstudio.com/docs/remote/devcontainerjson-reference

• https://www.telerik.com/blogs/introduction-github-codespaces

• https://github.com/WeihanLi/dotnet-httpie/blob/dev/.devcontainer/devcontainer.json

• https://github.com/WeihanLi/SparkTodo/tree/master/.devcontainer

• https://github.com/WeihanLi/WeihanLi.Redis/tree/dev/.devcontainer

• https://code.visualstudio.com/docs/remote/containers-tutorial

• https://code.visualstudio.com/docs/remote/containers

• https://docs.github.com/en/codespaces/customizing-your-codespace/personalizing-codespaces-for-your-account#dotfiles

• https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結

以上是生活随笔為你收集整理的Github CodeSpaces 使用及定制化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。