简单概述
我们在生产环境时，需要执行npm run build, 此时会将组件个样式编译压缩成index.html 和若干个js文件和css文件, 然后存在在项目的dist文件夹下。
如果我们是部署在云服务器上的话，租用的带宽可能就1M，那么加载这些页面必定会有点慢。当然租用的是百兆带宽的话，只能说是土豪，请忽略本篇文章。
所以，这时候，就可以将除index.html外的文件存放在oss上，通过
CDN的方式加快访问速度，且价格更便宜（云服务器也是通过流量计费的）。
什么是CDN
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。(内容来自百度百科)
关于OSS
对象存储服务（Object Storage Service，简称OSS），是提供的海量、安全、低成本、高可靠的云存储服务。您可以通过本文档提供的简单的REST接口，在任何时间、任何地点、任何互联网设备上进行上传和下载数据。基于OSS，您可以搭建出各种多媒体分享网站、网盘、个人和企业数据备份等基于大规模数据的服务。（内容来自阿里云）
实现教程
1、流程
run build -> 编译 -> 上传文件到oss-> 删除本地文件-> 修改index.html文件引用地址
2、安装插件
我们需要插件来实现这个过程webpack-alioss-plugin
npm install -D webpack-alioss-plugin
# 或者
yarn add -D webpack-alioss-plugin
3、修改配置
这里我用的antd pro版本是4.x的, 修改的配置大同小异。
- 在
config/config.js的文件里添加
import AliOSSPlugin from 'webpack-alioss-plugin';
export default defineConfig({
....
publicPath: process.env.PUBLIC_PATH || '/', // index.html引用文件的地址
// 开始编译时
chainWebpack(config) {
// 如果存在oss配置
if (process.env.WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_ID) {
config.plugin('alioss').use(AliOSSPlugin, [
{
ossBaseDir: '/', // 存放在oss的路径， 一般是更目录
project: 'xxx', // 项目名(用于存放文件的直接目录)
options: {
headers: {
'Cache-Control': 'max-age=2592000', // 缓存时长
},
},
},
]);
}
}
})
- 添加
.env文件
env文件一般用于存放参数变量的，比如oss的key 和秘钥等一些配置。
默认是没有env文件的，所以需要在项目的根目录添加.env文件。添加配置如下：
WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_ID= # key
WEBPACK_ALIOSS_PLUGIN_ACCESS_KEY_SECRET= # 秘钥
WEBPACK_ALIOSS_PLUGIN_BUCKET= # bucket 名称
WEBPACK_ALIOSS_PLUGIN_REGION=oss-cn-beijing # 区域节点
PUBLIC_PATH= # 文件引用地址
4、注意点
- 上面的config里的
process.env.key是可以读取到env里的键值的。 - env里的几个变量都是固定的，插件会自动去读取，如果需要自动以，可以参考github里的说明。
-
ACCESS_KEY_ID和ACCESS_KEY_SECRET可以再下拉头像里的AccessKey设置获取。
获取秘钥 -
在bucket列表里可以创建bucket
创建bucket -
创建好后，在概述中可以看到该bucket的一些信息，包括使用流量，区域节点等信息。
bucket信息 - env里的
PLUGIN_REGION应填类似oss-cn-beijing的值， 而不是oss-cn-beijing.aliyuncs.com,我也是试了好多遍， - PUBLIC_PATH 是文件编译后，index.html中引用js和css的地址，一般是
https://bucket域名 / bucket 名
<html>
<body>
<script src="https://xxx.oss-cn-beijing.aliyuncs.com/xxx/umi.xxxxxxxxx.js"></script>
<body>
<html>
-
bucket要设置可读，不然编译后，仍然加载不到文件
image.png
5、编译测试
-
执行
npm run build终端会提示编译和上传信息
编译上传 检查dist文件下，里面就
index.html和asset-manifest.json两个文件检查index.html文件，引用的css和js相关文件都是引用oss的地址
-
利用vs code 打开index.html， 利用
Go live(vs code的一个插件，可以模拟运行页面)运行index.html, 可以看到css和js加载地址为oss地址。如果加载失败，结合信息修改调试。
加载信息 -
查看oss上，上传的文件。多次上传，oss会区分历史版本和最新版本
文件列表 -
为了清除历史版本文件，可以设置历史版本文件的过期时间。在
基础设置->生命周期中设置
生命周期设置
6、利用git lab的ci流水线来实现
上面讲的，秘钥等信息存储到env文件里，而上传到服务器时，该文件也要上传，这样是很不安全的。但是如果有用到ci流水线自动部署的话， 可以将秘钥等信息设置在ci环境变量设置里。在项目xxx->设置->CI/CD->变量中设置
在执行提交的时候。触发ci流水线，有执行npm run build的话，文件就会被上传。关于流水线，该教程不讲。
