簡單概述
我們在生產(chǎn)環(huán)境時，需要執(zhí)行npm run build, 此時會將組件個樣式編譯壓縮成index.html 和若干個js文件和css文件, 然后存在在項目的dist文件夾下摹察。
如果我們是部署在云服務(wù)器上的話碧囊，租用的帶寬可能就1M，那么加載這些頁面必定會有點慢纤怒。當(dāng)然租用的是百兆帶寬的話糯而，只能說是土豪，請忽略本篇文章泊窘。
所以熄驼，這時候，就可以將除index.html外的文件存放在oss上烘豹，通過
CDN的方式加快訪問速度瓜贾，且價格更便宜（云服務(wù)器也是通過流量計費(fèi)的）。
什么是CDN
CDN的全稱是Content Delivery Network携悯，即內(nèi)容分發(fā)網(wǎng)絡(luò)祭芦。CDN是構(gòu)建在現(xiàn)有網(wǎng)絡(luò)基礎(chǔ)之上的智能虛擬網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器憔鬼，通過中心平臺的負(fù)載均衡龟劲、內(nèi)容分發(fā)、調(diào)度等功能模塊轴或，使用戶就近獲取所需內(nèi)容昌跌，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率侮叮。CDN的關(guān)鍵技術(shù)主要有內(nèi)容存儲和分發(fā)技術(shù)避矢。(內(nèi)容來自百度百科)
關(guān)于OSS
對象存儲服務(wù)（Object Storage Service，簡稱OSS）囊榜，是提供的海量审胸、安全、低成本卸勺、高可靠的云存儲服務(wù)砂沛。您可以通過本文檔提供的簡單的REST接口，在任何時間曙求、任何地點碍庵、任何互聯(lián)網(wǎng)設(shè)備上進(jìn)行上傳和下載數(shù)據(jù)映企。基于OSS静浴，您可以搭建出各種多媒體分享網(wǎng)站堰氓、網(wǎng)盤、個人和企業(yè)數(shù)據(jù)備份等基于大規(guī)模數(shù)據(jù)的服務(wù)苹享。（內(nèi)容來自阿里云）
實現(xiàn)教程
1双絮、流程
run build -> 編譯 -> 上傳文件到oss-> 刪除本地文件-> 修改index.html文件引用地址
2、安裝插件
我們需要插件來實現(xiàn)這個過程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文件一般用于存放參數(shù)變量的宫纬，比如oss的key 和秘鑰等一些配置焚挠。
默認(rèn)是沒有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 # 區(qū)域節(jié)點
PUBLIC_PATH= # 文件引用地址
4蝌衔、注意點
- 上面的config里的
process.env.key是可以讀取到env里的鍵值的。 - env里的幾個變量都是固定的蝌蹂，插件會自動去讀取胚委，如果需要自動以，可以參考github里的說明叉信。
-
ACCESS_KEY_ID和ACCESS_KEY_SECRET可以再下拉頭像里的AccessKey設(shè)置獲取。
獲取秘鑰 -
在bucket列表里可以創(chuàng)建bucket
創(chuàng)建bucket -
創(chuàng)建好后艘希，在概述中可以看到該bucket的一些信息硼身，包括使用流量，區(qū)域節(jié)點等信息覆享。
bucket信息 - env里的
PLUGIN_REGION應(yīng)填類似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要設(shè)置可讀，不然編譯后凤壁，仍然加載不到文件
image.png
5吩屹、編譯測試
-
執(zhí)行
npm run build終端會提示編譯和上傳信息
編譯上傳 檢查dist文件下，里面就
index.html和asset-manifest.json兩個文件檢查index.html文件拧抖，引用的css和js相關(guān)文件都是引用oss的地址
-
利用vs code 打開index.html煤搜， 利用
Go live(vs code的一個插件，可以模擬運(yùn)行頁面)運(yùn)行index.html, 可以看到css和js加載地址為oss地址唧席。如果加載失敗擦盾，結(jié)合信息修改調(diào)試嘲驾。
加載信息 -
查看oss上，上傳的文件迹卢。多次上傳辽故，oss會區(qū)分歷史版本和最新版本
文件列表 -
為了清除歷史版本文件，可以設(shè)置歷史版本文件的過期時間腐碱。在
基礎(chǔ)設(shè)置->生命周期中設(shè)置
生命周期設(shè)置
6誊垢、利用git lab的ci流水線來實現(xiàn)
上面講的，秘鑰等信息存儲到env文件里喻杈，而上傳到服務(wù)器時彤枢，該文件也要上傳，這樣是很不安全的筒饰。但是如果有用到ci流水線自動部署的話缴啡， 可以將秘鑰等信息設(shè)置在ci環(huán)境變量設(shè)置里。在項目xxx->設(shè)置->CI/CD->變量中設(shè)置
在執(zhí)行提交的時候瓷们。觸發(fā)ci流水線业栅，有執(zhí)行npm run build的話，文件就會被上傳谬晕。關(guān)于流水線碘裕，該教程不講。
