一、模板部署
通过模板创建时，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，完成静态资源托管的配置。
三、命令行部署配置
如果你使用 Serverless 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: orgDemoapp: appDemostage: devcomponent: nextjsname: nextjsDemoinputs: src: dist: ./ hook: npm run build exclude: – .env region: ap-guangzhou runtime: Nodejs10.15 apigatewayConf: # 此处省略…. # 静态资源相关配置 staticConf: cosConf: # 这里是创建的 COS 桶名称 bucket: serverless-nextjs
4. 修改好配置后，在根目录下执行 scf deploy，完成部署。
scf deploy