传统单页面应用(SPA)是整体一块部署上线,服务器返回不同的SPA版本即可。而微前端是要求每小块APP都可以独立部署上线,同时又提供SPA般的体验。为了满足微前端+SPA
的需求,服务器需要有动态返回每小块APP对应版本的能力。只使用Nginx部署前端资源,是无法达到这个目标。
先看看我们如何设计react-micro-frontend-server-go来满足Demo网站的微前端服务诉求,再探讨一下满足7x24小时微前端的运维平台应该有哪些特点。
本地部署样例,见: https://github.com/kinsprite/react-micro-frontend-server-go/releases/tag/v2.3.0
继续阅读→
大系统拆分成微前端之后,为了提升用户体验,都是按需延时加载相关的CSS/JS。微前端框架react-micro-frontend-framework的职责:
- 提供微前端APP注册接口。有了注册接口才能让框架反向找到微前端APP的React组件。
- 作为整个前端的底座,负责启动React框架、渲染root节点,提供按需渲染某个微前端APP的接口——React中以组件的方式。
- 找到相关微前端的资源位置,按照依赖次序加载CSS/JS。
- 提供多个微前端之间的通信机制——全局Redux Store。
- 提供前端公共库服务——符号导出。
选择React做微前端框架的其中一个原因是:React Router支持动态路由,都是在渲染每层路由组件时判断加载什么内容。而别的路由框架就不是这个样子,有的是静态配置路由,如果它支持Middleware或者Hook机制,还能玩微前端,否则就得重新开发一个路由框架。所以,统一技术栈选择React
+ React Router
,让微前端更加容易落地。
继续阅读→
工程化的内容很多,但是本文只关注与微前端构建相关的内容:统一构建脚本,Webpack按规则导入/导出JS模块符号,生成元信息(入口文件路径、微前端定义信息、GitRevision等)。
虽然Create React App
可以构建SPA,但是满足不了我们微前端的构建需求。同时,Create React App没有提供可回调的方式让我们扩展,于是只能新建构建脚本:react-micro-frontend-scripts。该项目脚本内容大部分来源于Create React App,目前只支持TypeScript + ESLint + PostCSS
。在实际项目中,可以调用该项目脚本,使用函数回调的方式定制自己的内容。在几个微前端App样例中,也是这种方式使用,有的已添加自身的定制参数。
继续阅读→
在前端领域,用户体验放到第一位。在复杂业务操作的前端项目中,SPA的体验要比多页面或iframe嵌套的效果好很多。我们不能为了代码解耦、浏览器中无冲突而放弃SPA。
在以前的项目中,我们已经使用npm
发包的方式将代码分割到多个仓库。在集成前端应用时,再使用npm
和Webpack
工具构建成一个SPA。但仍有一个明显的缺点:每次底层组件更新时,上层SPA都需要重新集成打包、部署。同时,底层组件个数不少又经常更新,上层SPA频繁地集成与部署,让人很反感。
参照后端微服务,微前端(或称为前端微服务)也应该有以下特点:独立开发、独立部署、灰度发布。选择Micro frontends + SPA
是最佳的DevOps与体验方案。经过几天的奋战,已经实现了一个基于React框架的微前端Demo,见: https://micro.qinzhiqiang.cn 。
继续阅读→
使用Docker构建前端工程时,按照常规方法从node:tls
镜像开始下载依赖包,构建的大部分时间都耗在npm
依赖包下载了。为了提高前端的构建速度,我们可以把工程的依赖包先缓存到镜像中,再构建工程时就不需要从远程下载。因yarn
可以锁定依赖包的版本,我们使用yarn
代替npm
工具,避免npm
工具每次下载底层依赖包的版本可能不同。
本文代码: https://github.com/kinsprite/react-my-app-ts
继续阅读→
一个框架如果有中间件机制,后续的可扩展性就很强,Redux就是这种一个数据处理框架。Redux中间件机制代码很短,但是理解起来可不是一句话讲得完。要看明白其中间件机制,主要看 createStore()
和 applyMiddleware()
这两个函数。
继续阅读→
Vultr VPS支持IPv6地址,于是想让Nginx也提供HTTPS IPv6服务。
-
准备:VPS添加IPv6地址,重启服务器。
-
更新自己的DNS域名解析:添加AAAA地址记录到新添加的IPv6地址。
-
Nginx新增IPv6地址Listen,并重启Nginx:
# HTTP
listen 80 default_server;
listen [::]:80 default_server;
# HTTPS
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
-
ip6tables添加80与443端口。在/etc/iptables/rules.v6
文件中添加:
# Nginx HTTPS
-A INPUT -p tcp -m tcp --dport 80 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 443 -j ACCEPT
-
更新Vultr防火墙,见https://my.vultr.com/firewall/
,在防火墙规则的Inbound IPv6 Rules
中放行80与443端口。
继续阅读→
原先系统使用Ubuntu 18.04,今天试着升级到Ubuntu 20.04。先sudo apt install screen
安装Screen,避免SSH中断无法继续。
为了避免数据丢失,在升级之前先对VPS进行Snapshot一次。Vultr防火墙放行TCP 1022
端口。参考 https://www.digitalocean.com/community/tutorials/how-to-upgrade-to-ubuntu-18-04 的步骤升级Ubuntu 20.04。
使用Putty SSH连接VPS时,把Putty窗口一直置于前台,避免升级过程中无响应、升级失败。也可以使用VPS实例的View Console
VNC控制台升级系统,不怕掉线。
继续阅读→
一直想了解AI相关的内容,春节期间选择相对容易上手的深度学习做入门。阅读了以下四本书,对深度学习有一定的了解。
继续阅读→
Python、TensorFlow、NVIDIA GPU驱动、CUDA工具包等软件的版本需要相互匹配,可参考官方的指导“Install TensorFlow 2”与"软件要求"。TensorFlow 2.x已不需独立的TensorFlow-GPU版本。
软件匹配版本:
- Python 3.7
- NVIDIA GPU驱动 445.87
- CUDA工具包 10.1
- cuDNN SDK 7.6
- TensorFlow 2.1
继续阅读→