在 Visual Studio Code 中使用 GitHub 代碼空間將 IDE 作為代碼

已發表: 2021-11-24

對於開發人員來說，最困難的事情之一就是開始一個已經在進行中的項目。

經常發生新項目的需求迫使我們修改 SDK 的版本以及我們在本地安裝的工具來調試環境，這讓我們失去了幾天，直到一切都按預期工作。

如果我們考慮處於 beta 或預覽階段的版本，事情會變得更加複雜。 為了防止這種情況發生，我想向您介紹 GitHub Codespaces，它不僅可以讓您在容器內生成您的應用程序所需的開發環境，還可以讓您隨時隨地在任何設備上進行開發。

讓我們開始！

什麼是 GitHub 代碼空間？

Github 代碼空間是一個可以從瀏覽器訪問的雲環境，並具有開發專用代碼所需的所有功能。

你可能已經看過 GitHub 公告，每次你在一個倉庫中並點擊句號“鍵”。 將打開一個帶有相關存儲庫的 Web 編輯器。

但是，您將無法運行終端，因為它只是一個 Web 編輯器並且沒有後端機器。 有時這可能綽綽有餘，但想像一下，您需要運行一個環境或編譯一個項目，但您手頭沒有滿足需求的系統（iPad、Surface Go 等）。

GitHub Codespaces 通過允許您在雲中運行 IDE 來解決這個問題，就像您使用本地系統一樣工作，並且也使用您指定的配置。

注意：此功能僅適用於團隊和企業帳戶。

示例代碼

在這個例子中，我將使用一個非常簡單的 Node.js 應用程序：

 const express = require('express'); const app = express(); const port = 8080; app.use(express.static('public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); })

上面的代碼具有以下結構：

代碼結構

你可以在本地啟動這個項目而沒有任何問題，只要你安裝了 Node.js、git 和對這個語言的項目有用的 VS Code 擴展。 您可能還想使用 Nodemon 之類的工具，它會自動刷新應用程序。

當您不僅使用此配置，而且使用許多其他配置（例如使用 .NET Core、Python、Docker 或 Kubernetes 進行開發）時，問題就會出現，這會讓您安裝更多並不總是需要的工具和擴展，並且它們最終可能會損害開發環境的性能。

問題不僅限於您自己的表現。 如果其他人加入團隊並需要使用啟動應用程序所需的工具和框架來讓他們的系統“準備好”，那麼他們也會損失幾個小時，這將損害團隊的整體績效（如果你是，情況會更糟）使用不同的操作系統工作）。

使用遠程容器

Visual Studio Code 提供了一個名為Remote Containers或 Dev Containers 的擴展，它允許您在容器內生成應用程序所需的開發環境。 這樣，您團隊中所有從事項目的開發人員都會自動擁有相同的開發環境。

這將使啟動項目的體驗盡可能敏捷，而且如果您是定義環境的人，您可以在同一台機器上使用不同的配置為每個項目分離多個工作環境。 酷吧？

我該如何開始？

要使用此功能，您必須在機器上安裝 Docker，因為容器將在其上運行。 還需要安裝Remote Containers擴展，幫助我們搭建開發環境。

您需要做的第一件事是在根目錄中創建一個名為.devcontainer的文件夾。 這是擴展將嘗試識別的一個，以了解它是否具有安裝包含其中指示的容器的配置。

在其中，您必須至少有一個名為devcontainer.json 的文件，該文件將具有環境配置。

對於這個例子，我使用了以下內容：

 { "name": "dev-demo", "dockerFile": "Dockerfile", "forwardPorts": [ 8080 ], "settings": { "workbench.colorTheme": "Visual Studio Light" }, "containerEnv": { "NODE_ENV": "development", }, "extensions": [ "coenraads.bracket-pair-colorizer-2", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "formulahendry.auto-close-tag", "mikestead.dotenv", "christian-kohler.path-intellisense", "davidanson.vscode-markdownlint", "pkief.material-icon-theme", "humao.rest-client" ], "postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh", "postAttachCommand": "nodemon server.js" }

如您所見，它是一個具有不同部分的 JSON：

  • name ：它是開發容器的名稱。 理想情況下，這應該是一個描述性名稱。
  • dockerFile ：它用於指示我們將用於創建環境的 Dockerfile 的名稱。 就我而言，在同一個 .devcontainer 文件夾中，我有一個如下所示：
 FROM node:12.16.1-alpine WORKDIR /code RUN apk update && apk upgrade \ && apk add git bash curl \ && npm install -g nodemon COPY . .

在這個例子中，我使用node: 12.16.1-alpine 圖像只是為了證明我在這個開發環境中的配置與我在本地的配置不同，我使用的是 Node.js 的 14 版。 另一方面，除了我將在開發過程中使用的 Nodemon 模塊之外，我還安裝了一些實用程序，如 git、bash 和 cURL。

  • forwardPorts ：這些是我的應用程序使用的端口，以便我可以從本地機器訪問它們，因此調試很容易。
  • 設置：對於這個例子，當你有多個環境時它非常有用，我已經修改了 Visual Studio Code 主題，所以很明顯我不在 IDE 的那個實例中的本地環境中。 我通常使用深色版本，這裡我設置了淺色版本。
  • containerEnv ：我還添加了一個環境變量，這在開發時通常非常有用。
  • postCreateCommand ：我添加了這個屬性，所以你可以看到在開發容器的生命週期中可以執行命令或腳本。 在這種情況下，此腳本將在創建完成後啟動。 本期內容為：
     #!/bin/bash # this runs in background after UI is available #Remove node_modules folder echo "Remove node_modules folder first" rm -rf node_modules #Install npm dependencies echo "Install dependencies" npm install
  • postAttachCommand：最後，我將 nodemon server.js 命令添加到此屬性，以便每次連接到容器時，默認情況下它都會提升應用程序。

在 devcontainer.json 文件中還有更多選項可以添加，這只是您可以做什麼的一個很小的例子。

既然您知道此文件夾中的所有內容以及定義的配置如何工作，那麼我們如何啟動它？

最簡單的方法是通過這裡的按鈕：

選擇Reopen in Container選項，該過程將開始創建容器和您的自定義 IDE。 結果應如下所示：

最後，在這種情況下，結果將是一個帶有 Light 主題的 Visual Studio Code 窗口，具有特定的 Node.js 版本，選擇了幾個擴展以更舒適地開發，並且我的應用程序已經運行並通過端口 8080 公開。

最好的部分是：此配置在項目存儲庫中進行了版本控制，以便任何成員都可以使用它。 簡直太壯觀了！

現在我們已經看到了這一切，也理解了所有的步驟，刪除.devcontainer文件夾，再次選擇左下角的圖標，再次選擇Reopen in Container ，你會看到這次它讓你在幾個pre - 內置配置。

你不需要從頭開始你的配置，而且你已經知道你必須觸摸哪裡才能完成你的書呆子觸摸。

返回 Github 空間

現在我們將使用我們在 Visual Studio 遠程容器中使用的相同項目，但這次使用 GitHub。 在Code部分完成此操作後，您將擁有一個名為 Codespaces 的新選項：

您可以在此處選擇使用此特定存儲庫所需的機器類型：

選擇機器尺寸

選擇後，創建過程將開始。 它將使用我們為遠程容器創建的 .devcontainer 文件夾的配置來配置環境。

該過程完成後，您將看到 Visual Studio Code 將以 Web 格式顯示並運行應用程序，就像我們在本地系統上所做的那樣。

最後的話

正如你在上面的例子中看到的，使用遠程容器的 Github 代碼空間是我們複製配置和開發環境問題的一個很好的解決方案，它們也是提高我們團隊績效的好方法。

標籤：
  • 開發運營