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

Question

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

Answer 1

Edited June 2020

Reference @alicia-jasmine

"React is purely a front-end framework. Everything accessible to React (even if you embed it through a build step) will later be visible in the front-end code and someone relatively basic to find. To really keep them secret you MUST have something server side!"

The following answer will actually expose the key in the gh-page branch on GitHub, also the keys will be accessible through the network tab in the developer console.

Original Answer

I'm also using create-react-app, and I found that this can be done by customizing your CI script with GitHub secret settings. (After the setting, you can use environment variables like this in your project.)

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

To add a secret to your repository, go to your repository's Setting > Secrets, click on Add a new secret. In the screenshot below, I added 2 env variables: REACT_APP_APIKey and REACT_APP_APISecret.

Notice: All the environment variable you want to access with create-react-app need to be prefixed with REACT_APP.

After you have your secret ready, you can take a look at this post, it's about how to add your own Action upon push.

To setup your action script, go to your repository > Actions, an click on Setup workflow your self, and paste in the script provided in the post or take a look at mine script below.

I use the following script to access the 2 environment variables I set on GitHub secret. (You can access the secret you set in the script by ${{ 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

After you setup the script, the action will be triggered by any push to master branch. After you push any commits, you can take a look at the deployment status at actions status.

You can see how hard it is for me to figure it out... so many fail attempts lol. Anyway, hope this will help :)

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

我支持这个答案（上）

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

还要看看环境变量解决方案，因为我花了几个小时才找到解决方案

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

Answer 4

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

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

虽然与create-react-app您一起工作有其好处，您可以.env在根文件夹中创建。文件的结构.env应遵循以下键值结构：-

REACT_APP_SECRET_CODE1=dev123
REACT_APP_SECRET_CODE2=prod456

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