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
?
静态资源托管改造

本页目录：

操作场景

配置流程

控制台配置

模板部署

导入已有项目

命令行部署配置
