[英]cannot access environment secrets variables passing it from GH-pages to ReactApp
我正在尝试在部署在 Github 页面的 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 收到错误的 object,而不是我传递的内容(“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 在本地构建时,运行 build 。 React 成功替换了 env。 变量
习惯的目的是使用不同的环境设置作为 api dev server in
我已经尝试过使用env-cmd和dotenv lib,但都没有用
更新:
如果我通过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传递变量
在你的更新中,你说
我确定我的方法是有效的,因为如果我在 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
正如预期的那样,它产生了这个 output(注意***
在原始 output 中,因为 GitHub 会自动审查机密):
(因为我想保留格式,所以违反了关于发布文本的规则)。 这个 output 最重要的是最后的 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 操作包括如下步骤:
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
文件中。 这是否足以满足您的需求将取决于您操作的 rest。
我发现有两种方法:
可以设置存储库秘密设置->秘密->新存储库秘密
可以创建环境秘密设置->环境->新环境->添加秘密
并在工作描述中添加下一个参数: environment: your-wanted-env因为它在我的代码中
Environment Secrets需要在职位描述中添加额外的参数:
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 }}"
尝试使用 GitHub Actions 推荐的方式设置环境变量。
将“存储变量”步骤更改为如下所示:
- name: Store variables
run: |
echo "REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}" >> $GITHUB_ENV
你的反应应用程序需要.env
文件中的其他内容吗? 我对 ReactJS 项目结构不是很熟悉,但我想知道为什么您不在工作流程中使用env
指令并在环境变量声明中传递秘密,然后直接从npm run build
访问环境变量:
jobs:
front-build-and-deploy:
runs-on: ubuntu-latest
env:
REACT_APP_DEV_SERVER_URL: ${{ secrets.DEV_SERVER_URL }}
steps:
...
# $REACT_APP_DEV_SERVER_URL is now available to any steps in the job
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.