我想将我的create-react-app项目部署到 GitHub Pages。但我有一些秘密钥匙。如何在我的 React 应用程序中管理这些密钥？
如何在 Github Page 中使用环境变量？
IT技术
reactjs
github
github-pages
create-react-app
2021-03-31 09:22:49
6个回答
2020 年 6 月编辑
参考@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
要将秘密添加到您的存储库，请转到您的存储库的Setting > Secrets，单击Add a new secret。在下面的屏幕截图中，我添加了 2 个 env 变量：REACT_APP_APIKey和REACT_APP_APISecret.
注意：所有要通过 create-react-app 访问的环境变量都需要以REACT_APP.
在你准备好你的秘密后，你可以看看这篇文章，它是关于如何在推送时添加你自己的动作。
要设置您的操作脚本，请转到您的存储库 >操作，单击您自己的设置工作流，然后粘贴帖子中提供的脚本或查看下面的我的脚本。
我使用以下脚本访问我在 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
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
设置脚本后，任何推送到master
分支都会触发该操作。推送任何提交后，您可以在操作状态查看部署状态。
你可以看到我很难弄清楚......这么多失败的尝试，哈哈。无论如何，希望这会有所帮助:)
如果它们真的是秘密的，所以不应该在存储库中，那么没有办法使用 github-pages 来管理它。
如果您同意将它们放在存储库中，则将它们放在 .env 中并通过 process.env 访问
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 机密中添加环境变量。这解决了我的问题。
要使用环境变量，遵循的一般方法是：
- 不让他们暴露在公众面前
- 在开发/生产时将其保留在本地并在
.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，这将具有valuedev123