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

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 '='; 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应用获取环境变量 的全部内容, 来源链接: utcz.com/z/383448.html

回到顶部