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

Question

我想在Github页面上部署我的 create-react-app 项目到GitHub页面。但我有几个密匙。我如何在React应用中管理这些密钥？

Answer 1

已编辑 67

参考 @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个env变量。REACT_APP_APIKey 和 REACT_APP_APISecret.

通知: 所有你想用create-react-app访问的环境变量都需要在前缀加上 REACT_APP.

当你准备好你的秘密后，你可以看看。此职位，这是关于如何在推送时添加自己的Action。

要设置你的Action脚本，去你的版本库> 动作，点击 自行设置工作流程，然后粘贴到帖子中提供的脚本中，或者看看我下面的脚本。

我使用下面的脚本来访问我在GitHub上设置的2个环境变量secret。(你可以通过以下方式访问你在脚本中设置的秘密) ${{ 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分支。推送完提交后，你可以在行动状态中查看部署状态。

你可以看到我有多难搞清楚......这么多失败的尝试lol。总之，希望这能帮到你：)

Answer 2

如果他们是 真正 的秘密，所以不应该放在版本库中，那么就没有办法用github-pages来管理。

如果你同意把它们放在仓库里，那就把它们放在.env里，然后通过process.env访问。

Answer 3

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 4

要使用环境变量，一般遵循的方法是。

• 不向公众公开环境变量
• 在开发生产的时候要保持在本地，而忽略了在 .gitignore 文件。
• 将您的应用程序静态化，然后将其部署到githubpages或任何其他静态网站主机。

在使用 create-react-app 你有他们的好处，你可以创造 .env 在你 根 文件夹的结构。.env 文件应遵循以下键值结构：------。

REACT_APP_SECRET_CODE1=dev123
REACT_APP_SECRET_CODE2=prod456

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

Answer 5

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