如何配置Ant Design Pro的静态资源到阿里云CDN

简介

大部分的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

关于在阿里云上创建和使用OSS的过程这里只提几个重点。

第1个:bucket应该是公共读,然后外网域名可从下图找到。

第2个:开启定时自动删除文件的功能,防止bucket无限增长

第3个:对于上传的文件,应该检查下它的头部是否设置正确,压缩和过期对于用户的体验有直接的影响。(上传后检查)

安装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: '/',
          project: 'admin', // 项目名(用于存放文件的直接目录)
          options: {
            headers: {
              'Cache-Control': 'max-age=2592000',
            },
          },
        },
      ]);
    }
  },
  // 省略无关配置...    
}

配置环境变量

创建.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.codefriend.top/admin/' # 替换成OSS提供的公网域名或者自己设置的CDN域名

验证是否加载成功

先编译

npm run build

如果alioss有正常工作,正常可以看到下面的截图:

然后打开dist/index.html,可以看到它引用的资源也变成了以publicPath为前缀的路径:

这样就表示修改成功了。

集成CDN

在国内使用CDN域名必须备案,如果没备案这里不用看了,直接使用OSS提供的域名也可以。

CDN的集成,不需要在代码层面做任何操作,直接登陆阿里云操作。这里罗列几个关键配置

添加域名

直接选择OSS为源站

添加CNAME记录

根据提示,进你的DNS添加一条CNAME记录

开启安全证书

后记

本文主要谈的是配置,其实CDN&OSS在使用有多种使用方法,也有许多的注意点。这个在后续文章中再谈。
这里只谈一个基本的点,这里的OSS在上传后是所有版本都保留着,假如不保留着,会出现一种情况:先发布版本A,再发布版本B,将先删除OSS上的A版本,然后再将B版本上传到OSS。这段短暂的时间新用户访问到的仍然是A,将出现404。

posted @ 2020-05-16 00:22  枫叶落一地  阅读(3098)  评论(0编辑  收藏  举报