Github CodeSpaces 使用及定制化
Github CodeSpaces 使用及定制化
Intro
Github 最近推出了很多令人興奮的新功能，最近使用了 Github CodeSpaces，覺(jué)得還是挺不錯(cuò)的，CodeSpaces 相當(dāng)于自己有了一個(gè)云主機(jī)，真正實(shí)現(xiàn)了云端開(kāi)發(fā)，CodeSpaces 和 Github 做了很好的集成，可以很方便的針對(duì) Github 項(xiàng)目做修改，而且可以根據(jù)自己的需要自定義服務(wù)器配置和環(huán)境，很多開(kāi)源項(xiàng)目已經(jīng)集成了 CodeSpaces 的支持，可以很方便的在線開(kāi)發(fā)。
使用示例
我們以 asp.net core 的項(xiàng)目為例，來(lái)建一個(gè) Codespaces，ASP.NET Core 已經(jīng)實(shí)現(xiàn)了較好的 Codespaces 支持，我們可以直接使用 Codespaces 來(lái)對(duì) ASP.NET Core 的源碼進(jìn)行編譯和貢獻(xiàn)。
Github 針對(duì) CodeSpaces 提供了支持，在原來(lái)克隆倉(cāng)庫(kù)的地方多了一個(gè)使用 Codespaces 的選項(xiàng)
新建之后，就會(huì)開(kāi)始創(chuàng)建一個(gè)容器來(lái)運(yùn)行我們的 codespace
在上面的截圖中可以看到，我們也可以在本地的 VSCode 中打開(kāi) codespace，這需要我們本地 VSCode 安裝一個(gè) Github CodeSpaces 插件即可，但是既然要云端開(kāi)發(fā)在本地打開(kāi)干嘛呢，還是完全在云端更能體現(xiàn)其優(yōu)勢(shì)吧
等待容器構(gòu)建完成后就會(huì)進(jìn)入到我們的 codespace 中，第一次創(chuàng)建的話會(huì)執(zhí)行一個(gè)腳本，執(zhí)行完成后，我們就可以編譯自己想要編譯的項(xiàng)目了，這里我選擇了一個(gè)較小的一個(gè)項(xiàng)目 Localization 項(xiàng)目，在 對(duì)應(yīng)的目錄下執(zhí)行 dotnet build 來(lái)編譯項(xiàng)目，可以看到成功編譯通過(guò)了
如果你要給微軟提 PR，就可以很方便的進(jìn)行編譯測(cè)試自己的變更，完全是在云端進(jìn)行，不需要在本地安裝任何環(huán)境，而且在創(chuàng)建 Codespace 之后也不需要安裝任何環(huán)境，在創(chuàng)建 Codespace 的過(guò)程中就完成所需環(huán)境的安裝配置(通常要提 PR 的話，需要先 Fork 原始的項(xiàng)目，在自己 Fork 的項(xiàng)目上創(chuàng)建 Codespace，然后再來(lái)修改和提交更新)
再回到 asp.net core 項(xiàng)目之后，我們就可以在 Codespaces 處看到我們剛才創(chuàng)建的 Codespace 了，我們?cè)俅未蜷_(kāi)就不再需要重新創(chuàng)建了，之前做的變更也會(huì)保留下來(lái)
定制 CodeSpaces
Codespaces 默認(rèn)的配置會(huì)支持絕大多數(shù)語(yǔ)言，會(huì)安裝很多很多環(huán)境，針對(duì)大多數(shù)項(xiàng)目來(lái)說(shuō)是可以拿來(lái)即用的，但是對(duì)于某一些項(xiàng)目可能支持不太好，比如說(shuō)，現(xiàn)在默認(rèn)是沒(méi)有 .NET 6 的 SDK 的，.NET 6 目前還是預(yù)覽版，目前默認(rèn)配置并沒(méi)有 .NET 6 的環(huán)境，如果你的項(xiàng)目是 .NET 6 的，那可能就要自定義 Codespace 的環(huán)境了
Codespace 是以容器技術(shù)為基礎(chǔ)的，運(yùn)行在微軟的 Azure 虛擬機(jī)之上的，第一次根據(jù)配置創(chuàng)建容器之后會(huì)把當(dāng)前項(xiàng)目克隆下來(lái)并根據(jù)配置初始化 VS Code，安裝必要的插件等
要自定義 Codespace 的配置，有多種方式，整體環(huán)境配置就是配置容器，有三種方式，可以直接指定要使用的鏡像，也可以提供一個(gè)自定義的 Dockerfile 去構(gòu)建，也可以通過(guò) docker-compose 來(lái)創(chuàng)建一個(gè)稍微復(fù)雜一些的環(huán)境
而且我們可以配置 VS Code 需要的插件，還可以暴露端口到公網(wǎng)上
要自定義 Codespace 的配置，我們可以通過(guò)在項(xiàng)目根目錄下創(chuàng)建一個(gè) .devcontainer 目錄，在此目錄下創(chuàng)建一個(gè) devcontainer.json 配置所需的配置，具體的配置項(xiàng)目可以參考下面的示例和 ?VS Code 的文檔 <https://code.visualstudio.com/docs/remote/devcontainerjson-reference>
如果不確定配置是不是正確，可以在本地用 VS Code 來(lái)測(cè)試，需要安裝 Remote Container 插件，然后在 Remote Container 中打開(kāi)項(xiàng)目即可測(cè)試了
Samples
Docker-Image
首先我們來(lái)看一個(gè)最簡(jiǎn)單的示例，自定義鏡像，示例配置如下：
{"image":?"mcr.microsoft.com/dotnet/sdk:6.0",//?Install?needed?extensions"extensions":?["ms-dotnettools.csharp","davidanson.vscode-markdownlint"] }上面的 image 就是指定我們使用鏡像，extensions 是我們 VS Code 中想要安裝的插件
Dockerfile
再來(lái)看一個(gè) Dockerfile 的示例，在 .devcontainer 目錄中添加一個(gè) Dockerfile
FROM?mcr.microsoft.com/dotnet/sdk:6.0-alpine RUN?apk?add?gitdevcontainer.json
{"name":?"CodeSpace","dockerFile":?"Dockerfile",//?Install?needed?extensions"extensions":?["ms-dotnettools.csharp","davidanson.vscode-markdownlint"] }上面的 dockerFile 就是配置的自定義 Dockerfile（也可以使用 build.dockerfile 來(lái)指定 Dockfile, 默認(rèn)的 Dockerfile 構(gòu)建時(shí)上下文是配置文件所在目錄，如果需要可以配置 context 或者 build.context 來(lái)配置構(gòu)建上下文）
Docker-compose
接著我們來(lái)看一個(gè) docker-compose 的示例，和 Dockerfile 類似的，我們?cè)?.devcontainer 目錄下添加一個(gè) 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"] }這里項(xiàng)目里依賴 redis，所以在 compose 文件中聲明了一個(gè) redis 容器，這樣我們?cè)诖a里也可以使用這個(gè) redis 來(lái)做測(cè)試了
Port-forward
我們也可以指定 port-forward，這樣就可以通過(guò)一個(gè)公網(wǎng)域名來(lái)訪問(wèn) codespace 里的服務(wù)了，配置示例如下 forwardPorts
{"name":?"Codespace","dockerFile":?"Dockerfile","forwardPorts":?[80,?5000],?//?[codespace-id]-[port].githubpreview.dev"extensions":?["ms-dotnettools.csharp","davidanson.vscode-markdownlint"] }使用 dotnet run 運(yùn)行項(xiàng)目之后，就可以通過(guò)公網(wǎng)訪問(wèn)了
可以看到 5000 端口當(dāng)前是 active 的，我們就可以通過(guò) 5000 端口對(duì)應(yīng)的鏈接來(lái)訪問(wèn)了(如果想要臨時(shí)添加某一個(gè)端口，直接通過(guò)上面的 Add Port 來(lái)配置就可以了)，效果如下：
這樣就有了一個(gè)公網(wǎng)可以訪問(wèn)的服務(wù)了
More
Codespaces 標(biāo)準(zhǔn)化了開(kāi)發(fā)環(huán)境，其他人需要編譯時(shí)不需要再安裝這個(gè)安裝那個(gè)，使用同樣的環(huán)境開(kāi)發(fā)運(yùn)行就可以了，統(tǒng)一了開(kāi)發(fā)環(huán)境，而且基于云端，性能還不錯(cuò)，即使沒(méi)有電腦在身邊，甚至也是可以通過(guò)手機(jī)來(lái)操作的，非常的方便，而且環(huán)境都是配置好的，去網(wǎng)吧寫個(gè)代碼還要裝環(huán)境呢，這下好了，啥環(huán)境都不用裝了
如果你的開(kāi)源項(xiàng)目也希望別人功能來(lái)參與功能，強(qiáng)烈推薦為你的項(xiàng)目提高較好的 CodeSpaces 貢獻(xiàn)體驗(yàn)，現(xiàn)在 ASP.NET Core、?.NET Runtime?、StackExchange.Redis 以及其他很多開(kāi)源項(xiàng)目已經(jīng)提供了?CodeSpaces 的支持，上面的示例也是來(lái)自于我的幾個(gè)開(kāi)源項(xiàng)目配置，可以參考文末的參考鏈接
目前個(gè)人用戶有數(shù)量限制，如果達(dá)到限制了可以刪除之前的 Codespace, 所有的 Codespaces 可以在 https://github.com/codespaces 看到
Codespaces 還有很多功能強(qiáng)大的配置就不一一細(xì)說(shuō)了，可以自己去了解一下
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
總結(jié)
以上是生活随笔為你收集整理的Github CodeSpaces 使用及定制化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： StackExchange.Redis
- 下一篇： Win11开始大范围推送！