如何在 Github Page 中使用环境变量? [英] How to use environment variables in Github Page?

问题描述

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

解决方案

2020 年 6 月编辑

参考@alicia-jasmine

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

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

原答案

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

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

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

注意:所有你想通过create-react-app访问的环境变量都需要以REACT_APP为前缀.

准备好你的秘密后，你可以看看

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

名称:CI在:推:分支机构:- 掌握工作:建造:运行: ubuntu-latest脚步:- 名称:结帐用途:动作/结帐@v1- 名称:构建运行: |安装npm 运行脚本构建环境:REACT_APP_APIKey:${{secrets.REACT_APP_APIKey }}REACT_APP_APISecret:${{secrets.REACT_APP_APISecret }}- 名称:部署用途:JamesIves/github-pages-deploy-action@releases/v3和:GITHUB_TOKEN:${{secrets.GITHUB_TOKEN }}分支:gh-pages文件夹:构建

设置脚本后，任何推送到 master 都会触发动作分支.推送任何提交后，您可以在操作状态查看部署状态.

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

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?

解决方案

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

这篇关于如何在 Github Page 中使用环境变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！