MemfireCloud让静态托管页面动起来!
静态托管
我们最常接触到的静态托管是github pages,它的常见工作模式是在github上创建一个仓库,使用hexo类的工具初始化仓库,编写markdown文件,生成静态页面,推送到github上完成页面更新,比如这样一个静态的网站。
局限性
原生静态托管的局限性在于它的更新通常需要重新将markdown文件编译程静态html,然后再发布到托管站。这是一个重新构建的过程,对于非程序员群体来说是有门槛的。
常见动态web网站
一般用户通常会使用类似csdn、新浪博客之类的站点来构建自己的博客,用户只需要通过一个富文本编辑器编辑文章内容,提交即可发布。架设这样一个网站,通常需要后台支持,例如需要后台提供新增、删除、查询博客的接口,通常还需要提供登录注册鉴权等功能。这已经超出传统静态托管的范围了。
分析下动态web网站相对于静态网站有哪几点特殊能力
- 包含一个后台服务例如以SpringBoot编写的服务、以Flask编写的服务,这些服务提供一系列接口供前端调用
- 包含一个数据库,这个数据库存储网站内容、配置信息
- 可能会包含一些静态文件或者对象存储服务用来存储图片
一般需要维护这样一个动态网站需要前端开发、后台开发或者一个全栈开发工程师的配合,即需要前后端的能力。另外,要架设Spring或者Flaks服务,需要提供相应的运行时能力,换言之需要租服务器,像github pages这种静态托管站是不提供这个能力的。
MemfireCloud的增强
MemfireCloud(https://www.memfiredb.com/?from=W4aWk1)是一个助力快速开发的云平台可以轻松构建小程序、Web网站、移动应用。
MemfireCloud可以提供什么
MemFire Cloud提供哪些能力呢?目前我关注如下这些:
- 云数据库
- 静态托管服务
- 对象存储(兼容S3)
- 提供一个supabase JS sdk ,可以访问上述云数据库、对象存储等能力。注意这是一个JS sdk
- 内置登录注册、用户管理等功能
王炸组合
我们看下上文中常见动态网站需要的能力
- 接口能力
- 数据库
- 静态文件存储服务
在MemfireCloud平台上,这些通通都可以实现,而且是仅仅通过html + js就可以实现。放开脑洞,再加上静态托管,我们就可以直接构建动态网站了,不要SpringBoot、不要Flask、不要NodeJS,之要MemfireCloud就够了!!!
让静态托管动起来
我就用MemfireCloud构建并托管了一个类似Flomo的web应用(http://cmsrcpa5g6h1f588b1j0.app.memfiredb.cn/),这个应用其实是一个思绪整理工具。这个应用目前的主要功能是:
- 用户可以在后上角输入想法内容,打上标签,保存想法
- 同类标签会进行分归类
- 支持回收站
- 支持多用户注册登录访问
大家从域名可以看到,这是一个公网服务且利用了MemfireCloud的静态托管服务,但是我们完全看不出来它是一个静态网站,它真的很动态!
它是怎么实现的
完全不像是github pages中常见的hexo等静态博客工具,这个网站是用React开发的单页面应用,在开发的过程中我完全就是把它当作一个动态应用来开发的,antd、Echarts之类的组件库直接用起来。下面我简要介绍其中的一些实现。
数据库定义
数据库定义直接使用MemfireCloud的数据库编辑页面进行
增删改查
使用Supbase JS sdk可以让js直接操作数据库,这块大家如果感兴趣可以通过文中链接查看他们的官网教程,使用起来也是非常简单的,非常类似于Python的SQLalchemy、Java的Mybatis等ORM框架,这里我以新增为例。
thoughts是定义的数据表,直接使用js api往库里面加数据。其他的操作也是类似的。
const {data, error} = await supabase
.from('thoughts')
.insert(thoughts)
.select('id')
静态托管
网站开发好了,需要将其发布到线上,也是很简单,直接将React打包并压缩成ZIP文件,上传到MemfireCloud即可访问在线网站了。
思考
MemfireCloud为开发者提供一种能力,可以一站式开发、部署应用,特别是给予前端同学一种摆脱后端同学依赖的能力,不需要学习后端开发语言,就可以成为一名全栈开发工程师,这是平台对每个前端开发工程师的赋能!