react不同环境不同配置angular_DevOps 前端项目(angular、vue、react)打包静态资源生成一份Docker镜像支持部署不同环境...

1、前言

为了尽可能地轻量化前端镜像(非node承载)，将前端编译成静态资源通过nginx承载。

与后端程序不同的是，当使用静态资源方式时页面是直接加载到浏览器进行渲染，无法读取服务端机器中 env 的环境变量。

当有部署多个环境(dev、uat、pro)需求时，就无法像后端程序一样满足生成一个镜像部署不同环境。

如果你有同样的需求请往下看。

2、使用ngx_http_js_module

njs是JavaScript语言的子集，它允许扩展nginx功能。njs的创建符合 ECMAScript 5.1 (严格模式)以及某些 ECMAScript 6 和更高版本的扩展。合规性还在不断发展。

default.conf

主要关注 location /env { js_content getenv; } 部分内容，getenv 是一个 JavaScript function 函数。

server {

listen 80;

# listen 443;

# ssl on;

# ssl_certificate /etc/nginx/ssl/server.crt;

# ssl_certificate_key /etc/nginx/ssl/server.key;

server_name localhost;

#charset koi8-r;

#access_log /var/log/nginx/host.access.log main;

location / {

root /usr/share/nginx/html;

index index.html index.htm;

try_files $uri $uri/ /index.html;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

location /env {

js_content getenv;

}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html

#

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root /usr/share/nginx/html;

}

}

nginx.conf

主要关注 js_include env.js; 部分内容，引入js。

user nginx;

worker_processes auto;

error_log /var/log/nginx/error.log warn;

pid /var/run/nginx.pid;

load_module modules/ngx_http_js_module.so;

events {

worker_connections 1024;

}

http {

js_include env.js;

include /etc/nginx/mime.types;

default_type application/octet-stream;

log_format main '$remote_addr - $remote_user [$time_local] "$request" '

'$status $body_bytes_sent "$http_referer" '

'"$http_user_agent" "$http_x_forwarded_for"';

access_log /var/log/nginx/access.log main;

sendfile on;

#tcp_nopush on;

keepalive_timeout 65;

#gzip on;

include /etc/nginx/conf.d/*.conf;

}

env.js

对应 default.conf 中使用的方法。

function getenv(r) {

var strEnv = '{"Shortsha": "'+ process.env.SHORTSHA +'","UI_ENVIRONMENT": "'+ process.env.UI_ENVIRONMENT +'"}';

r.headersOut['Content-Type'] = "application/json; charset=utf-8";

r.return(200, strEnv);

}

效果示意

3、前端部分(以angular为例)

文件夹 /assets 中预先配置多个环境的配置文件 appconfig.dev.json 、appconfig.uat.json 、appconfig.pro.json

是不是和 .net core 中后端程序配置很像，启动配置的环境变量 "ASPNETCORE_ENVIRONMENT": "Development" 配置文件 appsettings.json、appsettings.Development.json ...

同样的道理只要在渲染生命周期比较开始的位置获上文在 nginx 中配置的 env 地址中拿到环境配置在赋值到 AppConsts.remoteServiceBaseUrl 全局变量中。

private static getApplicationConfig(injector: Injector,httpClient: HttpClient,callback: () => void

) {

//能满足ng build --|dev|uat|pro 编译时指定不同环境变量

let envName = '';

if (environment.production) {

envName = 'pro';

} else {

envName = 'dev';

}

//nginx容器中环境变量

const envUrl = window.location.protocol + '//' + window.location.host + "/env";

httpClient.get(envUrl).subscribe(

(result: any) => {

envName = result.UI_ENVIRONMENT;

callback();

},

error => {

alert(`获取环境变量出错,信息:\n\n${error.message}`);

}

);

//assets 文件夹存放不同环境配置文件

const url = '/assets/appconfig.' + envName + '.json';

httpClient.get(url).subscribe(

(result: any) => {

//后端服务地址

AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl;

callback();

},

error => {

alert(`初始化配置出错,信息:\n\n${error.message}`);

}

);

}

4、镜像、部署

Dockerfile

在 ci\cd 流水线 build 拿到产出的 /dist 静态资源打包Docker镜像。

FROM nginx:1.17.3-alpine as base

EXPOSE 80

WORKDIR /usr/share/nginx/html

COPY /_nginx/nginx.conf /etc/nginx/nginx.conf

COPY /_nginx/env.js /etc/nginx/env.js

COPY /_nginx/default.conf /etc/nginx/conf.d/default.conf

COPY /dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

部署的yaml中配置

value 中的值均通过流水线变量获取，文中使用具体值示意。

env:

- name: UI_ENVIRONMENT

value: "uat" #流水线中不同分支对应不同环境

- name: SHORTSHA

value: "v1.0" #源码仓库的签名

5、总结

水平有限，难免有所纰漏，欢迎批评指正。本文纯属抛转引玉，大家有更好思路欢迎留言评论。