將 Vue.js 專案部署至靜態網站托管，并開啟 Gzip 壓縮-有解無憂

摘要：關于使用 Nginx 開啟靜態網站 Gzip 壓縮的教程已經有很多了，但是好像沒幾個講怎么在物件存盤的靜態網站中開啟 Gzip 壓縮，其實也不復雜，我們一起來看下~

本文分享自華為云社區《將 Vue.js 專案部署至靜態網站托管，并開啟 Gzip 壓縮》，作者：云存盤開發者支持團隊，

關于使用 Nginx 開啟靜態網站 Gzip 壓縮的教程已經有很多了，但是好像沒幾個講怎么在物件存盤的靜態網站中開啟 Gzip 壓縮，其實也不復雜，我們一起來看下~

1.打包專案

1.1 先安裝 compression-webpack-plugin 插件：

npm install compression-webpack-plugin --save-dev

1.2 在 vue.config.js 中開啟壓縮插件(專案下沒有此檔案可以在根目錄下創建):

const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = defineConfig({
 transpileDependencies: true,
 configureWebpack: config => {
 config.externals = {}
 if (process.env.NODE_ENV === 'production') {
 return {
                plugins: [new CompressionWebpackPlugin({
                    test: /\.js$|\.html$|\.css/, // 壓縮檔案的后綴
                    threshold: 1024, // 對超過 1k 的檔案進行壓縮
 deleteOriginalAssets: true, // 不需要保留壓縮前檔案
 })]
 }
 }
 }
})

1.3 運行 npm run build 打包專案，打包后打開打包產物目錄，可以看到檔案后綴有 .gz

2.開啟靜態網站托管并上傳網站

2.1 創建桶并開啟靜態網站托管

進入物件存盤控制臺，點擊右上角創建桶，

這里桶名需要注意下，全域唯一，不能與其他人的重復，桶策略選擇公共讀

注意：開啟公共讀后，任何人均能訪問你桶內的資料！！強烈建議這個桶僅用作靜態網站托管，不要存放隱私資料
注意：開啟公共讀后，任何人均能訪問你桶內的資料！！強烈建議這個桶僅用作靜態網站托管，不要存放隱私資料
注意：開啟公共讀后，任何人均能訪問你桶內的資料！！強烈建議這個桶僅用作靜態網站托管，不要存放隱私資料

創建后點擊桶名，進入桶配置，點擊靜態網站托管，配置靜態網站

此處示例專案比較簡單，默認首頁和默認 404 頁面均填寫 index.html，不需要配置重定向規則

這個網址即是網站地址

此時點擊打開會提示 404，因為我們還沒有上傳網站檔案，接下來會上傳網站檔案并配置 Gzip 壓縮，

2.1.1 配置域名決議

在配置靜態網站時，可以看到有提示從 22 年 3 月開始 OBS 禁止通過默認域名（桶訪問域名或靜態網站訪問域名）使用靜態網站托管功能，如果是新創建的桶，必須要配置桶域名才能訪問，

點擊左側域名管理，點擊系結用戶域名

設定完成后，需要去自己的域名供應商處將域名 CNAME 指向 OBS 桶域名，等待一會兒決議生效，

2.2 上傳靜態網站并配置 Gzip 壓縮

這里先講兩個錯誤步驟和錯誤的原因原因，太長不看可跳轉 # 2.2.2 正確方案，更推薦直接參考 # 3 更進一步--自動設定元資料

2.2.1 試錯手動方案

由于物件存盤的物件名強唯一的，即并不會自動把 xxx.js 指向 xxx.js.gz，此時如果直接把 dist 目錄下檔案上傳到物件存盤并開啟靜態網站托管，會發現瀏覽器找不到 .gz 檔案，會報錯 404，頁面一片空白，

手動版解決方法非常粗暴，直接上傳前把檔案名后綴 .gz 去掉再上傳就行，這里需要記下來都改了哪些檔案的后綴，一會兒要用到，

去除后綴后，請求沒報錯 404 了，但是頁面還是一片空白，這又是為啥？

原因是瀏覽器是根據服務器發來的請求頭來判斷收到的檔案到底是什么型別，再決定該如何處理，如果內容被壓縮了，就必須要顯示的告訴瀏覽需要解壓后才能使用，Nginx 配置后，會自動給回應加上說明告知瀏覽器，但是物件存盤不會主動告知，需要我們處理，

手動處理方法也很粗暴，挨個去設定元資料添加 Content-Encoding: gzip，此處使用 OBS Browser+ 工具，瀏覽器操作類似，

2.2.2 正確方案

手動將所有物件的 .gz 后綴去掉
挨個去給去過后綴的物件添加元資料：Content-Encoding: gzip

3. 更進一步 —— 自動設定元資料

本文用的示例專案比較簡單，只有三個檔案需要改，手工改還不麻煩，但是對與復雜專案可能要幾十上百個檔案，處理起來就非常麻煩，程式員的思路就是能代碼解決就不要動手，這里我們使用資料工坊 DWR 服務自動改檔案名 + 改后綴，這里的介紹比較簡單，如果想使用 DWR 進行更為復雜的操作，可以參考這篇博文

3.1 創建函式

首先進入 FunctionGraph 服務，創建一個修改檔案名和元資料的 Serverless 函式，記得切換下 region，選擇目標 OBS 桶所在 Region，

函式內容為

# -*- coding:utf-8 -*-
from urllib.parse import unquote_plus
from obs import ObsClient, SetObjectMetadataHeader
def handler(event, context):
 # 獲取桶名與物件名
 region_id, bucket_name, object_name = get_obs_obj_info(event.get("Records", None)[0])
 context.getLogger().info(f"bucket name: {bucket_name}, object key: {object_name}")
 ak = context.getAccessKey()
 sk = context.getSecretKey()
    server = 'obs.' + region_id + '.myhuaweicloud.com'
 obs_client = ObsClient(access_key_id=ak, secret_access_key=sk, server=server)
 # 獲取物件
 object_content = obs_client.getObject(bucket_name, object_name, loadStreamInMemory=False)
 # 去掉 .gz 后綴
 new_object_name = object_name[:-3]
 # 重新上傳
    resp = obs_client.putObject(bucket_name, new_object_name, content=object_content.body.response)
 # 設定元資料
    headers = SetObjectMetadataHeader(contentEncoding="gzip")
 obs_client.setObjectMetadata(bucket_name, new_object_name, headers=headers)
 context.getLogger().info("Upload Success")
 return
def get_obs_obj_info(record):
 if 's3' in record:
        s3 = record['s3']
 return record["eventRegion"], s3['bucket']['name'], unquote_plus(s3['object']['key'])
 else:
 obs_info = record['obs']
 return record["eventRegion"], obs_info['bucket']['name'], \
 unquote_plus(obs_info['object']['key'])