面向前端的CDN解决方案! 全框架皆可使用

面向前端的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

动手搂-前置准备

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

  2. npm run start

  3. 开启 http://localhost:3000/

  4. 开启後会看到此画面
    https://ithelp.ithome.com.tw/upload/images/20210727/20138547ifnqNqcyHT.png

  5. 点选 用懒加载进入画面, 会显示1.png的图片
    https://ithelp.ithome.com.tw/upload/images/20210727/20138547JeWqpoQBA8.png

  6. 看到画面可正常执行後,开始打包执行档
    npm run build

  7. 这就是我们的静态执行档了,接下来进入发布~
    https://ithelp.ithome.com.tw/upload/images/20210727/20138547Ix22jdO66E.png

模拟环境

  1. 根目录下执行 node server/server.js 可启动一个 Domain A 模拟环境 http://0.0.0.0:3002/
  2. 执行 npm run build -- --output-path ./dist/front-cdn-outside 打包出CDN的模拟环境
    https://ithelp.ithome.com.tw/upload/images/20210727/201385476H08Y1Qaqw.png
  3. 把dist/assets/1.png 删除 并将 dist/assets/1-cdn.png 更名成 dist/assets/1.png
    https://ithelp.ithome.com.tw/upload/images/20210727/20138547E1rA6kdXEe.png

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

  1. 根目录下执行 node server/server-cdn.js 可启动一个 Domain CDN 模拟环境 http://0.0.0.0:3003/
  2. 接下来我们可以看看两个环境的差别搂
    https://ithelp.ithome.com.tw/upload/images/20210727/201385470vJdVBOv0Y.png
  3. 3002 PORT 我们当作本地主机端,3003 PORT 我的当他是CDN端,接下来我们要让用户可以在主机端与CDN端做无痛切换搂!

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

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

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

结语

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

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


<<:  OpenSSL

>>:  Thunkable学习笔记 3 - 读取Realtime Database的值(Firebase)

VSCode 套件推荐系列 - 下

最後一篇,持续来介绍 VSCode 的套件,让你靠一套文字编辑器在路上横着走! CodeSpellC...

LiteX/VexRiscv 简介与使用 (二点五) 天地分隔

没想竟然遇到连载途中的除错困境XD 不过30天铁人赛对笔者来说就像黑客松纪录簿,也当作给作软硬整合开...

Day 2 - 输出

大家好,我是长风青云。 我发现了一件超级糟糕的事,3分钟真的有点痛苦QAQ 原本我想要今天讲完输入输...

用 Python 畅玩 Line bot - 23:Flask(一)

如果想要将从 line 上蒐集到的资料或数据呈现在自己的网页上,我们可以使用 flask 建立好网页...

Day 08:深仍可测的元件样式-Deep Selectors

成功渲染出 BootstrapVue Navbar 元件之後,接着来将预设样式改成自己喜欢的专案色调...