node.js - 无法访问将其从 GH-pages 传递到 React App 的环境 secret 变量

Question

我正在尝试在 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 操作 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 运行构建 . 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

但 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

不幸的是，变量是相同的

更新
我确信我的方法是有效的，因为如果我在 中对变量进行硬编码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- secret

Answer 1

更新
在您的更新中，您说

I'm sure my approach is working because if I hardcode the variable in YML it works as should and can be easily accessed in my Appv

我进行了自己的测试。我创建了一个名为 DEV_SERVER_URL 的 secret 并将其设置为 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 会自动审查 secret ):

(违反关于发布文本的规则，因为我想保留格式)。此输出的重要之处在于最后的 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

这意味着 secret 正在保存在 .env 中。文件按预期。所以我必须得出结论，你的问题是 secret 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 中文件。这是否足以满足您的需求将取决于您的其余操作。