面向前端的CDN解决方案！

前阵子想在Angular的专案下套用CDN机制
过去我都是使用 webpack publicPath 来达成
但使用Angular我不想对webpack做额外设定
且在搜寻资料中，看到Angular-cli团队对于CDN有些想法 连结

The Angular CLI itself is fundamentally a build-time (and developer convenience) tool. We compile the application and output a dist/ directory that has all the resources necessary to run the application. The CLI's job ends here. It is then up to the application developer to actually serve these resources to end users (via Nginx, Express, CDN, or any other server their heart desires).

简单来说，Angular-cli打包工具(包含 webpack , 与各前端的cli)，使命是打包产生静态档，而之后提供给客户就是别人的议题了，打包工具的职责在产生静态档后就结束了！

今天我们不谈什么是CDN(小萌新们自己去Google一下～)
也不谈怎么架设CDN
今天只谈前端如何 接上CDN

前置背景

Domain A 进入
有CDN => 走Domain CDN 取资料
无CDN => 走Domain 本地 取资料

前端框架

Angular，vue，react等等都可以

解决办法思路

透过服务器 Nginx 或 Node Express 的反向代理功能
让客户都访问 Domain A
当判断 有启动CDN 时，导转 Domain CDN

动手搂－前置準备

準备一个新的专案， 建立一个动态路由,并显示一张图片,Demo看这里 (本demo专案请用Angular 12执行)

npm run start

开启 http://localhost:3000/

开启后会看到此画面

点选 用懒加载进入画面， 会显示1.png的图片

看到画面可正常执行后，开始打包执行档
npm run build

这就是我们的静态执行档了,接下来进入发布～

模拟环境

根目录下执行 node server/server.js 可启动一个 Domain A 模拟环境 http://0.0.0.0:3002/执行 npm run build -- --output-path ./dist/front-cdn-outside 打包出CDN的模拟环境
把dist/assets/1.png 删除 并将 dist/assets/1-cdn.png 更名成 dist/assets/1.png

PS.正常CDN下,档案要是一样的，这边是为了方便我们接下来辨识有没有成功切换到CDN的资讯源

根目录下执行 node server/server-cdn.js 可启动一个 Domain CDN 模拟环境 http://0.0.0.0:3003/接下来我们可以看看两个环境的差别搂
3002 PORT 我们当作本地主机端，3003 PORT 我的当他是CDN端，接下来我们要让用户可以在主机端与CDN端做无痛切换搂！

最后一哩路-面向前端的CDN切换

首先！用户该分配哪一个CDN路径不在我们的探讨範围
我们先假设有个机制会帮我们取的CDN位置,并将Domain写入Cookie
现在我们要做的是
透过判断Cookie，决定走Domain 本地 或 Domain CDN

执行node server/proxy-server.js 启动PROXY查看 http://0.0.0.0:3300/proxy-server.js 透过判断cookie里面的 cdn_url 值判断是否导去CDN
cookie没cdn_url ,会发现实际客户往 Domain 本地 去取资料，看到1.png 显示 cdn-in-server
cookie cdn_url 为 http://0.0.0.0:3003 时，会往 Domain CDN 取资料,1.png 显示 cdn-outside这样CDN机制就完成了,我们只要把客户Domain往 3300 PORT导，就完成搂！

结语

实务上，需小心别把API往CDN导过去
而这个解决方案可以在不修改前端程式下完成对接
同样概念也可以使用Nginx达到，这边就不特别说明了

如果有其他CDN的解决方案，也欢迎一起讨论