声明
目前，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 startNextOSS(options)支持的选项
aliyun- 初始化阿里云OSS。huawei- 初始化华为云OBS。qiniu- 初始化七牛。upyun- 初始化又拍云。disable- 是否禁用，默认false。deletePrevBuildFile- 是否删除云端以前的版本，默认falselog- 是否显示日志，默认truecover- 图片、字体文件是否覆盖，默认true。
对象存储CORS规则设置
注意事项
- 云端访问权限请设置为“公共读写”或者“公共读”
options参数中aliyun、huawei、qiniu和upyun同时配置只有第一个有效options.disable该插件在非生产模式禁用，生产模式可以在package.json中的OSSProduction设置是否禁用。options.deletePrevBuildFile启用该项会把以前的版本删掉，建议在服务器定期清理。options.cover设置为false不覆盖时，请将图片、字体的文件名添加[hash]值。否则，会找不到资源