Antd Pro 编译后自动上传编译文件到阿里OSS

简单概述

我们在生产环境时，需要执行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的话，文件就会被上传。关于流水线，该教程不讲。

Antd Pro 编译后自动上传编译文件到阿里OSS