next-oss

3.1.1 • Public • Published

声明

目前,next-oss包已经不在维护。请webpack项目使用hsuc; next项目请使用next-hsuc

描述

将webpack打包生成的文件上传到OSS,以提高加载速度
目前,支持阿里云、华为云、七牛和又拍云。

安装

npm install next-oss --save-dev

要求

Node

Node.js >= 10.10.0 required

next框架

添加命令

// package.json
{
  "OSSDomainName""<云端域名>",
  "OSSFolder""<云端文件夹>",
  "OSSProduction"<:boolean>, // 生产模式是否使用OSS
  "scripts"{
    "build""cross-env NODE_ENV=production webpack",  // cross-env 请自行安装
  }
}

webpack配置文件

// webpack.config.js
const NextOss = require('next-oss');
 
...
plugins: [
  ...
  new NextOss({
    disable: process.env.NODE_ENV !== "production",
    upyun: {
      serviceName: "<service name>",
      operatorName: "<operator name>",
      operatorPassword: "<operator password>",
    },
    qiniu: {
      accessKey: "<ACCESS_KEY>",
      secretKey: "<SECRET_KEY>",
      bucket: "<Bucket>"
    },
    huawei: {
      accessKeyId: "<Provide your Access Key>",
      secretAccessKey: "<Provide your Secret Key>",
      server: "<https://your-endpoint>",
      bucket: "<Bucket>"
    },
    aliyun: {
      region: "<OSS region>",
      accessKeyId: "<Your accessKeyId>",
      accessKeySecret: "<Your accessKeySecret>",
      bucket: "<Your bucket name>"
    }
  })
]

部署

npm run build
// 将打包文件夹下的index.html文件部署到服务器,确保能访问到

next框架

添加命令

// package.json
{
  "OSSDomainName""<云端域名>",
  "OSSFolder""<云端文件夹>",
  "OSSProduction"<:boolean>, // 生产模式是否使用OSS
  "scripts"{
    "build""cross-env NODE_ENV=production next build",  // 打包命令(cross-env 请自行安装)
    "start""cross-env NODE_ENV=production node server.js"   // 启动服务(这里不能用next start,得自定义服务端)
  }
}

自定义服务端

// server.js
const express = require('express');
const next = require('next');
const {OSSFolder, OSSDomainName, OSSProduction} = require('./package.json');
const { NODE_ENV, PORT=3000 } = process.env;
const dev = NODE_ENV !== 'production';
const Prod = NODE_ENV === "production";
const app = next({dir: '.', dev});
 
// 是否使用OSS(只有生产模式可以使用OSS,开发模式无效)
if(Prod ? OSSProduction : false){
  app.setAssetPrefix(`${OSSDomainName}/${OSSFolder}/`);
}
 
app.prepare().then(() => {
    const server = express();
 
    server.listen(PORT, (err) => {
      if (err) {
        throw err
      }
      console.log(`> Ready on port ${PORT} [${NODE_ENV}]`);
    })
  }).catch((ex) => {
    console.log('An error occurred, unable to start the server')
    console.log(ex)
  });

webpack配置

// next.config.js
const NextOss = require('next-oss');
const {OSSFolder, OSSDomainName, OSSProduction} = require('./package.json');
const withPlugins = require ("next-compose-plugins");
const { NODE_ENV } = process.env;
const Prod = NODE_ENV === "production";
 
...
const nextConfig = {
  webpack: (config, options) => {
    ...
    let NextOssOptions = {
      disable: Prod ? !OSSProduction : true,  // 只有生产模式可以使用OSS,开发模式无效
      upyun: {
        serviceName: "<service name>",
        operatorName: "<operator name>",
        operatorPassword: "<operator password>",
      },
      qiniu: {
        accessKey: "<ACCESS_KEY>",
        secretKey: "<SECRET_KEY>",
        bucket: "<Bucket>"
      },
      huawei: {
        accessKeyId: "<Provide your Access Key>",
        secretAccessKey: "<Provide your Secret Key>",
        server: "<https://your-endpoint>",
        bucket: "<Bucket>"
      },
      aliyun: {
        region: "<OSS region>",
        accessKeyId: "<Your accessKeyId>",
        accessKeySecret: "<Your accessKeySecret>",
        bucket: "<Your bucket name>"
      }
    };
    if(!NextOssOptions.disable) options.config.assetPrefix = `${OSSDomainName}/"${OSSFolder}/`;
    config.plugins.push(
      new NextOss(NextOssOptions)
    );
 
    return config;
  }
};
 
module.exports = withPlugins([...], nextConfig);

部署

npm run build
npm run start

NextOSS(options)支持的选项

  • aliyun - 初始化阿里云OSS。
  • huawei - 初始化华为云OBS。
  • qiniu - 初始化七牛。
  • upyun - 初始化又拍云。
  • disable - 是否禁用,默认false
  • deletePrevBuildFile - 是否删除云端以前的版本,默认false
  • log - 是否显示日志,默认true
  • cover - 图片、字体文件是否覆盖,默认true

对象存储CORS规则设置

注意事项

  • 云端访问权限请设置为“公共读写”或者“公共读”
  • options参数中aliyunhuaweiqiniuupyun同时配置只有第一个有效
  • options.disable 该插件在非生产模式禁用,生产模式可以在package.json中的OSSProduction设置是否禁用。
  • options.deletePrevBuildFile 启用该项会把以前的版本删掉,建议在服务器定期清理。
  • options.cover 设置为false不覆盖时,请将图片、字体的文件名添加[hash]值。否则,会找不到资源

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
3.1.11latest
3.0.7-beta11beta1

Version History

VersionDownloads (Last 7 Days)Published
3.1.11
3.1.00
3.0.7-beta11
3.0.70
3.0.61
3.0.51
3.0.40
3.0.31
3.0.21
3.0.11
3.0.01
2.0.31
2.0.20
2.0.10
2.0.01
1.2.70
1.2.51
1.2.41
1.2.30
1.1.31
1.1.21
1.1.10
1.0.11
1.0.01
0.1.41
0.1.31
0.1.21
0.1.10
0.1.01

Package Sidebar

Install

npm i next-oss

Weekly Downloads

0

Version

3.1.1

License

ISC

Unpacked Size

22 kB

Total Files

5

Last publish

Collaborators

  • kszitt