用GitHub Codespaces安全地儲存環境變數

作為一個開發者的倡導者，我做了很多演示專案來說明我的講座或內容。另外，作為一個混亂的人，我在演示過程中並沒有做好安全儲存環境變數的工作。不止一次，我在流媒體或會議演講中暴露了我的環境變數。幸運的是，像Mayank和Nick這樣的開發者朋友向我介紹了Cloak，這是一個VS Code擴充套件，可以在你不小心分享你的螢幕時隱藏你的環境變數的值。

我最近開發了一個小應用程式，住在GitHub域。開發這個應用程式讓我想起了我以前作為軟體工程師時的所有掙扎。(我並不懷念在最後期限前編碼的壓力）。我遇到的掙扎之一是與合作者分享我的環境變數。我希望我的隊友能在本地試用這個應用程式，這樣他們就可以貢獻程式碼或審查使用者體驗，但我不確定如何告訴他們安全地設定環境變數。

我在Slack中分享環境變數嗎？不，那是不安全的。
我可以在密碼管理器中分享這些變數嗎？當然可以，但現在有些值的格式不好，即RSA金鑰。

我過去經歷過的其他失誤：

我忘了把我的環境檔案新增到我的.gitignore檔案中，所以我不小心把我的環境變數檔案推到了我的版本庫。
我不小心刪除了我的.env檔案，然後不得不生成新的API tokens和secrets。

我相信有很多解決方案可以在沙盒應用程式中安全地儲存環境變數，但GitHub Codespaces對我來說是最有效的！

使用GitHub Codespaces的環境變數的好處

使用GitHub Codespaces的體驗是無縫的，因為它允許倉庫合作者去我的倉庫，開啟Codespaces，並在本地執行程式碼。他們不需要填寫數值，所以我也不需要明確地分享祕密。在幕後，GitHub Codespaces 從倉庫設定中的一個名為 Codespaces Secrets 的儲存中提取這些值。

如何在 GitHub Codespaces 中儲存你的私鑰

為了說明這個例子，我們將使用NASA的API，因為大多數開發者都能訪問它。

Step 1: 生成一個NASA的API金鑰

填寫 https://api.nasa.gov/ 上的表格，申請一個 API 金鑰。你應該在你的電子郵件中收到API金鑰。(儲存這個金鑰，因為我們將在Step 5使用它）。

第2步：使用React Codespaces模板

快速入門模板包括一些最常見的應用程式框架的模板程式碼，包括Next.js、React.js、Django、Express、Ruby on Rails、Preact、Flask和Jupyter Notebook。模板為開發者提供了一個沙盒，在Codespaces中構建、測試和除錯應用程式。這意味著你不必從頭開始進行編碼。我們已經有了一個工作專案，你可以將其提升為你所設想的專案。你可以使用模板來了解開發人員如何結構他們用各種程式語言編寫的專案。而且你可以用它來了解不同的檔案是如何相互溝通的。

例如，我一直想學習更多關於人工智慧和機器學習的知識，但我不知道從哪裡開始。我使用一個Jupyter Notebooks模板來生成人工智慧影象。該模板已經有了我需要的所有工具；我只需要修改幾行程式碼。

在本教程中，我們將導航到https://github.com/codespaces/templates，並選擇React模板。

選擇React模板

Step 3: 等待你的Codespace載入

一旦我們的Codespace被完全載入，你會在一個名為 “Simple Browser” 的標籤上看到你的網路應用的實時預覽。(如果你還沒有看到 “Simple Browser” 標籤，請給它幾分鐘時間來載入）。它應該看起來像下面的圖片：

等待你的Codespace載入

Step 4: 釋出你的Codespace

我們還沒有完成。我們的主要目標是在Codespace中儲存和引用環境變數。然而，只有當我們的Codespace生活在一個資源庫中時，我們才能做到這一點。要做到這一點，我們需要釋出我們的Codespace。採取以下步驟來發布當前的Codespace：

在一個新的標籤中，導航到https://github.com/codespaces。不要擔心離開這個標籤或視窗，因為Codespaces會儲存你的修改。
向下滾動到頁面的底部，你會看到你建立的Codespaces。它可能有一個很傻的名字。GitHub Codespace 會自動為每個 Codespace 生成名稱，作為一種識別形式。我的Codespace被命名為 “ubiquitous acorn”。
點選右側的三個點，選擇 “Publish to new repository”選項。
在這裡，你可以給你的專案起一個更容易識別的名字，使專案公開，並通過 “See repository” 按鈕檢視你的資源庫。
這將引導你進入GitHub上的倉庫。它也會顯示專案中的不同檔案。你可以分享倉庫的連結，讓其他開發者與你合作或探索你的程式碼庫

Step 5: 儲存你的環境變數

在你的新版本庫中，導航到Settings > Secrets and variables > Codespaces。你也可以通過導航到一個類似這樣的URL來找到正確的頁面： https://github.com/REPLACE_WITH_GITHUB_OWNER/REPLACE_WITH_GITHUB_REPO/settings/secrets/codespaces

你登陸的頁面應該如下圖所示：

登陸的頁面

讓我們建立兩個版本庫的私鑰：

1. - REACT_APP_NASA_ENDPOINT=https://api.nasa.gov/
  - REACT_APP_NASA_API_KEY= This is where you will add your NASA API key

現在，我們可以使用慣例在我們的程式碼庫中引用這些變數： process.env.{ENVIRONMENT_VARIABLE_NAME}

Step 6: 重新載入你的Codespace

一旦你新增了新的API金鑰，你的Codespaces應該 “Auto” 認識到你向你的Codespaces新增了新的祕密。如果是這樣，你的Codespaces將彈出一個通知，說：”Your codespace secrets have changed. Reload to apply。”

按下 “Reload to apply” 按鈕，這些變化就會生效。

重新載入你的Codespace

Step 7: 安裝axios

Axios是我們用來呼叫NASA API的npm包。在你的Codespace的終端執行這個命令來安裝axios：

npm install --save axios

Step 8: 建立一個新檔案

(這一步我使用了Wayne Fornworth在Medium上的博文。我過去曾使用過NASA的API，但在建立這個檔案時，我覺得有點偷懶。謝謝你，韋恩，謝謝你的博文! )

在你的src目錄下建立一個檔案，名為 HttpClient.js ，然後在該檔案中新增以下幾行程式碼：

(注意：第2行和第3行是指我們通過使用 process.env.{ENVIRONMENT_VARIABLE_NAME} 建立的私鑰。)

import axios from "axios"
const nasaEndpoint = process.env.REACT_APP_NASA_ENDPOINT
const nasaApiKey = process.env.REACT_APP_NASA_API_KEY
axios.interceptors.request.use(
config => {
config.params = config.params ? config.params : {}
const configUrl = config.url
if (configUrl.includes(nasaEndpoint)) {
config.params["api_key"] = nasaApiKey
}
return config
},
error => {
return Promise.reject(error)
}
)
export default {
getApod() {
return axios.get(`${nasaEndpoint}planetary/apod`)
},
}

Step 9: 更新你的App.js檔案

刪除 src/App.js 檔案的當前內容，用以下幾行程式碼替換它：

import React, { useState, useEffect } from "react"
import HttpClient from "./HttpClient"
const App = () => {
const [apod, setApod] = useState({})
useEffect(() => {
HttpClient.getApod().then(apodData => {
setApod(apodData.data)
})
}, [])
return (
<div style={{ maxWidth: 900, padding: 30 }}>
<h1>NASA API</h1>
<h2>Astronomy Picture of the Day</h2>
{apod && (
<article>
<header>
{apod.title} - <i>{apod.date}</i>
</header>
<img src={apod.url} alt="APOD" width="800" height="auto" />
<p>{apod.explanation}</p>
<pre
style={{
overflowX: "auto",
whiteSpace: "pre-wrap",
wordWrap: "break-word",
}}
>
<hr />
{JSON.stringify(apod, null, 2)}
</pre>
</article>
)}
</div>
)
}
export default App

Step 10: 檢查你的創作

如果成功的話，你的簡單的瀏覽器標籤應該呈現出與下面類似的影象：

簡單的瀏覽器標籤

Step 11: 讓其他人也能訪問它!

任何人都可以開啟你的Codespace，但環境變數不會對所有人都有效。為了讓人們看到同樣的結果（比如，為了讓API呼叫發揮作用），你需要把使用者新增為版本庫合作者。如果他們不是版本庫的合作者，他們會說頁面上有一個破碎的影象。檢視GitHub文件，瞭解如何為你的版本庫新增合作者。

任何人都可以開啟你的Codespace

需要記住的事情

這是一個針對NASA每日天文圖片的API呼叫，所以圖片可能會根據你進行這個API呼叫的那一天而有所不同。上圖中的圖片是針對.NET的日期的。
現在，如果有版本庫合作者許可權的人在 Codespace 中開啟你的版本庫，他們可以得到同樣的結果，而不需要填寫環境變數，因為你已經在版本庫的 Codespaces 祕密中儲存了正確的值。
看一下我的版本庫，仔細檢查你的程式碼。請記住，如果你在 Codespace 中開啟這個版本庫，你會看到一個破碎的網頁，因為你不是這個版本庫的合作者。
這種方法最適合在 Codespace 內的本地開發。如果你把程式碼部署到另一個環境，你需要用你的伺服器提供商建議的方法來定義環境變數。
你可以在Codespaces構建和執行之後在Codespaces中使用祕密。例如，可以使用一個祕密：
（1）當從整合終端或ssh會話中啟動一個應用程式時。
（2）在codespace執行後執行的開發容器生命週期指令碼中。有關開發容器生命週期指令碼的更多資訊，請參閱開發容器網站上的文件：規範。
不能使用Codespace的私鑰：
（1）在codespace構建時間（即在Docker檔案或自定義入口點內）。
（2）在開發容器特性內。欲瞭解更多資訊，請參閱開發容器網站上的開發容器規範中的特徵屬性。

（via Rizèl Scarlett）

Codespace 環境變數

用GitHub Codespaces安全地儲存環境變數

使用GitHub Codespaces的環境變數的好處