前端发布从覆盖式升级到非覆盖式发布的实践和总结

长大之后，越来越笃信一句话：人们只相信自己愿意相信的东西，而不在乎真相。当遇到挫折或者未知时，主观上的迷茫往往会阻滞我们的思索和探索，以至于停留在舒适区。人生本就应该逢山开路，遇水架桥，不是么？---今日份思索

缘起

前端环境构建一直是前端学习和开发中被忽略的领域，但是生产上线的时候一直是我们需要重视的环节。尤其是前后端分离后之后，前端对于线上环境的构建和发布的优化把控变得尤为重要。

由于之前构建的几个项目都是覆盖式发布，虽然项目能够跑起来，然而着一顿操作猛如虎的覆盖却有着不少的隐患和缺点。撇开学术讨论（其实是笔者才疏学浅的托词哈），我比较困扰的一些思考：

1、覆盖式发布虽然简单粗暴，但是假如发布出错，需要回滚的时候，如何才能不操作git如何迅速回滚呢？
2、一股脑将静态资源放到服务器上，这样是否符合我们的符合对所谓网站性能优化的追求呢？面试中我们常常说网页性能优化，是不是将应用与实践呢？
3、覆盖式发布替换网络资源的过程中网站页面会有一瞬间空白，这对于用户体验是相当糟糕的，如何改善呢？

覆盖式发布

覆盖式的概念其实就是前端打包后的代码一股脑都放到服务器上（其实这个名词貌似不是业内专有名词也没有这个标准，姑且这么叫吧）。相信绝大多数人已经有所实践，比如把用可视化工具将本地本地代码上传到服务器，而我这边所做的尝试就是通过bash命令把本地代码拷贝到服务器上。

env=${1:-daily}
echo "ENV: ${env}"
WEB_HOSTS=(root@targetServer1)
if [ "$env" = "prod" ]; then
    WEB_HOSTS=(root@targetServer1 root@targetServer2)
fi
pushd ..
	cnpm install
	rm -rf dist
	npm run build

	for h in ${WEB_HOSTS[*]}
	do
	    printf "UPLOAD: %s\n" $h
		ssh $h "cd /data/targetDir && chmod -R a+x ."
		ssh $h "rm -rf /data/targetDir/*"
		scp -r ./build/* $h:/data/targetDir
		ssh $h "cd /data/targetDir && chmod -R a+x ."
	done
popd

和我们平时所写的js有所不同，其中注意的chmod -R a+x命令是赋予当前文件读写权限还有就是通过判断命令行变量不同区分测试和生产服务器发布。替换很容易理解，但是潜在的隐患也不可忽视。

非覆盖式发布

所谓就是非覆盖式发布，我这边做的实践也是参考啦，就是将对应的静态资源放置在OSS服务器上,而index.html这样的主目录的文件放到我们的服务器上。以下是oss服务器就是每次发布产生的资源目录，每个文件都有相对应的哈希值和发布时间方便回退和记录。（当然硬盘不值钱，暂时不用考虑容量不够问题，半年或者一年整理一次就够啦）

这边整体思路就是将打包后的文件全部上传到oss上，然后将当前哈希目录下的资源复制到web文件下面，然后在从index.html从web目录下复制到我们的网页服务器下。

那么问题来了，我们的index.html到底是怎么访问这些资源的呢，通常都是通过相对路径访问，而现在就是则通过绝对路径的代码。就像我们打开知乎所看到的，静态资源都通过绝对路径。

这样做有什么好处呢？如题提出的问题

每次发布以及时间都在oss服务器上有备份，假如有问题，能够迅速回退回滚，存档时间长
静态资源CDN部署 —— 优化网络请求,减少服务器带宽

那么最后稍微提一下下，怎么配置啊，每次开发都要做配置么，静态资源引用，像页面中的图片，css等等，此处贴下webpack关键变量替换