休了一个长假, 换了换脑子, 敲起键盘来突然不知道写的什么内容笔记好. 刚好最近搞了个整活的网站, 记录一下整个整活的过程. (虽然整活, 但是Vercel是真好用啊.)

作为一位多年的整活偷懒白嫖达人, 我也开发过不少有用的没用的应用和网站, 这次的网站上线的出奇的顺利. 甚至分文没花守住了三天将近30k的访问量.(域名的钱不是钱, 是投资.)

大家或多或少的都尝试过部署一些自己的小功能, 可能是个网站, 可能是个服务器或者数据库. 但是这个功能都需要大家拥有一个个人独立服务器和公网ip. 而现在的各种云服务的供应商, 大的老用户不如狗, 小的就是买彩票. 三个九的保障率都快达不到(是吧, 某鸟)(我就偷个懒懒写了几天, 你真就三个九都达不到了?). 如果想租个能用的服务器, 一个月也得五六十. 开个会员十五都犹豫半天的我们, 还能开这个? 而且大家的普遍的需求就是构建一个自己的小工具, 分享一下自己使用的小网站. 不想太多的费心和费力, 能自动部署和提供各样实用的小功能更好了就. 重要的是免费.

Vercel

这个网站就是Vercel, 相信不少的朋友们都或多或少的听过或使用过. 可能大家最常用的场景是挂hexo的博客. 这也是我第一次听到Vercel的地方. 我的个人博客也一直挂在hexo中.https://clwater.top/ 写到这里的时候已经运行了700多天了. 就连免费的https都不用一年一签了.

d41d8cd98f00b204e9800998ecf8427e

Vercel实际上就是一个网站托管服务, 和Github Page类似, 你也可以关联到你的GitHub账号中, 使其可以自动部署. 不仅如此, Vercel还支持部署serverless接口, 也就是说, 你可以把node.js, Python, Go, Ruby也托管到Vercel中, 对于一些轻量级的功能和网站来说, 已经足够使用了. 就在最近(也可能不是那么近), Vercel还增加了对数据库的支持. 关系型和非关系型的数据库都支持.

一个网站, 助力你的所有整活梦想.

整活网站

具体的整活网站就不放上来了, 我怕社死. 不过官方提供示例网站已经足够大家使用了也.

整活网站包括了一个前端页面, 一个服务端, 甚至还有一个数据库. 虽然性能和总量有一定的限制, 但是它免费啊. Vercel提供的免费资源来说还是十分充足的. 完全足够满足你绝大部分的需求.

01HE494A5TX6MGSNQM0ST6RWSC

带宽的话因为网站中有段音频没有压缩, 导致浪费了不少. 不过目前看来也绰绰有余.

数据库

数据库这里使用的是Durable Redis(KV)数据库, 整活要的是出工快, 什么数据库设计范式, 能用就行.

具体的使用方法如下:

进入https://vercel.com/dashboard/stores页面中,

01HE49J7M1CP7ZB4H8DDXXFG25

我们选择创建一个Durable Redis(KV)的数据库,

01HE4A96247WXEJHD2S5VFAZ56

起个名字, 选个节点位置啥的, 不过都是国外的, 连接速度就不用考虑, 找个随眼缘的就行.

当我们创建完成后, 我们就可以配置和使用了. Vercel提供了一些常见的使用方法, 用一般radies管理工具也可以连接到Vercel的数据库.

01HE4B8MSEYVQT4BR1BM4VRN7Y

这次我们就直接通过CLI进行简单的操作了.

01HE4B8W15JTTBR42JN79EQ59B

我们可以看到, 数据库中的数据已经发生变化.

服务端

服务端的话这里我们使用的是Python, 这里我建议是直接从Vercel的模板中进行创建. Flask和Django看你哪个用的顺手就选哪个.

具体的使用方法如下:

01HE4BM46RK319DGKBMKA1DR2G

01HE4BQCS83PDHJS5J610F4QPQ

01HE4BQH8ZF9WQHN7QCV67S6NT

一些基础信息完成后, 点击Create, 我们就可以等着我们的服务部署上去了.

01HE4C4X9WV3SCH8H9XQHQNWZJ

此时, 你的服务已经部署到云端, 你可以直接通过外网进行访问, 也可以绑定你自己的域名.

通过GitHub授权给Vercel后, 对应的项目就自动在你的GitHub中创建了.

这里我们就简单添加两个接口, 连接到我们刚刚创建的数据库, 用于设置和查询.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import os
import requests
import json

from flask import Flask

app = Flask(__name__)


@app.route('/')
def home():
return 'Hello Vercel'

@app.route('/get')
def get():
token = os.environ.get('token')
headers = {
'Authorization': 'Bearer ' + token,
}
url = "https://loyal-sole-43611.kv.vercel-storage.com/get/test_key"
rsp = requests.get(url, headers=headers)

return json.loads(rsp.text)['result']

@app.route('/set/<count>')
def set(count):
token = os.environ.get('token')
headers = {
'Authorization': 'Bearer ' + token,
}
url = "https://loyal-sole-43611.kv.vercel-storage.com/set/test_key/" + str(count)
rsp = requests.get(url, headers=headers)
return str(count)


if __name__ == "__main__":
app.run()

需要注意的是, 为了数据的安全性, Vercel可以通过Environment Variable来进行环境变量的配置, 记得上传的时候不要把这些私有的配置文件上传上去.

可以看到, 我们现在已经把后端和数据库连接了起来. 我们可以通过服务端对数据库的内容进行修改了.

Web页面

接下来我们就创建一个Web页面, 这里可以看到, 主流的前端框架Vercel都是支持的.(不愧是前端)

这里我们选择Vercel KV for Redis Next.js, 方便进行修改.

具体的使用方法如下:

image.png

这里会提示我们创建对应的数据库, 当然你也可以在后面自己连接或者手动配置。
image.png

demo的相关页面如下,

image.png

功能很简单, 记录一下这个页面的访问量, 这里采用的方法是直接访问数据库, 你当然可以通过你的服务器去进行处理. 这里就不过多赘述.

通篇下来, 都没什么特别的地方, 所有的功能基本都能做到开箱即用, 又都以整活小功能居多.

写到这里的时候, 刚看了一天的阿里云服务不可用的事情. 突然想了想, 都是整活了, 两个九的可用性就已经完全可以满足了不是.