docker-compose 布署应用nginx中的react应用获取环境变量

文章来源：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 '='; thenvarname=$(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 variablevalue=$(printf '%s\n' "${!varname}")# Otherwise use value from .env file[[ -z $value ]] && value=${varvalue}# Append configuration property to JS fileecho "  $varname: \"$value\"," >> ./env-config.js
done < .envecho "}" >> ./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.2ports:- "5000:80"environment:- "API_URL=weschen.production.example.com"

页面中显示的，即是weschen.production.example.com

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

转载于:https://www.cnblogs.com/weschen/p/11098068.html

docker-compose 布署应用nginx中的react应用获取环境变量相关推荐

Qt笔记-profile中基本配置（获取环境变量、设置生成路径、包含文件）
配置好环境变量后通过在profile文件中通过$$(xxx)进行获取. 通过DESTDIR配置生成目标文件的路径. 使用INCLUDEPATH包含文件.如下: QT += guiINCLUDEPATH ...
docker swarm 布署minio集群
活动地址:毕业季·进击的技术er docker swarm 布署minio集群环境:ubuntu18.04服务器 4台,docker(docker-compose,docker swarm) 分为主 ...
Yearning sql审核平台docker化布署
在一个云主机centos 7上布署线上环境和开发开发两套审核平台. 1.下载yearning sql安装文件: git clone https://github.com/cookieY/Yearnin ...
springboot解析不到docker中含有点号的环境变量
近日同事的一个docker镜像在使用时发现一个问题,springboot应用获取不到一个FeignClient接口的url配置,看下application.yml文件中的相关配置: aaa:url: ...
win7 docker java开发环境变量_java – Docker. Spring应用程序.设置和获取环境变量
我正试图将我的Spring应用程序停靠. 问题: 我无法从我的Spring应用程序中获取docker容器中的环境变量. Spring配置(2个选项,单独试用) 也试过java URI dbUrl = ...
Linux中使用export命令设置环境变量
Linux export 命令 2011-08-31 22:36:39| 分类: 命令总结|举报|字号订阅功能说明:设置或显示环境变量. ############################ ...
我的文档目录环境变量_从.env文件中为NodeJS加载环境变量
作者:Writer Staff 翻译:疯狂的技术宅原文:https://coderrocketfuel.com/article/how-to-load-environment-variables-f ...
linux查看python环境变量_Linux中添加PYTHONPATH配置anaconda环境变量方法
因为最近开发多智能体模型需要把自己写的环境打包import,环境是统一的,如果不加入环境变量,每次测一个算法都要把包作为附属脚本和算法脚本放一起非常麻烦.所以就想把这些写的环境加入到python的环境 ...
java在W n8安装_在windows中安装JDK8并配置环境变量-java环境变量设置
学习JAVA,必须得安装一下JDK(Java development kit java开发工具包),配置一下环境就可以学习JAVA了,下面是下载和安装JDK的教程: 一.去oracle官网上下载jdk ...
Linux 中/etc/profile、~/.bash_profile 环境变量执行过程
在登录Linux时要执行文件的过程如下: 在刚登录Linux时,首先启动 /etc/profile 文件,然后再启动用户目录下的~/.bash_profile: ~/.bash_login或 ~/.p ...

docker-compose 布署应用nginx中的react应用获取环境变量

docker-compose 布署应用nginx中的react应用获取环境变量相关推荐

最新文章

热门文章