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

Question

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

变量通过process.env添加，以[=开头124=] 作为文档规定

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 运行 build 在本地构建时。 React 成功替换了 env。变量

习惯的目的是使用不同的环境设置作为api开发服务器在

开发(127.0.0.1:5000)和
制作 (username.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[= 中轻松访问96=]

- 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
传递变量的解决方案

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 的秘密并将其设置为 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 操作包括如下步骤：

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 文件中。这是否足以满足您的需求将取决于您的其余操作。

Answer 2

尝试使用 GitHub Actions 推荐给 set environment variables 的方式。

将“存储变量”步骤更改为如下所示：

      - name: Store variables
        run: |
          echo "REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}" >> $GITHUB_ENV

Answer 3

.env 文件中是否还有您的 React 应用程序所需的其他内容？我不是很熟悉 ReactJS 项目结构，但我想知道为什么你不在工作流程中使用 env 指令和 passing the secret in the environment variable declaration，然后直接从 [=13= 访问环境变量]:

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

Answer 4

我发现有两种方法：

存储库秘密 可以设置 Settings->Secrets->New repository secret
环境秘密 可以创建设置->环境->新建环境->添加密文

并在工作描述中添加下一个参数：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 }}"

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

cannot access environment secrets variables passing it from GH-pages to ReactApp

deployment

node.js

github-pages

reactjs

github-actions

更新

原回答