用GitHub Codespaces安全地存储环境变量

WBOLT_COM 6 月 04, 2023 639 0

作为一个开发者的倡导者，我做了很多演示项目来说明我的讲座或内容。另外，作为一个混乱的人，我在演示过程中并没有做好安全存储环境变量的工作。不止一次，我在流媒体或会议演讲中暴露了我的环境变量。幸运的是，像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）在开发容器特性内。欲了解更多信息，请参阅开发容器网站上的开发容器规范中的特征属性。