How to use environment variables in Github Page?

问题

I want to deploy my create-react-app project to GitHub Pages. But I have a few secret keys. How can I manage these keys inside my React app?

回答1:

Edited 6/7

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 :)

回答2:

If they are truly secret, and so should not be in a repository, then there isn't a way to manage that with github-pages.

If you are okay with having them in a repository, then put them in .env and access via process.env

回答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

You can use like this to add your environment variables from GitHub secrets. This solved my problem.

回答4:

To use environment variables, the general approach which is followed is to:

Not expose them to the public
Keep it local at the time of development/production and ignore in .gitignore file.
Make the static build out of your application Then deploy it to either github pages or any other static website host.

While working with create-react-app you have their benefits, you can create .env in your root folder. The structure for the .env file should follow below key-value structure:-

REACT_APP_SECRET_CODE1=dev123
REACT_APP_SECRET_CODE2=prod456

Keys in the file should be prefixed with REACT_APP and you can use these keys to access the variable in your application. For eg. process.env.REACT_APP_SECRET_CODE, this will have the value dev123

回答5:

You can deploy your project on Heroku where you can set up your secret key.

来源：https://stackoverflow.com/questions/53648652/how-to-use-environment-variables-in-github-page

标签

reactjs

github

github-pages

create-react-app