国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
一、什么是CDN
前端CDN，即内容分发网络（Content Delivery Network），是一种网络架构，旨在加速静态资源的传输，如html、图片、Javascript和CSS文件等。通过在网络中增加一层新的架构，CDN可以将网站内容分发到不同的节点上。这样，用户可以更快、更稳定地获取所需内容，减轻源服务器的负担，缓解网络拥挤，并提高用户访问网站的响应速度和体验。
二、CDN & 静态资源
网站的html、Javascript和CSS文件等静态资源本身具有访问频率高、承接流量大的特点，因此静态资源加载速度始终是前端性能的一个非常关键的指标。CDN 是静态资源提速的重要手段。
三、系统架构图
1. 前端静态资源包通过部署的upload模块服务上传到对应的对象存储桶中。
2. 用户登录移动云官网访问产品页面发送静态资源请求。
3.静态资源请求通过op网关等转发，从对应的对象存储桶中获取资源返回给用户。
四、Upload模块
1. 打包制作基础镜像my-cdn-upload:1.0.0。
2. 将基础镜像运行为容器服务
docker run –name my-cdn-upload –privileged -itd my-cdn-upload:1.0.0。
3. 进入容器服务中
docker exec -it ${id} bash。
4. 创建上传路径
mkdir mysql-order。
5. 退出容器，并将dist包上传到该路径下
docker cp ./dist ${id} :/mysql-order/。
6. 将容器封装成镜像
docker commit ${id} ${imageName}。
五、CDN工作原理
1. 客户端访问产品页面发送html、Javascript和CSS等静态资源请求。
2. 静态资源请求通过op网关及apisixRoute共同转发。
3. 请求到达cdn服务，判断该请求的静态资源文件类型。
4. 请求Html/json类型的静态资源文件，从own对象存储桶中获取资源，并返回给客户端。
5. 请求非Html/json类型的静态资源文件，将请求进行301重定向，从op对象存储桶中获取资源，并返回给客户端。
六、ApisixRouter配置
apiVersion: apisix.apache.org/v2alpha1
kind: ApisixRoute
metadata:
name: dpd-mysqldb-order-web
namespace: paas-dds
spec:
http:
– name: release
priority: 10
match:
hosts:
– order.mysqldb.test.internal
paths:
– /*
plugins:
– name: proxy-rewrite
enable: true
config:
regex_uri: [“/*”, “/dpd-mysqldb-order-web/v5.3.0/”] #修改为存储桶内文件路径，每次版本迭代时需要修改该文件路径
headers:
dest-bucket: upload-web #dest-bucket为存储桶名
pack-mode: history #采用history路由需要添加该header
backends:
– serviceName: dpd-esd-cdn-release
servicePort: 3001
七、Webpack配置
需要修改webpack配置，解决服务接口跨域问题：
module.exports = {
crossorigin=”anonymous”
}
在前端开发中，CDN技术是静态资源提速的重要技术，它可以加速网站的加载速度，提高稳定性和可用性。总的来说，CDN技术对于前端开发来说是一个非常有用和值得应用的技术，可以极大地提升网站的性能和用户体验。
