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 Actions 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 应用程序收到了错误的对象，而不是我传递的对象(“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

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

Answer 1

我发现有两种方法:

• 存储库 secret 可以设置设置-> secret ->新存储库 secret

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

  并在职位描述中添加下一个参数:环境:your-wanted-env，就像我的代码中一样

环境 secret 需要在工作描述中附加参数:

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 }}"