webpack5 打包静态资源上传阿里云OSS-以next为例

关于阿里云（前置工作）

• 首先需要在阿里云OSS开通服务，创建自己的Bucket列表。
• 出与安全考虑。需要设置为私有读写权限。
• 在阿里云获取accessKeyId和accessKeySecret
• 查看自己的region。（英文regionId）

代码部分

1. 引入webpack插件

npm i webpack-aliyun-oss -D
npm i short-uuid -D

2. 判断是否需要进行上传阿里云
   需要根据环境判断是否需要将资源打包进入阿里云。如果需要上传阿里云时，需要修改配置项assetPrefix修改打包后资源的访问前缀

const isCDN =
  process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging'

修改打包后资源html访问路径前缀

// https://test/static/ 为CDN给OSS加速路径。，如果不开通CDN,就需要设置Bucket为公共读
assetPrefix: isCDN
    ? 'https://test/static/' + uuid
    : '',

3. Webpackp配置

webpack: (config, options) => {
    // 无需进行打包上传
    if (!isCDN) return config
    config.plugins.push(
      new WebpackAliyunOss({
        from: ['./.next/static/**'],    // webpack打包后的所有静态资源存放目录
        dist: '/static/' + uuid, // oss上传目录,避免静态资源不更新，需要每次不同的目录
        region: ossConfig.region,   // OSS regionID
        accessKeyId: ossConfig.accessKeyId,  // OSS accessKeyId
        accessKeySecret: ossConfig.accessKeySecret,  // OSS accessKeySecret
        bucket: ossConfig.bucket,   // 需要上传的阿里云Bucket的全名
        overwrite: true,    // 是否需要覆盖bucket上的同名文件
        setOssPath(filePath) {   // 设置文件上传后的文件名 filePath
          // 以next为例，打包资源默认位置为.next,所以这里依靠.next定位
          const index = filePath.lastIndexOf('.next')
          let Path = filePath.substring(index, filePath.length) // filePath为当前文件路径。函数应该返回路径+文件名。
          // 修改next 前缀，用以访问文件
          Path = Path.replace('.next', '_next').replace(
            Path.replace(/\\/g, '/')
          )
          return Path
        },
      })
    )
    return config
  },

4. CDN/跨域设置
   不使用CDN 可以忽略
   选择加速的CDN域名管理

   
   
   image.png
   
   

   配置自定义相应头

header: Access-Control-Allow-Origin
value : *