腾讯云 Serverless SSR 静态资源托管改造
文档简介：
功能介绍：
当项目中的静态资源过多时，直接部署会导致每次请求页面时，所有的静态资源也要进行重新请求与加载，使得应用的单位时间并发数会根据页面静态资源请求数而增加，从而造成冷启动问题。 Serverless SSR 支持使用静态资源托管来存储您的静态资源，缩短冷启动时间。
咨询热线：400-826-7010，为您提供专业的售前咨询，让您快速了解云产品，助您轻松上云！
微信咨询
免费试用、价格特惠
操作场景
当项目中的静态资源过多时，直接部署会导致每次请求页面时，所有的静态资源也要进行重新请求与加载，使得应用的单位时间并发数会根据页面静态资源请求数而增加，从而造成冷启动问题。 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: orgDemoapp: appDemostage: devcomponent: nextjsname: nextjsDemoinputs:src:dist: ./hook: npm run buildexclude:- .envregion: ap-guangzhouruntime: Nodejs10.15apigatewayConf:# 此处省略....# 静态资源相关配置staticConf:cosConf:# 这里是创建的 COS 桶名称bucket: serverless-nextjs
4. 修改好配置后，在根目录下执行 serverless deploy ，完成部署。
sls deploy
