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

问题描述

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

解决方案

已编辑6/7

参考@ 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 
  

要添加一个对存储库的秘密，请转到存储库的设置>机密，单击添加新机密。在下面的屏幕快照中，我添加了2个环境变量： REACT_APP_APIKey 和 REACT_APP_APISecret 。

通知：您要使用create-react-app访问的所有环境变量都必须加上 REACT_APP 前缀。 / p>

准备好秘密后，您可以看看

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

 名称：CI 
 
上：
推送：
分支机构：
-主
 
职位： 
构建：
 
运行：ubuntu最新
 
步骤：
 
-名称：Checkout 
使用：操作/ checkout @ v1 
 
-名称：生成
运行：| 
 npm install 
 npm运行脚本生成
 env：
 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页
文件夹：build 
 
  

之后设置脚本后，只要按下 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 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 masterbranch. 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中使用环境变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！