Svelte是前端框架界新秀，以小巧、响应式、无virtual Dom著称，就像React有对应的SSR框架Next.js一样，Svelte也有自己官方的SSR 框架Sapper，也是小巧，灵活。
腾讯云开发（CloudBase，TCB）则是腾讯云提供的Serverless云服务，提供云函数、云存储、静态部署等能力，可以用来快速开发多端应用(小程序，公共号，Web应用，Flutter客户端……)，然后还提供不错的免费额度！
下面我们来将Svelte Sapper部署到CloudBase的云函数上。
作者简介
王成才，任职于腾讯前端开发工程师，全栈工程师，就职于腾讯TCE专有云产品中心前端团队，负责开发了TCE多个云产品前端部分，以及TCE内部文档系统前后端的开发维护，有着丰富的React，Node.js，React SSR开发经验，对Svelte 以及其生态的Sapper也有着丰富的经验。
开通云开发CloudBase
现在腾讯云控制台开通云开发CloudBase，并创建你的应用：
然后新建一个Node.js的云函数。
安装依赖
请确保你电脑已经安装了Node.js ，如果没有请访问nodejs.org来安装。
安装cli
使用npm
代码语言：javascript复制$ npm i -g @cloudbase/cli或者Yarn
代码语言：javascript复制$ yarn global add @cloudbase/cli安装成功后，就可以在命令行输入 cloudbase -v，为了简化输入，cloudbase可以简写成tcb。例如， tcb -h获取帮助。
登录到cloudbase
代码语言：javascript复制$ tcb login之后会跳转到浏览器，如图授权界面
创建项目
使用tce命令先拉取上面创建的云函数
代码语言：javascript复制$ tcb init交互式的命令
代码语言：javascript复制$ cloudbase init? 选择关联环境 xxx - [xxx-xxx]? 请输入项目名称 svelte-sapper-tcb? 选择模板语言 Node? 选择云开发模板 Hello World✔ 创建项目 svelte-sapper-tcb 成功！然后进入刚才创建的目录
代码语言：javascript复制cd /svelte-sapper-tcb然后在functions(云函数约定)文件夹创建svelte sapper应用
代码语言：javascript复制$ npx degit "sveltejs/sapper-template#rollup" functions/svelte-sapper这样sapper应用就创建到 functions/svelte-sapper目录下面，我们先安装运行：
代码语言：javascript复制$ cd ./functions/svelte-sapper$ npm install$ npm run dev浏览器中访问http://localhost:3000，如果能看到如下图，说明我们安装成功了。
改造项目以支持tcb云函数
1. 修改 cloudbaserc.js中functions中第一个项目 name为 svelte-sapper
2. 云函数依赖 serverless-httpnpm包
$ npm i serverless-http -S云函数不再需要我们监听系统端口，因此我们需要 serverless-http包裹 ./functions/svelte-sapper/src/server.js文件中 polka(polka类似express node.js框架)的几个中间件，改造完我们也就不需要依赖 polka了，我在这里贴出代码。
import sirv from 'sirv';//import polka from 'polka';import compression from 'compression';import * as sapper from '@sapper/server';import serverless from 'serverless-http'const { PORT, NODE_ENV } = process.env;const dev = NODE_ENV === 'development';const use = (...funs) => { return (req,res) => { function dispath(index) { if (index < 0 || index === funs.length) {return} function next() { return dispath(index 1) } return funs[index](req,res,next) } return dispath(0) }}export const main = serverless((req,res)=>{ use( compression({ threshold: 0 }), sirv('static', { dev }), sapper.middleware() )(req,res)})3. 增加云函数调用文件
实际上可以从 cloudbaserc.js中functions的配置 handler:"index.main"中看出，云函数会调用 svelte-sapper下面 index中的 main函数，但是sapper中的入口在src下面，简单期间我们在 svelte-sapper下面创建 index.js文件。
exports.main = require('./__sapper__/build/server/server').main__sapper__/build是sapperbuild后的文件目录。
如此即可正确被调用。
部署应用
在 ./functions/svelte-sapper目录
$ npm run build然后在项目根目录部署应用到tcb
代码语言：javascript复制$ tcb functions:deploy成功后我们尝试访问 https://${env-id}.service.tcloudbase.com会发现无法访问( env-id可以从 cloudbaserc.js的 envId中得到)，我们还需要给tcb增加路由。
$ tcb service:create -f svelte-sapper -p /svelte-sapper现在我们访问 https://${env-id}.service.tcloudbase.com/svelte-sapper可以访问到内容，但是是一个报错信息(originalUrl 为undefined)，是因为serverless的req对象中没有originalUrl的内容，我们先简单增加 req.originalUrl =req.url。
还记得刚才增加的云路由svelte-sapper吗？我们还需要增加 req.baseUrl ='/svelte-sapper'来设置页面的base，修改 ./functions/svelte-sapper/src/server.js文件。
export const main = serverless((req,res)=>{ req.originalUrl = req.url req.baseUrl = '/svelte-sapper' use( compression({ threshold: 0 }), sirv('static', { dev }), sapper.middleware() )(req,res)})还有在云函数中不应该使用图片，音频等这种二进制文件，我们刚才 dev时候看到的图片云函数无法直接显示(正式使用应该将其放入云存储等地方)。这里我们简单转换为base64。
修改 ./functions/svelte-sapper/src/routes/index.svelte中。
然后build后再部署。
代码语言：javascript复制$ tcb functions:deploy --force成功后，刷新浏览器，我们就可以看到漂亮的sapper网页了。
