Question

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

Answer 1

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 2

我也在使用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。在下面的屏幕快照中，我添加了两个环境变量：REACT_APP_APIKey和REACT_APP_APISecret。

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

准备好机密之后，您可以看看this post，它是关于如何在推送时添加自己的动作的。

要设置动作脚本，请转到存储库> 动作，单击自行设置工作流程，然后粘贴帖子中提供的脚本或看看下面的我的脚本。

我使用以下脚本访问我在GitHub secret上设置的2个环境变量。（您可以通过${{ 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

    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        REACT_APP_APIKey: ${{ secrets.REACT_APP_APIKey }}
        REACT_APP_APISecret: ${{ secrets.REACT_APP_APISecret }}
        BRANCH: gh-pages
        FOLDER: build

设置脚本后，只要按下master就会触发该操作科。推送所有提交后，您可以在操作状态下查看部署状态。

您会发现，要弄清楚我有多难...如此多的失败尝试。无论如何，希望这会有所帮助:)

Answer 3

我支持this answer (above)

但我建议将 gh-pages YML 更新为 version 4

也看看environment variables solution，因为我花了几个小时来找出解决方案

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

Answer 4

如果它们是真正的秘密，因此不应该存在于存储库中，则无法使用github-pages对其进行管理。

如果可以将它们放在存储库中，则可以将它们放入.env并通过process.env进行访问

Answer 5

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

不向公众公开
在开发/生产时将其保留在本地，并在.gitignore文件中忽略。
进行从应用程序静态构建，然后将其部署到任一github 页面或任何其他静态网站托管人。

与create-react-app一起使用时，您可以从中受益，但是可以在 root 文件夹中创建.env。 .env文件的结构应遵循以下键值结构：-

REACT_APP_SECRET_CODE1=dev123
REACT_APP_SECRET_CODE2=prod456

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

Answer 6

您可以在Heroku上部署项目，在其中可以设置密钥。

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

6 个答案: