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、总结
水平有限,难免有所纰漏,欢迎批评指正。本文纯属抛转引玉,大家有更好思路欢迎留言评论。
react不同环境不同配置angular_DevOps 前端项目(angular、vue、react)打包静态资源生成一份Docker镜像支持部署不同环境...相关推荐
- Angular入门到精通系列教程(1) - Angular,Vue,React 选型
1. 概述 总的来说一句话,如果你是老大,你可以选择用什么:如果你不是,那么,老大让用什么,你就用什么. 前端框架Angular,Vue,React三选一,没有第四种. (当然,如果只是一两个简单的页 ...
- docker配置python环境_PyCharm使用Docker镜像搭建Python开发环境
在我们平时使用PyCharm的过程中,一般都是连接本地的Python环境进行开发,但是如果是离线的环境呢?这样就不好搭建Python开发环境,因为第三方模块的依赖复杂,不好通过离线安装包的方式安装.本 ...
- 将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题
将Vue项目部署在Nginx,解决前端路由.反向代理和静态资源问题 需求: 一台服务器,Linux 安装了Nginx 使用Vue脚手架编写的Vue项目 第一步:将Vue项目打包,然后将生成的dist文 ...
- react不同环境不同配置angular_前端问题集:vue配置环境-给不同的环境配不同的打包命令...
通过vue-cli脚手架构建出一个前端项目,通过npm run build打包,发布到线上,但是这样做需要每次都手动修改接口地址.我们可以通过自行配置打包命令实现无需修改接口地址,打各个环境的包. 文 ...
- python环境变量配置_?Python项目读取配置的正确姿势
读取配置是大部分python应用都会面临的问题,例如应用运行时需要读取数据库的配置,存储文件需要知道文件路径配置,应用在不同的环境的配置也不尽相同.因此,配置管理是一个必不可少的问题,配置读取的方式一 ...
- SpringMVC,MyBatis项目中兼容Oracle和MySql的解决方案及其项目环境搭建配置、web项目中的单元测试写法、HttpClient调用post请求等案例
要搭建的项目的项目结构如下(使用的框架为:Spring.SpingMVC.MyBatis): 2.pom.xml中的配置如下(注意,本工程分为几个小的子工程,另外两个工程最终是jar包): 其中 ...
- 使用各种姿势舒服的部署微前端项目(上:打包与上传)
微前端作为解决巨石应用模块化和降低技术框架变动风险的神器,我觉得是当下前端发展的一大方向,可以在未来5-10年内保持生命力. 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了 ...
- 2021年最新Web前端HTML,CSS,Vue,React,Jquery大概率面试题合集
CSS3 HTML5 前端面视题 1.Css3新增的特性 边框: border-radios 添加圆角边框 border-shadow:给框添加阴影 (水平位移,垂直位移,模糊半径,阴影尺寸,阴影颜色 ...
- PyCharm采用Docker镜像直接进行Linux环境项目开发
前言:因为本地是windows环境,之前开发工具的时候,都是先写windows版本,上服务器的时候再改linux相关参数目录等等,版本迭代控制非常恶心.docker直接搞定可以本地开发,完成之后打包上 ...
最新文章
- linux命令用tar czvf .tar.gz好用的
- neural network神经网络识别手写字体
- 如何在PHP中获取客户端IP地址[重复]
- redis的入门篇----启动和关闭
- 神经网络变学习率算法代码_机器学习算法之神经网络
- 输入一个数,判断他是不是质数
- win 二进制门安装mysql_MySQL5.7 windows二进制安装
- Cuda:invalid device pointer
- 爬虫必备技能xpath的用法和实战
- 181013词霸扇贝有道每日一句
- python中options类_python命令行参数解析OptionParser类用法实例
- SQL获取当前时间、年、月、日等
- 什么是DC-DC转换器?DC-DC转换器是如何命名的?
- 怎么让模糊的数字变清楚_用ps怎么把模糊的字变清晰
- MTF、Resolution、Contrast解读
- 小觅双目相机陀螺仪静态数据输出为0+timeshift ubuntu 系统备份
- JAVA专业课题研究方向有哪些_教师课题研究方向与范围有哪些
- 大数据专业未来就业前景如何?
- linux下无线网卡测试,Linux C程序如何检测WIFI无线USB网卡是否可用?
- 面试题整理出炉附答案,建议收藏
热门文章
- 前景检测算法_4(opencv自带GMM)
- opencv3 for python 之 创建图片绘制简单几何图形
- JFileChooser多选、选择目录
- freeImage图像旋转滤波
- 07-IP组播配置指导
- awd的批量脚本 pwn_AWD攻防之web入门篇
- linux解压实例,linux 下面压缩,解压.rar文件以及rar,unrar实例
- android setinputtype光标,Android屏蔽软键盘并且显示光标的实例详解
- java el jstl_java -EL技术JSTL技术
- 十一、H.264的Slice Header解析