无法访问环境机密变量，将其从GH页传递到ReactApp [英] cannot access environment secrets variables passing it from GH-pages to ReactApp

问题描述

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

I'm trying to use environment variables in ReactApp deploying at Github-pages.

该变量是通过 process.env 添加的，并以文档规定的 REACT_APP 开头

The variable is added through process.env and starts with REACT_APP as docs prescribe

export default class WeatherService {
  constructor() {
    this.API_WEATHER_URL = process.env.REACT_APP_DEV_SERVER_URL + 'api/weather';
  }

使用 GitHub Actions yml

和 .env

but the app gets wrong values from GitHub Secrets.

但是应用程序从GitHub Secrets获取了错误的值.

查看GH页面上的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/"

At the same time when I build locally with npm run build. React successfully replaces the env. variables

与此同时，当我使用 npm run build 在本地进行构建时.React成功替换了env.变量

习惯用于将不同的环境设置用作api dev服务器中的

• development (127.0.0.1:5000) and
• production (username.cloudTech.com/api).

• 开发(127.0.0.1:5000)和
• 生产(username.cloudTech.com/api).

我已经尝试使用 env-cmd 和 dotenv lib，但这两个都不起作用

---

更新:

UPDATE:

如果我通过 REACT_APP_ENV ='username.cloudTech.com/api' npm脚本-它会成功传递此变量:

If I pass REACT_APP_ENV='username.cloudTech.com/api' npm script - it passes this variable successfully:

"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的答案的更新.我引用了我的话:

UPDATE on @OldPro`s answer. I've quoted my line:

run: |
  cd front-app
  touch .env
  echo 'REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}' >> .env

，但是在JS ch中，该值仍然为空:

but the value is still empty in JS ch:

我也尝试了@peterevans的答案

I've tried also the answer of @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

不幸的是，变量是相同的

unfortunately the variable is the same

更新

我确定我的方法有效，因为如果我在 YML 中对变量进行硬编码，则该变量可以正常工作，并且可以在我的Appv中轻松访问

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

 - 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

BUT I STILL LOOKING FOR solution how to pass variable from GH-Secrets

推荐答案

我发现有两种方法:

• 存储库秘密 可以设置设置-> 秘密-> 新存储库密码

• Repository Secrets may be set Settings->Secrets->New repository secret

环境秘密 可能会创建设置-> 环境-> 新环境-> 添加秘密

Environment Secrets may be created Settings->Environments->New environment->Add secret

并在工作描述中添加下一个参数:环境:您想要的环境与我的代码一样

and add to job description next argument: environment: your-wanted-env as it is in my code

环境秘密在工作描述中需要其他参数:

Environment Secrets needs additional argument in job description:

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页传递到ReactApp的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！