当前位置:首页>WordPress资讯>用GitHub Codespaces安全地存储环境变量

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

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

作为一个开发者的倡导者,我做了很多演示项目来说明我的讲座或内容。另外,作为一个混乱的人,我在演示过程中并没有做好安全存储环境变量的工作。不止一次,我在流媒体或会议演讲中暴露了我的环境变量。幸运的是,像Mayank和Nick这样的开发者朋友向我介绍了Cloak,这是一个,可以在你不小心分享你的屏幕时隐藏你的环境变量的值。

我最近开发了一个小应用程序,住在GitHub域。开发这个应用程序让我想起了我以前作为时的所有挣扎。(我并不怀念在最后期限前编码的压力)。我遇到的挣扎之一是与合作者分享我的环境变量。我希望我的队友能在本地试用这个应用程序,这样他们就可以贡献代码或审查用户体验,但我不确定如何告诉他们安全地设置环境变量。

  • 我在Slack中分享环境变量吗?不,那是不安全的。
  • 我可以在中分享这些变量吗?当然可以,但现在有些值的格式不好,即RSA密钥。

我过去经历过的其他失误:

  • 我忘了把我的环境文件添加到我的.gitignore文件中,所以我不小心把我的环境变量文件推到了我的版本库。
  • 我不小心删除了我的.env文件,然后不得不生成新的API tokens和secrets。

我相信有很多解决方案可以在沙盒应用程序中安全地存储环境变量,但GitHub 对我来说是最有效的!

使用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步:使用 Codespaces模板

快速入门模板包括一些最常见的应用程序框架的模板代码,包括Next.js、React.js、、Express、Ruby on Rails、Preact、Flask和Jupyter Notebook。模板为开发者提供了一个沙盒,在Codespaces中构建、测试和调试应用程序。这意味着你不必从头开始进行编码。我们已经有了一个工作项目,你可以将其提升为你所设想的项目。你可以使用模板来了解开发人员如何结构他们用各种编写的项目。而且你可以用它来了解不同的文件是如何相互沟通的。

例如,我一直想学习更多关于人工智能和机器学习的知识,但我不知道从哪里开始。我使用一个Jupyter Notebooks模板来生成人工智能图像。该模板已经有了我需要的所有工具;我只需要修改几行代码。

在本教程中,我们将导航到https://github.com/codespaces/templates,并选择React模板。

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

Step 3: 等待你的Codespace加载

一旦我们的Codespace被完全加载,你会在一个名为 “Simple Browser” 的标签上看到你的应用的实时预览。(如果你还没有看到 “Simple Browser” 标签,请给它几分钟时间来加载)。它应该看起来像下面的图片:

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

Step 4: 发布你的Codespace

我们还没有完成。我们的主要目标是在Codespace中存储和引用环境变量。然而,只有当我们的Codespace生活在一个资源库中时,我们才能做到这一点。要做到这一点,我们需要发布我们的Codespace。采取以下步骤来发布当前的Codespace:

  1. 在一个新的标签中,导航到https://github.com/codespaces。不要担心离开这个标签或窗口,因为Codespaces会保存你的修改。
  2. 向下滚动到页面的底部,你会看到你创建的Codespaces。它可能有一个很傻的名字。GitHub Codespace 会自动为每个 Codespace 生成名称,作为一种识别形式。我的Codespace被命名为 “ubiquitous acorn”。

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

  3. 点击右侧的三个点,选择 “Publish to new repository”选项。

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

  4. 在这里,你可以给你的项目起一个更容易识别的名字,使项目公开,并通过 “See repository” 按钮查看你的资源库。

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

  5. 这将引导你进入GitHub上的仓库。它也会显示项目中的不同文件。你可以分享仓库的,让其他开发者与你合作或探索你的代码库

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

Step 5: 存储你的环境变量

在你的新版本库中,导航到Settings > Secrets and variables > Codespaces。你也可以通过导航到一个类似这样的URL来找到正确的页面: ​​https://github.com/REPLACE_WITH_GITHUB_OWNER/REPLACE_WITH_GITHUB_REPO/settings/secrets/codespaces

你登陆的页面应该如下图所示:

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

让我们创建两个版本库的私钥:

      • 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” 按钮,这些变化就会生效。

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

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 文件的当前内容,用以下几行代码替换它:

Step 10: 检查你的创作

如果成功的话,你的简单的浏览器标签应该呈现出与下面类似的图像:

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

Step 11: 让其他人也能访问它!

任何人都可以打开你的Codespace,但环境变量不会对所有人都有效。为了让人们看到同样的结果(比如,为了让API调用发挥作用),你需要把用户添加为版本库合作者。如果他们不是版本库的合作者,他们会说页面上有一个破碎的图像。查看GitHub文档,了解如何为你的版本库添加合作者。

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

需要记住的事情

  1. 这是一个针对NASA每日天文图片的API调用,所以图片可能会根据你进行这个API调用的那一天而有所不同。上图中的图片是针对.NET的日期的。
  2. 现在,如果有版本库合作者权限的人在 Codespace 中打开你的版本库,他们可以得到同样的结果,而不需要填写环境变量,因为你已经在版本库的 Codespaces 秘密中存储了正确的值。
  3. 看一下我的版本库,仔细检查你的代码。请记住,如果你在 Codespace 中打开这个版本库,你会看到一个破碎的网页,因为你不是这个版本库的合作者。
  4. 这种方法最适合在 Codespace 内的本地开发。如果你把代码部署到另一个环境,你需要用你的提供商建议的方法来定义环境变量。
  5. 你可以在Codespaces构建和运行之后在Codespaces中使用秘密。例如,可以使用一个秘密:
    (1)当从集成终端或ssh会话中启动一个应用程序时。
    (2)在codespace运行后运行的开发容器生命周期脚本中。有关开发容器生命周期脚本的更多信息,请参阅开发容器网站上的文档:规范。
  6. 不能使用Codespace的私钥:
    (1)在codespace构建时间(即在Docker文件或自定义入口点内)。
    (2)在开发容器特性内。欲了解更多信息,请参阅开发容器网站上的开发容器规范中的特征属性。

(via Rizèl Scarlett)

原文地址:https://www.wbolt.com/securely-store-environment-variables-with-github-codespaces.html

WordPress资讯

12个预建经济型WordPress小型企业主题模板

2024-1-22 1:10:53

WordPress资讯

10+用于提升网站图像性能的WordPress插件

2024-1-22 1:10:56

个人中心
今日签到
有新私信 私信列表
搜索