---
title: "使用腾讯云开发来部署Svelte Sapper应用"
description: "Svelte是前端框架界新秀，以小巧、响应式、无virtual Dom著称，就像React有对应的SSR框架Next.js一样，Svelte也有自己官方的SSR 框架Sapper，也是小巧，灵活。"
url: "https://hicc.pro/p/blog/svelte-sapper-tcb"
author: "tyler wang"
published: "2020-10-07T13:35:24.000Z"
updated: "2020-10-07T13:36:51.000Z"
category: "blog"
image: "https://image.hicc.pro/pro/2020/4/74CC3B2F-65C5-4667-8061-E29420A02EA8.png"
lang: "zh-CN"
site: "Hipo日志"
---
# 使用腾讯云开发来部署Svelte Sapper应用
[Svelte](https://svelte.dev)是前端框架界新秀，以小巧、响应式、无virtual Dom著称，就像React有对应的SSR框架[Next.js](https://nextjs.org)一样，Svelte也有自己官方的SSR 框架[Sapper](https://sapper.svelte.dev)，也是小巧，灵活。
腾讯云开发（CloudBase，TCB）则是腾讯云提供的Serverless云服务，提供云函数、云存储、静态部署等能力，可以用来快速开发多端应用(小程序，公共号，Web应用，Flutter客户端……)，然后还提供不错的免费额度^\_^
下面我们来将Svelte Sapper部署到CloudBase的云函数上。
#### 开通云开发CloudBase
现在腾讯云控制台开通云开发CloudBase，并创建你的应用
然后新建一个Nodejs的云函数。
#### 安装依赖
请确保你电脑已经安装了Node.js ，如果没有请访问[nodejs.org](https://nodejs.org)来安装。
##### 安装cli
使用npm
```shell
$ npm i -g @cloudbase/cli
```
或者Yarn
```shell
$ yarn global add @cloudbase/cli
```
安装成功后，就可以在命令行输入 `cloudbase -v`，为了简化输入，cloudbase可以简写成tcb。例如，`tcb -h`获取帮助。
##### 登录到cloudbase
```shell
$ tcb login
```
之后会跳转到浏览器，如图授权界面
#### 创建项目
使用tce命令先拉取上面创建的云函数
```shell
$ tcb init
```
交互式的命令
```shell
$ cloudbase init
? 选择关联环境 xxx - [xxx-xxx]
? 请输入项目名称 svelte-sapper-tcb
? 选择模板语言 Node
? 选择云开发模板 Hello World
✔ 创建项目 svelte-sapper-tcb 成功！
```
然后进入刚才创建的目录
```shell
cd /svelte-sapper-tcb
```
然后在functions(云函数约定)文件夹创建svelte sapper应用
```shell
$ 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-http`npm包
```javascript
$ npm i serverless-http -S
```
云函数不再需要我们监听系统端口，因此我们需要`serverless-http`包裹`./functions/svelte-sapper/src/server.js`文件中`polka`(polka类似express node.js框架)的几个中间件，改造完我们也就不需要依赖`polka`了，我在这里贴出代码。
```javascript
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`文件。
```javascript
exports.main = require('./__sapper__/build/server/server').main
```
*`__sapper__/build`是sapperbuild后的文件目录。*
如此即可正确被调用。
#### 部署应用
在`./functions/svelte-sapper`目录
```shell
$ npm run build
```
然后在项目根目录部署应用到tcb
```shell
$ tcb functions:deploy
```
成功后我们尝试访问`https://${env-id}.service.tcloudbase.com`会发现无法访问(`env-id`可以从`cloudbaserc.js`的`envId`中得到)，我们还需要给tcb增加路由。
```shell
$ 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`文件。
```javascript
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后再部署。
```shell
$ tcb functions:deploy --force
```
成功后，刷新浏览器，我们就可以看到漂亮的sapper网页了。
---
原文 / Source: