文章地址:docker-compose 布署应用nginx中的react应用获取环境变量
npx create-react-app react-nginx-variable
cd react-nginx-variable
通过命令创建.env文件,并写入内容
touch .env
echo "API_URL=https//default.dev.api.com" >> .env
env.sh脚本内容
#!/bin/bash
# Recreate config file
rm -rf ./env-config.js
touch ./env-config.js
# Add assignment
echo "window._env_ = {" >> ./env-config.js
# Read each line in .env file
# Each line represents key=value pairs
while read -r line || [[ -n "$line" ]];
do
# Split env variables by character `=`
if printf '%s\n' "$line" | grep -q -e '='; then
varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
fi
# Read value of current variable if exists as Environment variable
value=$(printf '%s\n' "${!varname}")
# Otherwise use value from .env file
[[ -z $value ]] && value=${varvalue}
# Append configuration property to JS file
echo " $varname: \"$value\"," >> ./env-config.js
done < .env
echo "}" >> ./env-config.js
并修改package.json中的运行脚本为
"dev": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build": "sh -ac '. ./.env; react-scripts build'"
index.html增加脚本标签引用脚本
<script src="%PUBLIC_URL%/env-config.js"></script>
增加代码显示环境变量内容
<p>API_URL: {window._env_.API_URL}</p>
使用命令测试应用
yarn dev
azure-pipelines.yml内容
# Docker image
# Build a Docker image to deploy, run, or push to a container registry.
# Add steps that use Docker Compose, tag images, push to a registry, run an image, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/docker
trigger:
- development
pool:
vmImage: 'Ubuntu-16.04'
variables:
imageName: 'workbench:$(build.BuildNumber)'
steps:
- script: docker build -f Dockerfile -t $(imageName) .
displayName: 'docker build'
- script: |
docker login -u $(dockerId) -p $(pswd)
docker tag $(imageName) $(dockerId)/$(imageName)
docker push $(dockerId)/$(imageName)
displayName: 'push docker image'
docker-compose.yml内容
version: "3.2"
services:
web:
image: weschen/workbench:20190627.2
ports:
- "5000:80"
environment:
- "API_URL=weschen.production.example.com"
在服务器中使用命令布署应用
docker-compose up -d