在CabloyJS中將Webpack生成的文件自動上傳到阿里雲OSS

背景

阿里雲OSS提供了一個Webpack插件，可在Webpack打包結束後將webpack生成的文件自動上傳到阿里雲OSS中

下面看看在CabloyJS中如何使用該插件

新建項目，並配置MySQL鏈接參數

本處從略，請參見：快速開始 | CabloyJS

安裝插件

npm install -D webpack-alioss-plugin

插件GitHub倉庫： https://github.com/borenXue/webpack-alioss-plugin

OSS插件配置

修改項目下的build文件

{project}/build/config.js

const AliOSSPlugin = require('webpack-alioss-plugin');

const webpackPlugins = [];
webpackPlugins.push(new AliOSSPlugin({
  auth: {
    accessKeyId: '', // 在阿里 OSS 控制檯獲取
    accessKeySecret: '', // 在阿里 OSS 控制檯獲取
    region: 'oss-cn-beijing', // OSS 服務節點, 示例: oss-cn-beijing
    bucket: 'cabloy-test', // OSS 存儲空間, 在阿里 OSS 控制檯獲取
  },
  ossBaseDir: 'auto_upload_ci',
  project: 'test001', // 項目名(用於存放文件的直接目錄)
}));

// title
const title = 'test001';

// backend
const backend = {
  port: 7002,
  hostname: '127.0.0.1',
};

// front
const front = {
  build: {
    title,
    productionSourceMap: false,
    uglify: true,
    plugins: webpackPlugins,
    assetsPublicPath: 'https://cabloy-test.oss-cn-beijing.aliyuncs.com/auto_upload_ci/test001/',
  },
  dev: {
    title,
    hostname: 'localhost',
    port: 9092,
    // proxyBaseURL: 'http://localhost:7002',
  },
};

module.exports = {
  front,
  backend,
};

名稱	說明
front.build.plugins	配置OSS插件，CabloyJS會自動合併到Webpack底層配置中
front.build.assetsPublicPath	覆蓋Webpack底層配置中的publicPath

OSS跨域

因爲OSS中的字體資源與網站首頁不在同一個域名下，存在跨域問題，所以須要在阿里 OSS 控制檯配置跨域規則

好比，網站首頁域名是：https://some.front.com，那麼OSS跨域規則以下：