关键词：
简介
大部分的WEB网站，主要的流量都是静态资源，用户首次访问的大部分时间都在等待静态资源的下载，越大的带宽，访问速度就越快。但是我们购买的服务器，一般都是小水管（1~5M），毕竟国内的带宽贵得很。相比于通过加大带宽加快访问速度，直接让用户通过CDN访问静态资源不仅更快，而且便宜。
为了防止CDN回源时对服务器产生倒灌造成带宽突然占满，静态资源放对象存储（阿里云OSS），CDN直接回源到对象存储是最好的方案。通过CDN+OSS，服务器实现彻底的动静分离，服务器只处理动态请求，所有静态资源都通过CDN+OSS处理。
不使用CDN，直接通过OSS也可以做到彻底的动静分离。但是使用CDN+OSS与直接使用OSS在费用上并没有明显差别，对不同用户速度却有较大的差别，所以还是推荐与CDN+OSS一起使用保证用户体验的一致性。
(图片来自阿里云)
下面以Ant Design Pro为例，演示集成到OSS和CDN的过程。
集成OSS的步骤
关于在阿里云上创建OSS的过程这里直接忽略。
安装webpack-alioss-plugin
通过webpack-alioss-plugin可以做到在npm run build的时候，自动将dist的文件上传到阿里云OSS。
yarn add -D webpack-alioss-plugin
修改config/config.js
检查到有阿里云OSS的配置，才上传阿里云OSS，否则仍然按照原来的配置走。一般来说，只有要上线了才需要放阿里云，平时自己测试并不需要，所以这样的配置是必要的。
同时阿里云OSS的相关认证配置，应该通过环境变量提供，而不是直接写死在代码中，防止密钥泄露。
// 引入AliOSSPlugin
const AliOSSPlugin = require(‘webpack-alioss-plugin‘);
export default
// 省略无关配置
publicPath: process.env.PUBLIC_PATH || ‘/admin/‘,
chainWebpack(config)
// 认证信息从环境变量读取
if (process.env.WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_ID)
config.plugin(‘alioss‘).use(AliOSSPlugin, [
ossBaseDir: ‘/‘,
exclude: ‘‘,
project: ‘admin‘, // 项目名(用于存放文件的直接目录)
]);
,
// 省略无关配置...
配置环境变量
创建.env:
WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_ID=<替换成你的ACCESS KEY ID>
WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_SECRET=<替换成你的ACCESS KEY SECRET>
WEBPACK_ALIOSS_PLUGIN_BUCKET=<替换成你的bucket>
WEBPACK_ALIOSS_PLUGIN_REGION=oss-cn-beijing # 替换成实际的区域
PUBLIC_PATH=‘https://cdn.wshop.codefriend.top/admin/‘
验证是否加载成功
先编译
npm run build
如果alioss有正常工作，正常可以看到下面的截图：
然后打开dist/index.html，可以看到它引用的资源也变成了以publicPath为前缀的路径：
这样就表示修改成功了。
集成CDN
CDN的集成，不需要在代码层面做任何操作，直接登陆阿里云操作。这里罗列几个关键配置
添加域名
直接选择OSS为源站
添加CNAME记录
根据提示，进你的DNS添加一条CNAME记录
开启安全证书
后记
本文主要谈的是配置，其实CDN&OSS在使用有多种使用方法，也有许多的注意点。这个在后续文章中再谈。
这里只谈一个基本的点，这里的OSS在上传后是所有版本都保留着，假如不保留着，会出现一种情况：先发布版本A，再发布版本B，将先删除OSS上的A版本，然后再将B版本上传到OSS。这段短暂的时间新用户访问到的仍然是A，将出现404。
实战：基于spring的应用配置如何迁移至阿里云应用配置管理acm
最近遇到一些开发者朋友，准备将原有的JavaSpring的应用配置迁移到阿里云应用配置管理ACM中。迁移过程中，遇到不少有趣的问题。本文将通过一个简单的样例来还原迁移过程中遇到的问题和相关解决思路，以期达到和读者交流... 查看详情
阿里云
...价格比较实惠，感觉做软件更新服务器（），文件同步，静态网站（非动态，需备案域名），备份服务器（可用到文件生命周期管理），可与动态网站或网站存储对象，附件，支持水印，图像处理。等站点或者应用中大量静态资... 查看详情
云原生初体验阿里云serverless应用引擎sae，前端nginx静态文件持久化到对象存储oss(代码片段)
...存储OSS2、创建OSS共享目录3、创建用户AK（访问控制）4、配置SAENginx服务三、上传静态文件效果1、【云原生】初体验阿里云Serverless应用引擎SAE（一），部署Nginx服务本篇2、【云原生】初体验阿里云Serverless应用引擎SAE（二），前... 查看详情
vue项目部署到阿里云服务
参考技术A1、配置打包的命令npmrundev，打包后会将文件生成在dist文件夹下2、vue-loader和vue-template-compiler版本不一致报错,vue-loader版本在10+则更新vue-template-compiler2、静态文件、图片的引入，跟vue文件中引入路径保持一致，需要将静... 查看详情
如何使用serverlessdevs部署静态网站到函数计算
简介：手把手教你：如何使用ServerlessDevs部署静态网站到函数计算。前言公司经常有一些网站需要发布上线，对比了几款不同的产品后，决定使用阿里云的函数计算（FC)来托管构建出来的静态网站。FC弹性实例自带的500Mb存储空... 查看详情
使用nginx搭建静态网站
...个云服务器吧，那要怎么搭建呢？先来个最简单的。Nginx配置文件目录一般在/etc/nginx/下，打开nginx.conf文件可以看到配置：当外网用户访问服务器Web服务由Nginx提供，Nginx需要配置静态资源的路径信息才能通过URL正确访问到服务器... 查看详情
上传文件到阿里云
如何上传文件到阿里云服务器?下面，分别针对Windows服务器与linux服务器分享上传文件的方法，希望对大家有所帮助。阿里云湖北服务中心：武汉捷讯信息技术有限公司一、向Windows服务器上传下载文件方式 方法有很多种，此... 查看详情
如何使用serverlessdevs部署静态网站到函数计算(代码片段)
简介：手把手教你：如何使用ServerlessDevs部署静态网站到函数计算。前言公司经常有一些网站需要发布上线，对比了几款不同的产品后，决定使用阿里云的函数计算（FC)来托管构建出来的静态网站。FC弹性实例... 查看详情
如何使用serverlessdevs部署静态网站到函数计算（上）(代码片段)
简介：部署个静态网站到函数计算~前言公司经常有一些网站需要发布上线，对比了几款不同的产品后，决定使用阿里云的函数计算（FC)来托管构建出来的静态网站。FC弹性实例自带的500Mb存储空间对静态网站来说... 查看详情
阿里云宝塔wordpress建站
...镜像资源 2.2配置安全组 宝塔的控制面板需要开通端口8888，所以需要到安全组中去配置端口 2.3登陆宝塔控制面板 服务器id:8888 ... 查看详情
webpack5打包静态资源上传阿里云oss-以next为例
参考技术A修改打包后资源html访问路径前缀 查看详情
springboot整合antdesignpro进行部署
...、http://localhost:8080/user/login都会转发到index.html，从而展示AntDesignPro页面尝试访问http://localhost:8080/user/login时，发现现在已经能访问到index.html了，但页面报错了，访问不到js和css,错误页面如下：需要配置一下，让js、css等静态资源... 查看详情
如何提高阿里云上应用的可用性
摘要：如今，开发并上线一款应用十分方便。因为云计算提供了从最基础的计算资源如服务器网络、数据库服务、中间件PaaS平台到各种应用支撑的云管理服务，同时开源社区的迅猛发展也提供了从数据库、缓存到应用全生命流... 查看详情
阿里云cdnhttps最佳实践系列——动态证书
...组件是Tengine，我们知道Tengine原生是支持SSL的，只需要在配置文件中配置证书和私钥即可。在CDNHTTPS产品化以前，要开通HTTPS的域名需要把证书私钥给我们，我们在Tengine静态配置中配置，然后再同步到所有CDN边缘节点，显然这种... 查看详情
阿里云--2万并发用户方案
...假设购买下面的硬件资源：负载均衡SLB:用下面的ESC 配置 下面的DRDS：下面的Redis： 静态存储 查看详情
antdesignpro上传图片到后端
参考技术A我们这里是前端将图片上传到后端，然后后端这里再上传到阿里云的OSS，并返回一个文件的路径给前端<br/>这里的LogoPicReq没有@RequestBody，因为这里是通过表单提交的<br/>其中一定要通过直联的方式进行获取，否... 查看详情
使用阿里云oss部署静态网站
...视频等各种类型文件，也可以存储HTML格式文件。OSS允许配置访问域名和设置静态入口页，可以用来部署一个简单的静态网站。步骤1：创建Bucket您需要创建一个公共读的Bucket，用以设置静态网站托管及存放网站数据。步骤2：创建... 查看详情
阿里云如何设置一个psk
阿里云设置一个psk，步骤一：安装VPN服务打开服务器管理器，然后单击角色>添加角色。勾选网络策略和访问服务。在结果模块中确认安装成功。步骤二：配置VPN服务在路由和远程访问页面，右键单击实例，然后单击配置并启... 查看详情