无法访问将其从 GH 页面传递到 ReactApp 的环境秘密变量

IT技术 node.js reactjs deployment github-pages github-actions
2021-05-15 04:09:38

我正在尝试在 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。变量

环境变量替换为 react

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

  • 开发 (127.0.0.1:5000)
  • 生产(用户名.cloudTech.com/api)

我已经尝试过使用env-cmddotenv 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"
    ...
}

然后瞧。

部署的react应用程序中的环境变量


更新@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-Secrets传递变量

4个回答

更新

在您的更新中,您说

我确信我的方法是有效的,因为如果我在 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

正如预期的那样,它产生了这个输出(注意***是在原始输出中,因为 GitHub 会自动审查秘密):

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

我发现有两种方法:

  • Repository Secrets 可以设置Settings -> Secrets -> New repository secret

  • 可以创建环境秘密设置->环境->新环境->添加秘密

    并在工作描述中添加下一个参数:environment: your-wanted-env as it is in my code

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您的react应用程序还需要文件中的其他内容吗?我对 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