Next-oss NPM | npm.io

声明

目前，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);