通常来讲，我们在使用docker build Nodejs容器时，代码中就有预设一些参数，作为各个环境的环境变量，例如数据库的URL等
但作为前端应用react，在编译了代码后，生成的代码使用Nginx代理在浏览器中运行，那么注意，在浏览器中没有环境变量这个东西，所以原本在后台Nodejs服务器中的获取环境变量的方案，在前端React项目中不可用
实际上，process在浏览器环境都不存在，它是特定于Nodejs的，在转换过程中，webpack进程会使用process.env给定的字符串值替换所有出现的内容，这就说明，前端React项目想要获取参数只能在docker build期间进行配置。
找到一个解决方案，当我们启动容器时，是可以注入环境变量的特定时刻，然后我们可以从容器内部读取环境变量。我们可以将它写入一个文件，该文件可以通过Nginx（或者是React应用程序）提供服务，它使用<script>标签导入至index.html
所以在那一刻，我们可以运行一个bash脚本，创建一个JavaScript文件，将环境变量被指定为全局Window对应的属性，将它注入至浏览器，以方便我们的应用在全局可用
创建项目，并创建有内容的.env文件
# Generate React App create-react-app react-nginx-variable cd react-nginx-variable # Create default environment variables that we want to use 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 ' "$line" | grep -q -e '='; then varname=$(printf '%s ' "$line" | sed -e 's/=.*//') varvalue=$(printf '%s ' "$line" | sed -e 's/^[^=]*=//') fi # Read value of current variable if exists as Environment variable value=$(printf '%s ' "${!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
处理的流程
（1）删除旧文件，并创建一个新文件。
（2）编写JS代码，打开对象文字并将其分配给全局窗口对象。
（3）读取.env文件的每一行并分成键/值对。
（4）查找环境变量，如果设置，则使用其值，否则，使用.env文件中的默认值。
（5）将它附加到我们分配给全局窗口对象的对象
（6）关闭对象文字
然后我们在index.html中<head>中添加以下脚本
<script src="%PUBLIC_URL%/env-config.js"></script>
且在首页代码App.js中写一行代码
<p>API_URL: {window._env_.API_URL}</p>
然后react项目的package.json中
"scripts": { "dev": "chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/ && react-scripts start", "test": "react-scripts test", "eject": "react-scripts eject", "build": "react-scripts build'" },
然后在本机可以使用yarn dev来运行项目，应该可以看到界面上已经成功获取到.env文件中的变量
当然，我们也可以修改React项目中的.env文件中的内容，从而在本地来运行看到结果
但当成到SIT/UAT/PROD环境时，使用docker-compose方式运行项目时
version: "3.2" services: web: image: weschen/workbench:20190627.2 ports: - "5000:80" environment: - "API_URL=weschen.production.example.com"
页面中显示的，即是weschen.production.example.com