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

Question

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

Answer 1

2020 年 6 月编辑

参考@alicia-jasmine

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

以下答案实际上会在 GitHub 上的 gh-page 分支中公开密钥，并且可以通过开发者控制台中的网络选项卡访问这些密钥。

原始答案

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

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

要向您的存储库添加密钥，请转到您的存储库的Setting > Secrets，单击Add a new secret。在下面的屏幕截图中，我添加了 2 个环境变量：REACT_APP_APIKey 和 REACT_APP_APISecret。

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

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

要设置您的操作脚本，请转到您的存储库 > 操作，单击 自行设置工作流程，然后粘贴帖子中提供的脚本或获取看看下面我的脚本。

我使用以下脚本来访问我在 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 都会触发该操作 分支。推送任何提交后，您可以在操作状态中查看部署状态。

你可以看到我很难弄清楚......这么多失败的尝试哈哈。无论如何，希望这会有所帮助:)

Answer 2

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 机密添加环境变量。这解决了我的问题。

Answer 3

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

如果您可以将它们放在存储库中，则将它们放入 .env 并通过 process.env 访问

Answer 4

我支持this answer (above)

但我建议将 gh-pages YML 更新为 version 4

还可以看看environment variables solution，因为我花了好几个小时才找到解决方案

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

Answer 5

要使用环境变量，一般的做法是：

• 不要将它们暴露给公众
• 在开发/生产时将其保留在本地，并在 .gitignore 文件中忽略。
• 制作 静态构建您的应用程序然后将其部署到任一 github 网页或任何其他静态网站主机。

在使用create-react-app 时，您可以享受到他们的好处，您可以在您的root 文件夹中创建.env。 .env 文件的结构应遵循以下键值结构：-

REACT_APP_SECRET_CODE1=dev123
REACT_APP_SECRET_CODE2=prod456

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

Answer 6

您可以在 Heroku 上部署您的项目，您可以在其中设置您的密钥。