REACT APP 无法访问谷歌云运行环境变量

Posted 2023-02-22

【中文标题】REACT APP 无法访问谷歌云运行环境变量

【英文标题】：REACT APP not access the google cloud run environment variables

【发布时间】：2021-03-27 15:25:25

【问题描述】：

我使用 GitLab ci 作为我的 CI/CD 工具。我正在将 dockerized react 应用程序部署到云运行，但我无法访问在云运行上声明的环境变量。谢谢！

Dockerfile

# build environment
FROM node:8-alpine as react-build

WORKDIR /app
COPY . ./

RUN npm install
RUN npm run build

# server environment
FROM nginx: alpine
COPY nginx.conf /etc/nginx/conf.d/configfile.template

COPY --from=react-build /app/build /usr/share/nginx/html

ENV PORT 8080
ENV HOST 0.0.0.0
EXPOSE 8080
CMD sh -c "envsubst '\$PORT' < /etc/nginx/conf.d/configfile.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"

gitlab-ci.yml

default:
  image: google/cloud-sdk:alpine
  before_script:
    - gcloud config set project PROJECTID
    - gcloud auth activate-service-account --key-file $GCP_SERVICE_CREDS
stages:
  - staging
  - production

staging:
  stage: staging
  environment:
    name: staging
  only:
    variables:
      - $DEPLOY_ENV == "staging"
  script:
    - gcloud builds submit --tag gcr.io/PROJECTID/REPOSITORY
    - gcloud run deploy REPOSITORY --image gcr.io/PROJECTID/REPOSITORY --platform managed --region us-central1 --allow-unauthenticated 

production:
  stage: production
  environment:
    name: production
  only:
    variables:
      - $DEPLOY_ENV == "production"
  script:
    - gcloud builds submit --tag gcr.io/PROJECTID/REPOSITORY
    - gcloud run deploy REPOSITORY --image gcr.io/PROJECTID/REPOSITORY --platform managed --region us-central1 --allow-unauthenticated --set-env-vars NODE_ENV=production

【问题讨论】：

您要在哪个环境中访问该变量？您的“暂存”应用程序上没有配置环境变量。

在暂存和生产中，我的环境变量都在云运行服务中声明

【参考方案1】：

据我了解，您希望访问 GCP 上声明的环境变量，例如 $GCP_SERVICE_CREDS、$PROJECTID、$REPOSITORY 和 Gitlab 管道上的其他变量。

为此，请转到 Gitlab 设置，然后单击 CI/CD。到达那里后，单击变量前面的展开按钮，然后添加各种 GCP 变量及其值。

【讨论】：

S，这些变量 $GCP_SERVICE_CREDS、$PROJECTID、$REPOSITORY 都在 GitLab 上，正在成功访问，但谷歌云上的 ENV 像 REACT_APP_API_END_POINT 一样运行是未定义的。

您必须在部署期间使用gcloud run deploy 命令使用--set-env-vars REACT_APP_API_END_POINT = 定义变量

@UsamaKhan 正确的语法是--set-env-vars "KEY1=VALUE1"，键和值之间不应有空格。请仔细检查并更新您的帖子，以便我们查看您在gcloud run deploy 上的配置方式。

这些环境变量是硬编码在云运行服务中的“编辑和部署新修订版”有一个设置环境变量的选项。我的节点后端有一项云运行服务，一项服务用于反应前端，但在节点的情况下，它选择了环境变量，但对于反应它没有选择。

【参考方案2】：

感谢 Guillaume Blaquiere，因为此答案基于他在 this thread 的帖子。

根据 React documentation:

环境变量在构建时嵌入。由于 Create React App 生成一个静态 HTML/CSS/JS 包，它不可能在运行时读取它们。要在运行时读取它们，您需要将 HTML 加载到服务器的内存中并在运行时替换占位符。

最有可能发生的情况是您向用户公开静态文件，而用户获取文件并将其加载到浏览器中，如下所示：

console.log("REDIRECT", process.env.REACT_APP_API_END_POINT)

这会返回null，因为用户的浏览器执行了 javascript 并读取了当前环境中的 env 变量：用户的浏览器。您应该有一个在 Cloud Run 上运行的执行以使用环境变量。如果代码在用户端（在他们的浏览器中）运行，环境变量将不会出现。