我正在尝试在 Github-pages 上部署的 ReactApp 中使用环境变量。
该变量通过 process.env 添加,并以 REACT_APP 开头,如文档规定
export default class WeatherService {
constructor() {
this.API_WEATHER_URL = process.env.REACT_APP_DEV_SERVER_URL + 'api/weather';
}
和 .env 使用 GitHub Actions yml
创建jobs:
front-build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Store variables
run: |
cd front-app
touch .env
REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }} >> .env
- name: Build
run: |
cd front-app
npm install
npm run-script build
- name: Deploy
...
但应用从 GitHub Secrets 获取错误值。
看到 GH-pages 上的 react-app 收到了错误的对象,而不是我传递的对象(“username.cloudTech.com/api”):
this.API_BLOB_URL = Object({
NODE_ENV: "production",
PUBLIC_URL: "/azure-flask-react",
WDS_SOCKET_HOST: void 0,
WDS_SOCKET_PATH: void 0,
WDS_SOCKET_PORT: void 0,
FAST_REFRESH: !0
}).REACT_APP_DEV_SERVER_URL + "api/blob/"
同时,当我使用 npm run build 在本地构建时。 React 成功替换了 env。变量
用于目的是使用不同的环境设置作为api dev server
我已经尝试使用 env-cmd 和 dotenv 库,但都没有用 >
更新:
如果我通过 REACT_APP_ENV='username.cloudTech.com/api' npm 脚本 - 它成功地传递了这个变量:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:staging": "REACT_APP_FRONT_APP_URL=nikonov91-dev.github.io/azure-flask-react/ npm run build"
...
}
然后瞧。
更新@OldPro 的回答。 我引用了我的台词:
run: |
cd front-app
touch .env
echo 'REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}' >> .env
我也试过@peterevans 的回答
run: |
cd front-app
echo "DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}" >> $GITHUB_ENV
touch .env
echo "REACT_APP_DEV_SERVER_URL=${{ env.DEV_SERVER_URL }}" >> .env
不幸的是变量是相同的
更新
我确信我的方法有效,因为如果我在 YML 中对变量进行硬编码,它会正常工作并且可以在我的 Appv 中轻松访问
- name: Store variables
run: |
cd front-app
touch .env
echo "REACT_APP_DEV_SERVER_URL='https://first-py-app.azurewebsites.net/'" >> .env
和
this.API_BLOB_URL = process.env.REACT_APP_DEV_SERVER_URL + 'api/blob/';
变成
this.API_BLOB_URL = "https://first-py-app.azurewebsites.net/api/blob/"
但我仍在寻找如何从 GH-Secrets
传递变量的解决方案答案 0 :(得分:1)
在您的更新中,您说
<块引用>我确信我的方法有效,因为如果我在 YML 中对变量进行硬编码,它会正常工作并且可以在我的 Appv 中轻松访问
我进行了自己的测试。我创建了一个名为 DEV_SERVER_URL
的机密并将其设置为 https://first-py-app.azurewebsites.net/
然后我运行了这个工作:
jobs:
env-test:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Store variables
run: |
mkdir front-app
cd front-app
touch .env
echo 'REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}' >> .env
- name: Leak variables
run: |
cd front-app
ls -al
cat .env
cat .env | hexdump
它按预期生成了此输出(注意 ***
在原始输出中,因为 GitHub 会自动审查机密):
(违反关于发布文本的规则,因为我想保留格式)。这个输出的重要一点是最后的 hexdump。
$ echo 'REACT_APP_DEV_SERVER_URL=https://first-py-app.azurewebsites.net/' | hexdump -x
0000000 4552 4341 5f54 5041 5f50 4544 5f56 4553
0000010 5652 5245 555f 4c52 683d 7474 7370 2f3a
0000020 662f 7269 7473 702d 2d79 7061 2e70 7a61
0000030 7275 7765 6265 6973 6574 2e73 656e 2f74
0000040 000a
0000041
这意味着机密正按预期保存在 .env
文件中。所以我必须得出结论,你的问题是秘密 DEV_SERVER_URL
要么是空的,要么是你的动作运行器无法访问的。我建议你和我做同样的工作,看看你会得到什么结果。
虽然图片有时可以很好,但它们应该是作为文本包含代码的补充,而不是替代。人们可以搜索和编辑文本,但不能搜索和编辑图片。
根据你的图片,你的GitHub Action包括这样一个步骤:
run: |
cd front-app
touch .env
REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }} >> .env
所以你的第一个问题是上面的最后一行只设置了该步骤的环境变量,对 .env
文件没有任何作用。你可能想或想要的是
run: |
cd front-app
touch .env
echo 'REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}' >> .env
这会将作业放入 .env
文件中。这是否足以满足您的需求将取决于您接下来的行动。
答案 1 :(得分:1)
我发现有两种方法:
存储库秘密 可以设置设置->秘密->新仓库秘密
环境秘密 可以创建设置->环境->新环境->添加秘密
并在工作描述中添加下一个参数:environment: your-wanted-env,因为它在我的代码中
Environment Secrets 需要在 job 描述中附加参数:
jobs:
trying-to-use-environment-secrets:
runs-on: ubuntu-latest
environment: test-env #<---The only difference we need to specify what environment to use for environment secrets
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Store variables
run: |
echo ${{ secrets.DEV_SERVER_URL_FROM_ENVIRONMENT_SECRETS }}
echo "DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL_FROM_REPOSITORY_SECRETS }}"
答案 2 :(得分:0)
尝试使用 GitHub Actions 推荐给 set environment variables 的方式。
将您的“存储变量”步骤更改为如下所示:
- name: Store variables
run: |
echo "REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}" >> $GITHUB_ENV
答案 3 :(得分:0)
.env
文件中是否还有您的 React 应用程序需要的其他内容?我对 ReactJS 项目结构不是很熟悉,但我想知道您为什么不在工作流和 passing the secret in the environment variable declaration 中使用 env
指令,然后直接从 {{1} 访问环境变量}:
npm run build