Reactjs 如何在Github页面中使用环境变量？

我想将我的

create react app

项目部署到GitHub页面。但我有几把秘密钥匙。如何在我的React应用程序中管理这些键？

要使用环境变量，通常遵循的方法是：

• 不要把它们公开
• 在开发/生产时将其保存在本地，并在

  .gitignore

  文件中忽略
• 使 静态构建应用程序，然后将其部署到任一github 网页或任何其他静态网站主机

使用

create react app

时，您可以在根文件夹中创建

.env

。

.env

文件的结构应遵循以下键值结构：-

REACT_APP_SECRET_CODE1=dev123
REACT_APP_SECRET_CODE2=prod456

---

文件中的键应以

REACT\u APP

作为前缀，您可以使用这些键访问应用程序中的变量。例如，

process.env.REACT\u APP\u SECRET\u code

，如果它们是真正的秘密，因此不应该在存储库中，那么就没有办法用github页面来管理它们

---

如果您可以将它们放在存储库中，然后将它们放在.env中，并通过process.env进行访问

您可以将项目部署到Heroku上，在那里您可以设置密钥。

编辑6/7 参考@alicia jasmine

“React纯粹是一个前端框架。React可访问的所有内容（即使您通过构建步骤将其嵌入）稍后都将在前端代码中可见，并且可以找到相对基本的人。要真正保密，您必须在服务器端安装一些东西！”

下面的答案实际上将公开GitHub上的gh页面分支中的密钥，并且可以通过开发者控制台中的网络选项卡访问密钥

原始答案 我还使用了

create react app

，我发现这可以通过使用GitHub secret设置自定义CI脚本来实现。（设置后，可以在项目中使用类似的环境变量。）

const apiKey=process.env.REACT\u APP\u apiKey
const apiSecret=process.env.REACT\u APP\u apiSecret

要向存储库添加机密，请转到存储库的

设置>机密

，单击

添加新机密

。在下面的屏幕截图中，我添加了两个环境变量：

REACT\u APP\u APIKey

和

REACT\u APP\u APISecret

注意：所有要使用create react app访问的环境变量都需要以

react\u app

作为前缀

在你准备好你的秘密后，你可以看看，它是关于如何在推送时添加你自己的动作

要设置动作脚本，请转到您的存储库>动作，单击您自己的设置工作流，然后粘贴到帖子中提供的脚本中，或者查看下面的我的脚本

我使用以下脚本访问我在GitHub secret上设置的2个环境变量。（您可以通过

${{secrets.REACT_APP_APIKey}}

访问在脚本中设置的机密）

设置脚本后，任何推送到

master

分支机构。推送任何提交后，可以在操作状态查看部署状态

你可以看到我很难弄明白。。。这么多失败的尝试哈哈。无论如何，希望这能有所帮助：）

您可以使用这样的方法从GitHub机密添加环境变量。这解决了我的问题。

我支持

但我建议将gh页面YML更新为

还要看一看，因为我花了几个小时来找出解决方案

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@4.0.0
        with:
          branch: gh-pages
          folder: front-app/dist

---

您好，我完成了所有步骤，但是我无法访问process.env.anyvariable。刚刚编辑：您应该将环境变量放在构建步骤下的

env:

下。我已经创建了一个dev文件和prod文件（用于密钥），但是在这个CI测试期间，构建失败，因为它找不到dev文件，解决方法是什么？您好，今天早上，我试着删除了这些秘密，并重新设置了它们，现在一切正常！通过手动分配，我的意思是在我的操作中，我有如下内容：``env:REACT\u APP\u APIKey:2 `这是正确显示值的REACT\u APP\u APISecret:${{secrets.REACT\u APP\u APISecret}}`这个不是``它现在正在处理这些机密，所以感谢您的回复@安东城thx。在所有的失败之后，我终于能够使用secrets中的env变量部署我的gh页面分支。然而github出人意料地再次撤销了我的“PERSONA\u ACCESS\u TOKEN”。当我查看错误提交时，它显示我的令牌再次以纯文本显示。我很困惑为什么会发生这种事。我天真的猜测是：我们在构建阶段得到了env，然后部署了它，这是不是意味着我们仍然将普通机密放在构建文件夹中，然后将其推出？这是正确的脚本：使用

运行脚本构建
将变量放在构建步骤下，建议使用与原始帖子要求的不同的平台根本没有帮助。你可以删除你的答案并恢复你的积极状态我不知道为什么这得到了否决票，因为它所说的一切都是正确的，就本地开发而言，这取决于您如何部署。例如，如果您正在部署构建目录（这些值将被烘焙，这可能是不需要的），或者如果您正在使用github操作或其他操作，当构建远程进行时，您需要在那里单独设置环境变量。但尽管如此，我的答案并没有帮助，我仍在寻找将环境变量传递给react应用程序的方法。我已经尝试过dotenv lib，但它也不起作用
name: Deploy to GitHub Pages
    on:
      push:
        branches:
          - master
    jobs:
      build-and-deploy:
        runs-on: ubuntu-latest
        steps:
        - name: Checkout
          uses: actions/checkout@v1

        - name: Build
          run: |
            npm install
            npm run-script build
          env:
            REACT_APP_INSTAGRAM_ACCESS_TOKEN: ${{ secrets.REACT_APP_INSTAGRAM_ACCESS_TOKEN }}
            REACT_APP_SMTP_SECURE_TOKEN: ${{ secrets.REACT_APP_SMTP_SECURE_TOKEN }}

        - name: Deploy
          uses: JamesIves/github-pages-deploy-action@releases/v3
          with:
            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN_KEY }}
            BRANCH: gh-pages
            FOLDER: dist

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@4.0.0
        with:
          branch: gh-pages
          folder: front-app/dist