无法访问将其从 GH-pages 传递到 React App 的环境秘密变量

我正在尝试在 Github-pages 部署的 ReactApp 中使用环境变量。

该变量是通过添加进程.env并开始于REACT_APP按照文档规定

export default class WeatherService {
  constructor() {
    this.API_WEATHER_URL = process.env.REACT_APP_DEV_SERVER_URL + 'api/weather';
  }

and .env创建于GitHub 操作 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 上的反应应用程序收到错误的对象，而不是我传递的对象（“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 运行构建。 React 成功替换了 env。变量

用于的目的是使用不同的环境设置作为 api dev server 中

• 开发（127.0.0.1:5000） and
• 生产（用户名.cloudTech.com/api）.

我已经尝试过使用env-cmd and dotenvlib但它不起作用

UPDATE:

如果我通过了REACT_APP_ENV='用户名.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

but the value is still empty in JS ch:

我也尝试过@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

不幸的是变量是相同的

UPDATE

我确信我的方法是有效的，因为如果我将变量硬编码在YML它按预期工作，并且可以在我的 Appv 中轻松访问

 - name: Store variables
        run: |
          cd front-app
          touch .env
          echo "REACT_APP_DEV_SERVER_URL='https://first-py-app.azurewebsites.net/'" >> .env

and 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-秘密

我发现有两种方法：

• 存储库秘密可以设置Settings->Secrets->新存储库秘密

• 环境秘密可能会被创建Settings->环境->新环境->添加秘密

  并添加到工作描述的下一个参数：环境：您想要的环境就像我的代码中一样

环境秘密需要额外的参数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 }}"