MemFire Cloud让静态托管动起来！-优快云博客

静态托管

我们最常接触到的静态托管是github pages，它的常见工作模式是在github上创建一个仓库，使用hexo类的工具初始化仓库，编写markdown文件，生成静态页面，推送到github上完成页面更新，比如https://blog.nimblex.cn/就是这样一个静态的网站。
在这里插入图片描述

局限性

原生静态托管的局限性在于它的更新通常需要重新将markdown文件编译程静态html，然后再发布到托管站。这是一个重新构建的过程，对于非程序员群体来说是有门槛的。

常见动态web网站

一般用户通常会使用类似csdn、新浪博客之类的站点来构建自己的博客，用户只需要通过一个富文本编辑器编辑文章内容，提交即可发布。架设这样一个网站，通常需要后台支持，例如需要后台提供新增、删除、查询博客的接口，通常还需要提供登录注册鉴权等功能。这已经超出传统静态托管的范围了。

分析下动态web网站相对于静态网站有哪几点特殊能力

包含一个后台服务例如以SpringBoot编写的服务、以Flask编写的服务，这些服务提供一系列接口供前端调用
包含一个数据库，这个数据库存储网站内容、配置信息
可能会包含一些静态文件或者对象存储服务用来存储图片

一般需要维护这样一个动态网站需要前端开发、后台开发或者一个全栈开发工程师的配合，即需要前后端的能力。另外，要架设Spring或者Flaks服务，需要提供相应的运行时能力，换言之需要租服务器，像github pages这种静态托管站是不提供这个能力的。

MemfireCloud的增强

MemfireCloud是一个助力快速开发的云平台可以轻松构建小程序、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/)，这个应用其实是一个思绪整理工具。这个应用目前的主要功能是：

用户可以在后上角输入想法内容，打上标签（#tag1 xxx这种方式），保存想法
同类标签会进行分归类
支持回收站
支持多用户注册登录访问

大家从域名可以看到，这是一个公网服务且利用了Memfire Cloud的静态托管服务，但是我们完全看不出来它是一个静态网站，它真的很动态！
在这里插入图片描述

它是怎么实现的

完全不像是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赋予开发者一种能力

可以一站式开发、部署应用，特别是给予前端同学一种摆脱后端同学依赖的能力，不需要学习后端开发语言，就可以成为一名全栈开发工程师，这是MemfireCloud平台对每个前端开发工程师的赋能！这个意义是非常深远的，感谢MemfireCloud团队

复杂的工作通过pg function来实现，倒逼我们思考数据库如何更高效的使用

例如要实现基本的统计功能：
在这里插入图片描述

数据分布在两个表里面，如果我用java实现，那么按惯性我就会写三条sql语句，然后用JDBCtemplate执行三次，合并结果数据作为接口返回。但是如果这个场景放在MemfireCloud上，就需要调用三次接口，这样很浪费资源网络资源。这反而暴露了另外一个问题：我们日常浪费了很多数据库请求。

反过来使用Pg Function，不管是Java调用还是MemfireCloud调用只需要一次数据库请求。实现如下：

create or replace function overview_data(userid uuid)  
returns table(ts_count integer, tag_count integer, days integer)
as $$
declare
    ts_count integer := 0;    
    tag_count integer := 0;
    min_date date;
    max_date date;
    days integer := 0;
    res record;
begin
    select count(*) into ts_count from thoughts where user_id = userid;
    select count(*) into tag_count from tag where user_id = userid; 
    select DATE_TRUNC('day', min(created_at)) into min_date from thoughts where user_id = userid;
    select DATE_TRUNC('day', max(created_at)) into max_date from thoughts where user_id = userid;
    IF max_date IS NOT NULL then
        days := max_date - min_date + 1 ;
    END IF;
    return query select ts_count, tag_count, days;
end;
$$ language plpgsql;