如何在Github Page中使用环境变量？

Question

如何在Github Page中使用环境变量？

reactjsgithubgithub-pagescreate-react-app

38

我想将我的create-react-app项目部署到GitHub页面。但是我有一些秘密密钥。我该如何在我的React应用程序中管理这些密钥？

- Ebru Gulec

6个回答

8

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

你可以像这样使用GitHub secrets添加环境变量。这解决了我的问题。

- DreamsOfImran

这是正确的脚本：将变量放在“run-script build”构建步骤下。 - Anton Cheng

5

我支持此答案（上文）

但建议更新gh-pages YML到版本4

另外请查看环境变量解决方案，因为我花了好几个小时才找到解决方法

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

- Alexey Nikonov

但是尽管如此，我的答案并没有帮助到他们，我仍在寻找一种将环境变量传递给React应用程序的方法。我已经尝试过dotenv库，但它也没有起作用。 - Alexey Nikonov

4

使用环境变量时，通常需要遵循以下步骤：

不要将其公开暴露在外
在开发/生产时将其保留在本地，并在 .gitignore 文件中忽略它
生成应用程序的静态构建文件，然后将其部署到 Github Pages 或任何其他静态网站托管平台上。

在使用 create-react-app 进行开发时，你可以通过在项目根目录下创建 .env 文件来使用环境变量。该文件的结构应该遵循以下的键值对结构：

REACT_APP_SECRET_CODE1=dev123
REACT_APP_SECRET_CODE2=prod456

文件中的键应该以REACT_APP为前缀，你可以使用这些键来访问应用程序中的变量。例如：process.env.REACT_APP_SECRET_CODE，它将具有值dev123。

- Shashank Shekhar

我不知道为什么这篇文章会被踩，因为它所说的一切都是正确的，就本地开发而言，它取决于你如何部署。例如，如果你正在部署一个构建目录（这些值将被固定下来，可能是不可取的），或者如果你正在使用 GitHub Actions 或其他类似工具，在那里你需要单独设置环境变量，因为构建是在远程进行的。 - ckot

答案正确地解释了如何使用环境变量，但这个问题是关于 GitHub Pages 的。由于你不能像在服务器上那样简单地将 .env 文件放入文件夹中，所以需要另一种解决方案。GitHub 提供了一些方法，可以将密钥传递给部署在 GitHub Pages 页面上的应用程序。 - undefined

4

如果它们真的是机密的，所以不应该在代码库中，那么就无法通过github-pages进行管理。

如果您可以接受将它们放入代码库中，请将它们放在.env文件中，并通过process.env进行访问。

- mhhollomon

-7

你可以将你的项目部署在Heroku上，你也可以在那里设置你的秘密密钥。

- Tomas

1

建议使用与原帖要求不同的平台并没有任何帮助。 - Jasmeet Singh

2

您可以删除答案并恢复积极状态。 - Alexey Nikonov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anton Cheng · Accepted Answer

2020年6月编辑

参考 @alicia-jasmine

"React 是一个纯前端框架。所有能被 React 访问到的内容（即使是通过构建步骤嵌入的）最终都会出现在前端代码中，对于相对基础的人来说是很容易找到的。如果你真的想保密，一定要在服务器端实现！"

以下回答将实际上“暴露了 GitHub 上 gh-page 分支中的密钥”，并且这些密钥可以通过开发者工具中的网络选项卡访问。

原始回答

我也在使用 create-react-app，我发现这可以通过自定义 CI 脚本和 GitHub 私有设置来完成。（设置后，你可以在项目中像这样使用环境变量。）

const apiKey = process.env.REACT_APP_APIKey
const apiSecret = process.env.REACT_APP_APISecret

要向您的仓库添加一个秘密，前往您的仓库的 设置 > 秘密，点击 添加新的秘密。在下面的截图中，我添加了 2 个环境变量: REACT_APP_APIKey 和 REACT_APP_APISecret。

注意：您想要在 create-react-app 中访问的所有环境变量都需要以 REACT_APP 为前缀。

当您准备好您的秘密后，您可以查看此文章，它是关于如何在推送时添加自己的操作的。

要设置您的操作脚本，前往您的仓库 > 操作，然后点击 设置工作流程，并粘贴文章提供的脚本或查看下面的脚本。

我使用以下脚本访问我在 GitHub 秘密中设置的 2 个环境变量。（您可以通过 ${{ secrets.REACT_APP_APIKey }} 访问您在脚本中设置的秘密。）

name: CI

on:
  push:
    branches:
      - master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    
    - name: Checkout
      uses: actions/checkout@v1

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

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

设置脚本后，任何对master分支的推送都会触发该操作。提交后，您可以在“操作状态”中查看部署状态。

我尝试多次，很难搞明白...不过希望这会有所帮助 :)