我可以将环境变量从Gitlab .gitlab-ci.yml传递到React应用程序吗? [英] Can I pass environment variables from Gitlab .gitlab-ci.yml to a React app?
问题描述
我正在尝试使用gitlab CI管道动态设置环境变量. 我要实现的目标是根据要部署的阶段(阶段,产品)注入正确的API密钥和URL.
I'm trying to set environment variables dynamically using the gitlab CI pipeline. What I am trying to achieve is to inject the right API keys and URLs depending on the stage I am deploying to (stage, prod).
In my React app I access the variables using process.env.REACT_APP_APPSYNC_URL
as decribed in the react documentation.
到目前为止,我已经尝试在 gitlab用户界面并在我的.gitlab-ci.yml
文件中引用它们(请参见下面的代码).
So far I have tried setting the variables in the gitlab UI and referencing them in my .gitlab-ci.yml
file (see code below).
不幸的是,我无法以这种方式访问变量,因此我将非常感谢您的帮助.
Unfortunately I cannot access the variables this way, so I would be very thankful for any help.
我刚刚开始使用CI/CD和不同的环境,所以如果我通常在这里使用不好的方法,请告诉我!
I'm just getting started on CI/CD and different environments, so if I am generally using a bad approach here please let me know!
这是.gitlab-ci.yml:
Here's the .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
干杯!
推荐答案
This line from CRA docs is important: The environment variables are embedded during the build time. So set the variables before running build command.
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"
这篇关于我可以将环境变量从Gitlab .gitlab-ci.yml传递到React应用程序吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!