文章来源：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. 记一次bypass某场景GD库及拓展分析

    0x00 前言 gou楼兰师傅发来个站说是过不了gd库,问我有啥办法没有,给了他之前海贼师傅说的jpg_payload脚本,但是绕不过,问他拿了站点,写了个jpg_payload批量的fuzz脚本,f ...

  2. （二）react-native开发系列之windows开发环境配置

    之前写了react-native在mac上得环境搭建,但是如果只开发android的话,只要用windows系统就可以了,下面就来说下react-native的windows开发环境配置. 1.下载配 ...

  3. Vue组件component创建及使用

    组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...

  4. C#中的struct（结构）为值类型，struct类型全接触

    众所周知,struct类型和class类型非常相似,尤其是在C++中,class可以办到的事struct几乎都可以实现.在C#中struc类型依然存在,它的用处相对来说已经显得越来越不重要,这里主要讲 ...

  5. javascript_05-操作符

    一元运算符 a++和++a //5 2 3 var a =1; var b = ++a + ++a; console.log(b) //4 1 3 var a =1; var b = a++ + ++ ...

  6. JAVA笔记整理（五），JAVA中的继承

    1.继承的概念 继承是类与类的一种关系,是一种“is a”的关系 2.继承的好处 子类拥有父类的所有属性和方法,从而实现代码复用 4.方法的重写(Overridding) 如果子类对于继承自父类的方法 ...

  7. Linux 命令之 alias

    alias 的作用是为命令设置别名,用于提高输入效率 alias 的临时设置 临时设置很简单,直接举例说明 [r@1lin24 ~]$ alias cdlog='cd /var/log' [r@1li ...

  8. Qt中C++与QML交互

    ###main.c部分int main(int argc, char *argv[]){    QString info1 = "xxxxxxxxxxx";    QString ...

  9. Python-共享引用

    A会改变么? 下面三小段代码,A的值都会改变么? >>> A = "spam" >>> B = A >>> B = " ...

  10. python函数式编程-匿名函数

    >>> map(lambda x: x * x, [, , , , , , , , ]) [, , , , , , , , ] 关键字lambda表示匿名函数,冒号前面的x表示函数参 ...