我正在尝试在 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';
}
和使用GitHub Actions yml创建的.env
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
- 开发 (127.0.0.1:5000)和
- 生产(用户名.cloudTech.com/api)。
我已经尝试过使用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传递变量