文章来源：https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/

通常来讲，我们在使用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\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

处理的流程

（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

源码：https://github.com/ChenWes/react-nginx-variable

docker-compose 布署应用nginx中的create-react-app应用获取环境变量的更多相关文章

  1. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  2. JAVA中常用需要设置的三个环境变量(JAVA_HOME、CLASSPATH、PATH)

    JAVA中常用需要设置的三个环境变量: JAVA_HOME.CLASSPATH.PATH (一) 配置环境变量:(相对路径) 1. JAVA_HOME=x:/jdk1.6.0 2. 用%JAVA_HO ...

  3. Apache/Nginx为PHP设置、添加$_SERVER服务器环境变量

    在PHP开发中为了区分线上生产环境还是本地开发环境, 如果我们能通过判断$_SERVER['RUNTIME_ENVIROMENT']为 'DEV'还是'PRO'来区分该多好, 可惜的是$_SERVER ...

  4. Titanium系列－－安装Titanium Studio 中的Android SDK，JDK以及环境变量的配置(二)

    Ubuntu安装配置JDK 1.先去 Oracle下载Linux下的JDK压缩包,我下载的是jdk-8u25-linux-x64.tar.gz文件,下好后直接解压 Step1:# 将解压好的jdk1. ...

  5. saltstack在jianja模板中，执行salt函数来获取某些变量的值，并且将配置写入到配置文件中？

    问题描述: 通过saltstack的jinja模板方式,可以将变量的值写入到配置文件,即动态获取的方式.这里介绍,通过执行salt函数来获取值的方式. 演示: 1.通过在sls中,增加jinja的模板 ...

  6. 在Win7中修改 系统盘中 “系统” - “用户” 的环境变量映射关系

    1.在此列表中,选中对应登录帐号 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList 2.将Prof ...

  7. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

  8. docker必须要sudo，但是sudo的话，又获得不了环境变量怎么办？

    方法1 sudo usermod -a -G docker $USER 方法2 sudo -E docker-compose ... 在sudo后面加上-E

  9. webpack中使用DefinePlugin来传递构建的环境变量给源代码使用

    最近在思考如何提供一种前后端开发功能测试既高效又安全的方案,因为对于我平时的项目是前后端同时进行的,后端我已经有了完备的权限管理,前端不能的角色会有不同的访问数据权限.而在vue前后端分离开发情况下, ...

随机推荐

  1. Python实现YOLO目标检测

    作者:R语言和Python学堂 链接:https://www.jianshu.com/p/35cfc959b37c 1. 什么是目标检测? YOLO目标检测的一个示例 啥是目标检测? 拿上图 (用YO ...

  2. javascript_08-while 和 do while

    while 和 do while for 当循环次数已知 while 先判断再执行 do while 先执行一次再判断 //1-100 之间所有数字的和 //while // var i = 1; / ...

  3. cdh-hbase用户无法执行命令

  4. 使用框架时，在web.xml中配置servlet时，拦截请求/和/*的区别。

    关于servlet的拦截设置,之前看了好多,说的都不太清除,明白. 最近明白了一些,总的来说就是保证拦截所有用户请求的同时,放行静态资源. 现整理如下: 一.我们都知道在基于Spring的Applic ...

  5. C++——overloading

    参考 C++——overloading principle analysis operator overloading C语言中,对一个东西进行操作一定要涉及到一个函数,对于自定义类型,为了实现其四则 ...

  6. redis重命名flushall和flushdb重启失败

    redis重命名flushall和flushdb,将使用中的redis重命名redis会启动失败并且log中有报错 # Unknown command 'flushall' reading the a ...

  7. QQ龙虎榜数据接口

    1.个股全部上榜日期 strUrl.Format(L"http://stock.finance.qq.com/cgi-bin/sstock/q_lhb_js?t=1&c=%06d&q ...

  8. jquery动画函数里面可以跟一个回调函数，表示动画结束后执行的代码

    jquery动画函数里面可以跟一个回调函数,表示动画结束后执行的代码 使用js监听动画结束后进行的操作: $ele.fadeIn(300,function(){...}) $ele.fadeOut(3 ...

  9. 009_Source Insight 3.5安装及使用

    链接:https://pan.baidu.com/s/1CBEhIhYtZZ6rUjq7yu4J2w提取码:qkv0 复制这段内容后打开百度网盘手机App,操作更方便哦 SourceInsight3. ...

  10. mongodb WiredTiger 内存分配

    转载自勤奋的小青蛙 mongodb占用内存非常高,这是因为官方为了提升存储的效率,设计就这么设计的. 但是大部分的个人开发者所购买的服务器内存并没有那么大,所以,我们需要配置下MongoDB的内存缓存 ...