主要观点总结
本文主要介绍了前端部署的过程和所面临的优化问题，包括利用CI/CD和Docker进行自动化部署，以及静态资源缓存的优化方案。文章还详细阐述了资源发布时遇到的缓存更新问题及其解决方案，以及灰度系统的实现原理。
关键观点总结
关键观点1: 前端部署流程
通过脚手架提供的命令打包前端代码，生成dist文件夹；利用nginx起web服务器，配置访问路径，解决跨域问题；利用CI/CD和Docker进行自动化部署。
关键观点2: 静态资源缓存优化
为了提高网站性能和减少带宽浪费，需要对静态资源进行缓存优化。通过强制浏览器使用本地缓存，更新资源路径实现资源更新。
关键观点3: 缓存更新与资源发布问题
在资源发布时，需要解决页面引用多个css文件但只有部分文件更新的问题。通过精确控制文件级别的缓存更新，利用数据摘要算法对文件求摘要信息，实现只有文件内容变化时才会更新url。
关键观点4: 静态资源与动态网页的部署问题
为了解决静态资源和动态网页的部署问题，需要采用非覆盖式发布。通过文件的摘要信息对资源文件进行重命名，把摘要信息放到资源文件发布路径中，实现内容修改的资源变成新文件发布。
关键观点5: 灰度系统的实现原理
灰度系统通过Nginx实现，原理是使所有流量都访问服务1，然后给用户携带不同的cookie。第二次访问时，Nginx根据用户携带的cookie进行转发到不同的服务，完成灰度访问。
文章预览
本文作者为 360 奇舞团前端开发工程师 https://juejin.cn/post/7316202725330796571 前端部署真的简单么 简单部署 首先，通过脚手架提供的命令npm run build打包前端代码，生成dist文件夹； 最后，将dist文件夹丢给后台开发人员放在他们的工程里面，随后台一起部署；现在普遍是前后端分开部署，因此，利用nginx起一个web服务器，将dist文件夹放到指定的路径下，配置下nginx访问路径，对于请求接口使用proxy_pass进行转发，解决跨域的问题。 更加高端一点的操作，是利用CI/CD + Docker进行自动化部署。 进行到这里，是不是觉得还是很简单的。别急，进阶一下试试~ 为什么要进阶呢？因为这关系到线上生产环境的稳定和性能。 那让我们从原始的前端开发讲起。 上图是一个 index.html 页面和它的样式文件 a.css，无需编译，本地预览，丢到服务器，等待用户访问。 然后我们访
………………………………
