reactjs - 我可以将环境变量从 Gitlab .gitlab-ci.yml 传递到 React 应用程序吗?
问题描述
我正在尝试使用 gitlab CI 管道动态设置环境变量。我想要实现的是根据我部署到的阶段(阶段、产品)注入正确的 API 密钥和 URL。
在我的 React 应用程序中,我使用react 文档process.env.REACT_APP_APPSYNC_URL
中的描述访问变量。
到目前为止,我已经尝试在gitlab UI中设置变量并在我的文件中引用它们.gitlab-ci.yml
(参见下面的代码)。
不幸的是,我无法以这种方式访问变量,因此我将非常感谢您的帮助。
我刚刚开始使用 CI/CD 和不同的环境,所以如果我在这里通常使用不好的方法,请告诉我!
这是 .gitlab-ci.yml:
image: nikolaik/python-nodejs:latest
stages:
- install
- test
- deploy
install:
stage: install
script:
- npm install
- npm run build
artifacts:
untracked: true
only:
- stage
- master
test:
stage: test
dependencies:
- install
script:
- npm run test
artifacts:
untracked: true
only:
- stage
- master
deployDev:
stage: deploy
only:
- stage
dependencies:
- install
- test
script:
- pip3 install awscli
- aws configure set aws_access_key_id "$DEV_AWS_KEY"
- aws configure set aws_secret_access_key "$DEV_AWS_SECRET"
- aws s3 sync ./build/ s3://example.dev
variables:
REACT_APP_COGNITO_REGION: $DEV_COGNITO_REGION
REACT_APP_COGNITO_USER_POOL_ID: $DEV_COGNITO_USER_POOL_ID
REACT_APP_COGNITO_APP_CLIENT_ID: $DEV_COGNITO_APP_CLIENT_ID
REACT_APP_COGNITO_IDENTITY_POOL_ID: $DEV_COGNITO_IDENTITY_POOL_ID
REACT_APP_APPSYNC_URL: $DEV_APPSYNC_URL
REACT_APP_APPSYNC_REGION: $DEV_APPSYNC_REGION
REACT_APP_APPSYNC_AUTHENTIACTION_TYPE: $DEV_APPSYNC_AUTHENTIACTION_TYPE
deployProd:
stage: deploy
only:
- master
dependencies:
- install
- test
script:
- pip3 install awscli
- aws configure set aws_access_key_id "$PROD_AWS_KEY"
- aws configure set aws_secret_access_key "$PROD_AWS_SECRET"
- aws s3 sync ./build/ s3://example.com
干杯!
解决方案
CRA 文档中的这一行很重要:环境变量是在构建时嵌入的。所以在运行构建命令之前设置变量。
image: node:10.16.0-alpine
stages:
- build
- deploy
build_app:
stage: build
script:
- export REACT_APP_SECRET_API_KEY=$API_KEY # set REACT_APP variables before build command
- yarn install
- yarn build
artifacts:
name: "$CI_PIPELINE_ID"
paths:
- build
when: on_success
deploy_app:
stage: deploy
dependencies:
- build_app
script:
- echo "Set deployment variables"
- echo "Deployment scripts"
推荐阅读
- android - 如何调整导航抽屉模板中其他文本的大小?
- python - 在 csv 文件中保存排序值非零
- c++ - 在 C++ 中连接张量 -
- javascript - 应该触发哪个事件,以便在选中单选按钮时发生某些事情?
- excel - 仅在符合条件的单元格中粘贴值
- c++ - cmake错误当文件由EXEC_PROGRAM生成时找不到源文件
- php - 如何根据购物车页面woocommerce中自定义输入字段的值计算价格
- python-3.x - 如何将 Image 的起始轴更改为 pyqtgraph?
- docker - 如何将 Docker Hub 中的父映像部署到 Artifactory Pro?
- python - 在找到不同列的阈值后,如何丢弃 ID 的后续行?