next-hsuc

react服务端渲染，打包文件上传到云端，提高加载速度

Usage no npm install needed!

<script type="module">
  import nextHsuc from 'https://cdn.skypack.dev/next-hsuc';
</script>

README

描述

将webpack打包生成的文件上传到云端，以提高加载速度
目前，支持阿里云、华为云、腾讯云、七牛云和又拍云，以及自定义扩展。

安装

npm install next-hsuc --save-dev

要求

Node

Node.js >= 10.10.0 required

使用

package.json 添加命令

// cross-env 需要先安装，npm install cross-env --save-dev

"dev": "cross-env PORT=80 PROXY=true node server.js",
"build": "cross-env NODE_ENV=production next build",
"start": "cross-env NODE_ENV=production PORT=80 PROXY=true node server.js"

server.js 可以用自己的，这个只是举例

const express = require('express');
const next = require('next');
const { NODE_ENV, PORT=3000, PROXY } = process.env;
const app = next({dir: '.', dev: NODE_ENV !== "production"});

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)
  });

next.config.js 配置文件

// webpack.config.js
const withPlugins = require ("next-compose-plugins");
const {PHASE_DEVELOPMENT_SERVER} = require('next-server/constants');
const Hsuc = require('hsuc');
const HsucOptions = {
    cloudFolder: "<云端文件夹>",
    domain: "<域名>",
    enable: true,
    // 阿里云（任选其一）
    aliyun: {
      region: "<OSS region>",
      accessKeyId: "<Your accessKeyId>",
      accessKeySecret: "<Your accessKeySecret>",
      bucket: "<Your bucket name>"
    }
    // 华为云（任选其一）
    huawei: {
      accessKeyId: "<Provide your Access Key>",
      secretAccessKey: "<Provide your Secret Key>",
      server: "<https://your-endpoint>",
      bucket: "<Bucket>"
    },
    // 腾讯云（任选其一）
    tencent: {
      secretId: "<SecretId>",
      secretKey: "<SecretKey>",
      bucket: "<Bucket>",
      region: "<Region>"
    },
    // 七牛云（任选其一）
    qiniu: {
      accessKey: "<ACCESS_KEY>",
      secretKey: "<SECRET_KEY>",
      bucket: "<Bucket>"
    },
    // 又拍云（任选其一）
    upyun: {
      serviceName: "<service name>",
      operatorName: "<operator name>",
      operatorPassword: "<operator password>",
    }
}

const nextConfig = {
  webpack: (config, options) => {
    config.plugins.push(
      new Hsuc(Object.assign(HsucOptions, options))
    )

    return config;
  },
  distDir: "_next",
  ["!" + (HsucOptions.enable ? PHASE_DEVELOPMENT_SERVER : "")]: {
    assetPrefix: `${HsucOptions.domain}/${HsucOptions.cloudFolder}`,
  }
};

module.exports = withPlugins(
    [...], 
    nextConfig);
)

hsuc(options)支持的选项

  • aliyun - 初始化阿里云OSS参数。
  • huawei - 初始化华为云OBS参数。
  • tencent - 初始化腾讯云COS参数。
  • qiniu - 初始化七牛云参数。
  • upyun - 初始化又拍云参数。
  • enable[boolean] - 是否启用，默认true。
  • removePrevVersion[boolean] - 是否删除云端以前的版本，默认false
  • log[boolean] - 是否显示日志，默认false
  • cover[boolean|RegExp] - 图片、字体文件是否覆盖，默认false，填写正则时可以参考/\.(png|jpe?g|gif|ico|woff2?|svg|ttf|eot)$/。
  • custom[js文件，例如require("./template.js")] - 自定义上传文件，可以参照项目中的文件template.js文件，能够作为除aliyun huawei qiniu upyun之外的扩展或修改。

对象存储CORS规则设置

注意事项

  • options参数中aliyun、huawei、tencent、qiniu和upyun同时配置只有第一个有效
  • 该插件在开发模式时禁用
  • options.deletePrevBuildFile 启用该项会把以前的版本删掉，请谨慎。

部署

npm run build
mpm run start