Serverless SSR 静态资源托管改造 - 操作指南

操作场景

当项目中的静态资源过多时，直接部署会导致每次请求页面时，所有的静态资源也要进行重新请求与加载，使得应用的单位时间并发数会根据页面静态资源请求数而增加，从而造成冷启动问题。Serverless SSR 支持使用静态资源托管来存储您的静态资源，缩短冷启动时间。

配置流程

控制台配置

模版部署

通过模版创建时，Serverless SSR 已提前在模版中完成了静态资源的配置，并默认开启，您无需进行任何改造操作，即可创建一个使用静态资源托管的 SSR 应用。

创建流程：创建过程中，Serverless SSR 会自动为您创建一个新的 COS 存储桶，并将项目中自动将编译生成的 .next（或 .nuxt）和 public 文件夹静态资源上传到该 COS，使得静态资源均通过访问 COS 获取，无需重复请求云函数获取静态资源。

导入已有项目

导入已有项目时，除了在控制台开启"静态资源托管"功能外，您还需对您已有项目进行如下改造：

1. 在项目目录下，创建 next.config.js 配置文件（nuxt 项目配置文件名为 nuxt.config.js）。
2. 在配置文件中加入如下内容：

• next.js

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  env: {
    STATIC_URL: isProd ? process.env.STATIC_URL : '',
  },
  assetPrefix: isProd ? process.env.STATIC_URL : '',
};

• nuxt.js

export default {
  // ...
  env: {
    STATIC_URL: process.env.STATIC_URL || '',
  },
  build: {
    extend(config, { isDev, isClient }) {
      if (!isDev && process.env.STATIC_URL) {
        config.output.publicPath = process.env.STATIC_URL
      }
    },
  },
  // ...
}

3. 改造完成后，将已有项目导入并完成部署，Serverless SSR 会自动帮您注入生成的静态文件托管 URL，完成静态资源托管的配置。

命令行部署配置

如果您使用 Serevrless Framework 命令行工具完成项目开发，静态资源托管配置步骤如下：

1. 选择静态资源存储桶，获取存储路径。

   您可以通过 COS 控制台 或 Serverless COS 组件 快速创建您的存储桶，也可以选择已有存储桶，创建完成后通过 COS 控制台 的存储桶概览页获取存储桶路径。
   

2. 创建配置文件 next.config.js（nuxt 项目配置文件名为 nuxt.config.js），填入以下内容，STATIC_URL 改为您存储桶的 URL 路径：

• next.js

const isProd = process.env.NODE_ENV === 'production';
const STATIC_URL =
  "https://xxxxx.cos.ap-guangzhou.myqcloud.com";
module.exports = {
  env: {
    STATIC_URL: isProd ? STATIC_URL : '',
  },
  assetPrefix: isProd ? STATIC_URL : '',
};

• nuxt.js

const STATIC_URL =
  "https://xxxxx.cos.ap-guangzhou.myqcloud.com";
export default {
  // ...
  env: {
    STATIC_URL: STATIC_URL || '',
  },
  build: {
    extend(config, { isDev, isClient }) {
      if (!isDev && STATIC_URL) {
        config.output.publicPath = STATIC_URL
      }
    },
  },
  // ...
}

3. 在 serverless.yml 中`，新增静态资源相关配置 staticConf，如下：

org: orgDemo
app: appDemo
stage: dev
component: nextjs
name: nextjsDemo

inputs:
  src:
    dist: ./
    hook: npm run build
    exclude:
      - .env
  region: ap-guangzhou
  runtime: Nodejs10.15
  apigatewayConf:
    # 此处省略....
  # 静态资源相关配置
  staticConf:
    cosConf:
      # 这里是创建的 COS 桶名称
      bucket: serverless-nextjs

4. 修改好配置后，在根目录下执行 serverless deploy ，完成部署。

   sls deploy