使用腾讯云开发来部署Svelte Sapper应用

Svelte是前端框架界新秀,以小巧、响应式、无virtual Dom著称,就像React有对应的SSR框架Next.js一样,Svelte也有自己官方的SSR 框架Sapper,也是小巧,灵活。

腾讯云开发(CloudBase,TCB)则是腾讯云提供的Serverless云服务,提供云函数、云存储、静态部署等能力,可以用来快速开发多端应用(小程序,公共号,Web应用,Flutter客户端……),然后还提供不错的免费额度_

下面我们来将Svelte Sapper部署到CloudBase的云函数上。

开通云开发CloudBase

现在腾讯云控制台开通云开发CloudBase,并创建你的应用

使用腾讯云开发来部署Svelte Sapper应用_第1张图片

然后新建一个Nodejs的云函数。

安装依赖

请确保你电脑已经安装了Node.js ,如果没有请访问nodejs.org来安装。

安装cli

使用npm

$ npm i -g @cloudbase/cli

或者Yarn

$ yarn global add @cloudbase/cli

安装成功后,就可以在命令行输入 cloudbase -v,为了简化输入,cloudbase可以简写成tcb。例如, tcb -h获取帮助。

登录到cloudbase

$ tcb login

之后会跳转到浏览器,如图授权界面

使用腾讯云开发来部署Svelte Sapper应用_第2张图片

创建项目

使用tce命令先拉取上面创建的云函数

$ tcb init

交互式的命令

$ cloudbase init? 选择关联环境 xxx - [xxx-xxx]? 请输入项目名称 svelte-sapper-tcb? 选择模板语言 Node? 选择云开发模板 Hello World✔ 创建项目 svelte-sapper-tcb 成功!

然后进入刚才创建的目录

cd /svelte-sapper-tcb

然后在functions(云函数约定)文件夹创建svelte sapper应用

$ npx degit "sveltejs/sapper-template#rollup" functions/svelte-sapper

这样sapper应用就创建到 functions/svelte-sapper目录下面,我们先安装运行:

$ cd ./functions/svelte-sapper$ npm install$ npm run dev 

浏览器中访问http://localhost:3000,如果能看到如下图,说明我们安装成功了。

使用腾讯云开发来部署Svelte Sapper应用_第3张图片

改造项目以支持tcb云函数

\1. 修改 cloudbaserc.js中functions中第一个项目 namesvelte-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

$ tcb functions:deploy

成功后我们尝试访问 https://${env-id}.service.tcloudbase.com会发现无法访问( env-id可以从 cloudbaserc.jsenvId中得到),我们还需要给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后再部署。

$ tcb functions:deploy --force

成功后,刷新浏览器,我们就可以看到漂亮的sapper网页了。

使用腾讯云开发来部署Svelte Sapper应用_第4张图片

公众号:腾讯云云开发

腾讯云云开发:https://cloudbase.net

云开发控制台:https://console.cloud.tencent.com/tcb?from=12304


更多精彩
扫描二维码了解更多

img

你可能感兴趣的:(使用腾讯云开发来部署Svelte Sapper应用)