無法訪問將其從 GH 頁面傳遞給 ReactApp 的環境機密變量

Question

我正在嘗試在部署在 Github 頁面的 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-app 收到錯誤的 object，而不是我傳遞的內容（“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 dev server in

• 發展（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

更新

在你的更新中，你說

我確定我的方法是有效的，因為如果我在 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

正如預期的那樣，它產生了這個 output（注意***在原始 output 中，因為 GitHub 會自動審查機密）：

（因為我想保留格式，所以違反了關於發布文本的規則）。 這個 output 最重要的是最后的 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文件中。 這是否足以滿足您的需求將取決於您操作的 rest。

Answer 2

我發現有兩種方法：

• 可以設置存儲庫秘密設置->秘密->新存儲庫秘密

• 可以創建環境秘密設置->環境->新環境->添加秘密

  並在工作描述中添加下一個參數： environment: your-wanted-env因為它在我的代碼中

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

Answer 3

嘗試使用 GitHub Actions 推薦的方式設置環境變量。

將“存儲變量”步驟更改為如下所示：

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

Answer 4

你的反應應用程序需要.env文件中的其他內容嗎？ 我對 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