如何使用開發容器為ChatGPT啟用GitHub Codespaces？

OpenAI最近推出了一項名為ChatGPT外掛的測試功能。從本質上講，這項功能使第三方工具能夠與GPT模型互動。為了幫助開發者為ChatGPT建立自己的外掛，OpenAI推出了一個快速入門庫作為指南。為了進一步提高可訪問性，OpenAI的開發者倡導者Logan Kilpatrick聯絡了使用基於瀏覽器或基於雲的整合開發環境（IDE）的技術專家。Logan的目標是使開發者能夠在本地或使用基於瀏覽器的IDE（如CodeSandbox和Replit）使用快速啟動庫。這樣一來，開發者可以直接在他們的瀏覽器中構建和試驗外掛，而不需要克隆資源庫。幸運的是，名單上的一個基於雲的環境是GitHub Codespaces。Logan向我提出了他的目標，我很興奮地接受了這個挑戰。

我對將GitHub Codespaces加入快速啟動倉庫感到興奮，有三個主要原因：

• 我將獲得ChatGPT外掛的使用權，我想這些外掛的等待名單是永無止境的。
• 我將獲得在不熟悉的環境中配置GitHub Codespaces的經驗。我對GitHub Codespaces的經驗只限於基於JavaScript的專案。
• 我是個書呆子。

上週，我正式提交了一個拉取請求，為專案啟用GitHub Codespaces。Codespaces團隊已經審查了它，我現在正在等待OpenAI團隊做同樣的事情。同時，我將分享我在整個經歷中所學到的東西，希望你也能更多地瞭解GitHub Codespaces!

先決條件：

這不一定是一個你應該一步步遵循的教程，但如果你確實想遵循它，你將需要獲得以下工具。

• ChatGPT賬戶
• ChatGPT外掛
• GitHub賬戶
• 瞭解GitHub Codespaces的目的可能會有幫助。你可以從我之前的博文中瞭解它。

GitHub Codespaces的簡短總結

GitHub Codespaces允許你在託管在雲端的容器中進行編碼。這有助於開發人員更快地上崗，在任何裝置上編碼，並在一個一致的環境中編碼。我認為這個特定的ChatGPT快速入門外掛庫的最大好處是，開發人員可以嘗試外掛的功能，而不需要在本地克隆專案或執行任何設定指令碼的麻煩。他們可以在不切換上下文和不離開GitHub的情況下進行嘗試。最重要的是，他們不需要做任何設定。注意：你可以在GitHub Codespaces中開啟任何專案。GitHub Codespaces的使用者介面可以類似於你最喜歡的IDE–比如Visual Studio Code或JetBrains，但它只是在你的瀏覽器中。你還可以配置GitHub Codespaces來安裝所有的依賴項並執行專案，以減少開發者開始工作的時間。

下面是我在為這個專案設定GitHub Codespaces時採取的步驟和學到的經驗：

Step 1: 讓專案在本地執行

在配置GitHub Codespaces之前，我需要回答的第一個問題是： _這個專案是如何工作的？最終的結果是什麼？_

我按照倉庫的 README.md 中的本地設定說明找到了答案。說明很簡單：安裝所需的軟體包，然後執行該專案。隨後，伺服器將在本地的 localhost:5003 上執行。

在ChatGPT中，我選擇了 “develop your own plugin” 選項。

按照指示，我向ChatGPT提供了伺服器執行的本地地址 – localhost:5003。

經過這一切，我能夠利用這個外掛，用ChatGPT建立一個簡單的待辦事項清單。

如果你想試試，請檢視這裡的README。

在整個過程中，我注意到這個專案沒有前端，所以我只有一個目標–當任何人在程式碼空間中開啟這個專案時，伺服器應該執行。

Step 2: 在GitHub程式碼空間中開啟儲存庫

這一步可以確保我所做的任何改動都與 GitHub Codespaces 實際相容。倉庫中的程式碼可以在 GitHub Codespaces 中直接訪問，但如果沒有配置，它就不會開始執行我的專案或安裝依賴。因此，下一步是新增一個名為devcontainer.json的配置檔案。

Step 3: 新增一個開發容器

開發容器，俗稱dev容器，是Docker容器，為專案設定了一個定製環境。我可以用一個dev容器來自動：

• 安裝必要的擴充套件
• 參考環境變數
• 轉發埠
• 安裝依賴項
• 執行我的專案
• 執行指令碼
• 還有更多

你可以通過開啟Visual Studio Code命令面板新增一個預設的開發容器。這個預設的配置檔案包含了你需要的基本專案，以使專案執行。要開啟Visual Studio Code命令調色盤，使用以下鍵盤快捷鍵：（Shift+Command+P / Ctrl+Shift+P）。然後，搜尋 “Add dev container configuration files” 的選項。

它將提示你指定專案的語言，因為每個開發容器都略有不同，取決於語言、框架、版本和其他環境因素。在這個案例中，該專案是基於Python的，所以我們會選擇Python。

不幸的是，我沒有聽從建議，通過命令調板新增開發容器。相反，在我的專案的根部，我建立了一個名為.devcontainer的資料夾。在該資料夾中，我建立了一個名為devcontainer.json的檔案。我從一個過去的 Python 專案中複製並貼上了一個開發容器到 devcontainer.json 中。我這樣做是因為開發容器的例子包括如何利用postAttachCommand和postCreateCommand的例子。然而，這是一個很大的錯誤，我不建議這樣做，因為我最後複製和貼上了不同的行，我認為這是任意的，但它們影響了專案，我不得不刪除這些行。

我的建議是使用命令調色盤來新增一個赤裸裸的開發容器，然後再從那裡進行定製。

下面是我們的模板devcontainer.json檔案的樣子：

我的建議是使用命令面板來新增一個原始的開發容器，然後從那裡進行定製。

這是我們的模板 devcontainer.json 檔案的樣子：

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
"name": "Python 3",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/python:0-3.11-bullseye",
"features": {
"ghcr.io/devcontainers-contrib/features/coverage-py:2": {}
}
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "pip3 install --user -r requirements.txt",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}

Step 4: 定製開發容器

在這一點上，版本庫現在有一個開發容器，但它仍然不執行或安裝任何東西，因為這個開發容器只是模板，它對我的專案需要自動執行的東西一無所知。

安裝依賴項

基於本地的設定，這個專案的第一步是通過執行這個命令來安裝依賴項：

pip install -r requirements.txt

我需要讓GitHub Codespaces執行這個命令，這樣開發者就不必手動執行它了。我在 postCreateCommand 中加入了這一行。 postCreateCommand 負責在容器被建立後執行命令。這一行看起來像這樣：

postCreateCommand: pip install -r requirements.txt

所以現在，我的開發容器看起來像這樣：

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
"name": "Python 3",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/python:0-3.11-bullseye",
"features": {
"ghcr.io/devcontainers-contrib/features/coverage-py:2": {}
}
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "pip install -r requirements.txt",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}

埠轉發

在dev容器中，有一個選項可以定義一個容器在本地可用的埠列表。從本地設定中，我看到首選埠是 localhost:5003，所以我把它新增到 devcontainer.json 檔案中的 forwardedPorts 陣列中。

下面是這一行的樣子：

"forwardPorts": [5003],

下面是我的 devcontainer.json 檔案的樣子：

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
"name": "Python 3",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/python:0-3.11-bullseye",
"features": {
"ghcr.io/devcontainers-contrib/features/coverage-py:2": {}
}
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [5003],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "pip install -r requirements.txt",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}

執行專案

要在本地執行專案，開發者必須手動執行：python main.py，但我希望GitHub Codespaces能代替它。我在devcontainer.json檔案中使用postAttachCommand屬性來執行這個命令。

postAttachCommand使指令碼在客戶端連線到程式碼空間後在終端執行。這是我新增的一行：

"postAttachCommand": “python main.py”

下面是我的 devcontainer.json 檔案的樣子：

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
"name": "Python 3",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/python:0-3.11-bullseye",
"features": {
"ghcr.io/devcontainers-contrib/features/coverage-py:2": {}
}
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [5003],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "pip install -r requirements.txt",
“postAttachCommand”: “python main.py”
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}

Step 5: 通過重建容器進行測試

我對我的開發容器做了所有這些改變，但我需要檢查它是否真的能工作，所以我通過Visual Studio Code命令調色盤重建了我的容器，並選擇了 “Rebuild container” 的選項。

重建完成後，我看到Codespace自動安裝了所需的軟體包，並在localhost:5003上執行伺服器。它還為我把埠轉發到一個隨機生成的URL上，看起來像是這樣的：

https://USERNAME-CODESPACE-NAME-vrpqrxxrx7x2rxx-5003.preview.app.github.dev

我把隨機生成的URL複製並貼上到ChatGPT中，但我收到錯誤資訊，說ChatGPT找不到清單檔案，也無法安裝該外掛。

Step 6: 除錯

埠可見性

我瞭解到，ChatGPT找不到清單的原因之一是我的轉發埠是私有的，所以ChatGPT無法訪問程式碼。幸運的是，我可以通過右鍵點選埠，將可見性從 “private” 切換到 “public”，手動改變埠可見性。

我檢查了一下，看看是否有辦法讓GitHub Codespaces自動將這個埠設定為公共埠。然而，在我與GitHub Codespaces交談後，我瞭解到沒有簡單的方法可以做到這一點，而且可能導致潛在的安全漏洞，所以我決定使用者可以手動操作。

更新檔案

我遇到的另一個問題是，有兩個檔案指定了URL localhost:5003。這些檔案的名稱是 openapi.yaml 和 .known/ai-plugin.json 。然而，我的新URL是不同的。它現在類似於一個隨機生成的URL，看起來像這樣：https://USERNAME-CODESPACE-NAME-vrpqrxxrx7x2rxx-5003.preview.app.github.dev.

我覺得我陷入了僵局，我有兩個選擇：

• 我可以讓開發人員手動更新這些檔案，以匹配他們新生成的埠。他們只需要按照README.md中的指示去做。我對這個方案的問題是，它讓GitHub程式碼空間感覺很笨拙。使用者已經需要更新埠的可見性，現在他們又要更新檔案。(Boo, tomato, tomato, tomato）。我想把GitHub Codespaces表現得最好。
• 或者我可以編輯原始碼，把 localhost:5003 替換成 https://${CODESPACE_NAME}-5003.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}這樣的文字。然而，這將破壞那些選擇仍然在本地開發外掛的開發者的體驗。

我聯絡了Codespaces團隊尋求幫助。他們建議我寫一個指令碼，如果在 Codespace 中開啟版本庫，動態更新這些特定檔案中的 url。我寫的指令碼看起來像這樣：

#!/bin/bash
set -e
# Determine the value of SITE_HOST based on whether the project is opened in a Codespace
if [ -n "$CODESPACE_NAME" ]; then
SITE_HOST="https://${CODESPACE_NAME}-5003.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}"
# Replace "localhost:5003" with the value of SITE_HOST in the ai-plugin.json file
sed -i "s#http://localhost:5003#${SITE_HOST}#g" .well-known/ai-plugin.json
# Replace "localhost:5003" with the value of SITE_HOST in the openapi.yaml file
sed -i "s#http://localhost:5003#${SITE_HOST}#g" openapi.yaml
fi

我沒有讓開發者手動執行這個指令碼，而是通過在devcontainer.json檔案中新增以下內容，使我的程式碼空間自動執行它：

"postAttachCommand": ".devcontainer/addcodespacename.sh && python main.py",

現在，在程式執行之前，程式碼空間將執行這個shell指令碼並更新檔案以使用正確的URL。

下面是我的devcontainer.json的樣子：

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
"name": "Python 3",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/python:0-3.11-bullseye",
"features": {
"ghcr.io/devcontainers-contrib/features/coverage-py:2": {}
}
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [5003],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "pip install -r requirements.txt",
"postAttachCommand": ".devcontainer/addcodespacename.sh && python main.py",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}

我重建了容器進行測試，一切都像預期的那樣工作!

Step 7: 有利可圖的東西

在建立程式碼空間後開啟重要檔案

這不是必須的，但我認為在程式碼空間建立後開啟兩個最重要的檔案會很方便。因為這是一個新的專案，而且只是一個新的概念，我想讓人們容易瀏覽這個專案。而我知道在 devcontainer.json 中有一個叫做 openFiles 的屬性可以處理這個問題

下面是我新增的幾行：

"customizations": {
"codespaces": {
"openFiles": [
".well-known/ai-plugin.json",
"openapi.yaml"
]
}
}
}

下面是我的 devcontainer.json 檔案在這一點上的樣子：

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
"name": "Python 3",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/python:0-3.11-bullseye",
"features": {
"ghcr.io/devcontainers-contrib/features/coverage-py:2": {}
}
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [5003],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "pip install -r requirements.txt",
"postAttachCommand": ".devcontainer/addcodespacename.sh && python main.py",
// Configure tool-specific properties.
"customizations": {
"codespaces": {
"openFiles": [
".well-known/ai-plugin.json",
"openapi.yaml"
]
}
}
}
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}

Step 8: 清理

一切都在按我想要的方式工作，現在我只想清理任何未使用的屬性和混亂的註釋。

這就是我最終的devcontainer.json檔案的樣子：

// For format details, see https://aka.ms/devcontainer.json.
{
"name": "ChatGPT Quickstart Plugins",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/python:0-3.11",
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [
5003
],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "pip install -r requirements.txt",
"postAttachCommand": ".devcontainer/addcodespacename.sh && python main.py",
"customizations": {
"codespaces": {f
"openFiles": [
".well-known/ai-plugin.json",
"openapi.yaml"
]
}
}
}

下一步是什麼？

我將等待OpenAI團隊批准或建議對我的拉取請求進行修改。我很期待看到它被合併！我很樂意為開源專案貢獻更多的開發容器，讓那些想改善專案入職體驗的人能夠在GitHub程式碼空間內進行專案工作。（via Rizèl Scarlett）