category
tags
type
status
slug
date
summary
icon
password
前言
❓ 假如想做一个简单的功能,例如一个博客网站或网页小程序,以往我是要先花几百元购买ECS服务器,在服务器上安装运维面板、再安装Nginx、MySQL、NodeJS、Java、PHP等环境,最后实现一个API服务器。
❌ 这种传统模式不但有着较高的技术门槛,而且站点的维护升级工作就已经足够繁琐、分散了诸多精力。
![宝塔面板](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F67475650-a228-474f-bf9c-a42a52169c60%2FUntitled.png?table=block&id=d0a27b82-8590-4751-a07d-2d50824d16f0)
无服务器方案
✅ 这篇文章我给出了一个方案,借助Vercel、NextJS让你几分钟就能实现一个CURD(增删改查)的后端API,无需购买服务器,完全免费。该方案有以下两个优点
效果演示
我将搭建的api接口部署在这个地址上: https://api.tangly1024.com/api/helloworld
相关代码部分我已上传至Github可以参考:https://github.com/tangly1024/VercelNodejsApi
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fca4a3253-1673-48a6-9f97-bc9180328d1f%2FUntitled.png?table=block&id=d493b790-bc56-4df9-9460-6434fee0357d)
工具介绍
Vercel是什么
它是一个强大的网站托管服务。Vercel类似于github page,但比github page强大、速度也快得多。通过绑定你的github项目,就能实现提交代码自动部署你的应用。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7a004187-663f-4de1-b056-b3c0774ec243%2FUntitled.png?table=block&id=f95f350e-b298-449a-8fb5-4ed2ac32572c)
NextJS是什么
Next.js是Vercel官方推荐的、一款极易上手的React 应用框架。使用NextJS可以快速开发 React 应用,而不是先花很多时间和精力去折腾各种开发工具。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffb296df9-a7d1-4612-b0c7-32cb449bb80e%2FUntitled.png?table=block&id=54c359c6-ed71-4976-950d-3e785988b1ab)
Serverless 是什么
简单地理解:Serverless = Faas(函数即服务) + Baas(后端即服务);
Serverless不代表再也不需要服务器了,而是说:开发者再也不用过多考虑服务器的问题,
快速开始
0. 账号
首先要在Vercel后台注册一个账号🧐,推荐用github直接登录。
1.初始化Vercel环境
执行
npm i -g vercel
安装vercel ( NodeJs
版本大于12)![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1fba3c43-5bba-4251-853a-f8eb035bbe74%2FUntitled.png?table=block&id=052173c7-5226-4b01-bd77-d525293f1181)
控制台输入
vercel login
登录Vercel账号,输入指令后需要验证你的vercel邮箱,vercel会向该邮箱发送一个链接,点击邮箱中的链接就可以确认登录。 ![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Feeba9397-c8f4-4413-bc8f-353386f09ffd%2FUntitled.png?table=block&id=3d476f8d-168d-4677-a82b-dde5b8f7f5f4)
2.创建一个Vercel项目
创建一个空目录
demo-vercel
输入命令
vercel
,将当前目录初始化为vercel项目,vercel会询问你一些信息,一路回车就好。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fca948a6d-5f55-4933-ab0d-4c193aa33a49%2FUntitled.png?table=block&id=f71a3716-1c5d-4f90-90e0-287479106b98)
3.第一个简单页面
在根目录新建的配置文件
vercel.json
,并填入下面的配置。(配置说明默认访问服务将跳转到welcome.html
页面)welcome.html页面内容如下:
代码结构👉
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F66e7ad99-8e28-4573-9549-0ba39aef6c81%2FUntitled.png?table=block&id=169c40a3-3ea7-4055-b0e3-b182d233677d)
4.第一个api接口
Vercel官方支持 Nodejs、Go、Python、Ruby 这几门语言创建服务,其他语言的开发介绍可以参考官方文档
我们这里选用Nodejs来开发接口,初始化package.json、引入vercel相关的Typescript便于规范,执行以下脚本:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9975c3d3-b824-47fe-af05-74893cc1c47a%2FUntitled.png?table=block&id=794954f8-a39d-4945-8f43-78f2452a4567)
- 新建目录
/api
,并在/api下创建文件helloworld.ts, 文件内容如下:
- 当前目录结构如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd628b054-b749-441d-ae4d-e1b609e62b74%2FUntitled.png?table=block&id=a040f3d4-72da-4b31-bd1a-85105b68ca18)
- 执行
vercel dev
进行本地调试,
访问页面 http://localhost:3000/api/helloworld
链接效果如图:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F668bd7e9-d3fd-46bf-990c-dd5ebfd41db6%2FUntitled.png?table=block&id=e030444a-0b5c-4d60-8bdd-c0399246b7fc)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F01124688-b667-43c2-9fe5-9eb46af08434%2FUntitled.png?table=block&id=ed1dcad7-3173-4222-9ce5-88e279f572bc)
5. 部署上线
在控制台输入
vercel
即可开始自动部署,点击控制台输出的Preview后面的链接即可预览部署效果。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8e77aba5-a0b2-444f-aab1-3d30d00cc5b1%2FUntitled.png?table=block&id=699f438d-9015-4482-96ea-44fe954562fb)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fba8fb28e-459b-4aee-b31a-c8c3b010fe02%2FUntitled.png?table=block&id=7fd3eaa9-c48e-4ddb-a59a-ff280a66b2ba)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd74c401d-34b3-45dc-9fdc-e3b6feffce0d%2FUntitled.png?table=block&id=2c64fe31-054f-4a47-8efb-d07305bf41ec)
数据库持久化
- API接口最基本的增删改查等功能,依托于数据库持久化。这里我们选择接入免费的云数据库。
- https://cloud.mongodb.com 提供的Mongodb数据库举例,512M免费存储额度,个人使用已经绰绰有余。
当然还有 db4free.net、mlab.com等其他云数据库网站,除此之外还有免费的rabbitMQ,kafka等。
1.创建数据库
在 https://cloud.mongodb.com 注册一个账号,注册完毕后进入找到 Create a cluster, 选择Free的免费方案
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa333d007-9737-4310-b3c6-83247fcccd68%2FUntitled.png?table=block&id=bbbb0e89-0d63-4503-b9c1-d4c5527e6316)
配置服务器地点和服务提供商,(举例用的是Google Cloud,北美中部的服务器);等待1-3分钟后创建完毕:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff15443f4-6890-4efa-b5aa-364f5b2b9b43%2FUntitled.png?table=block&id=71919d54-3149-4393-a6da-c9121476b53c)
配置连接参数
创建一个访问用户,并选择用Password密码的形式连接:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6c4bb8e0-dc3a-4032-8118-90f891573d97%2FUntitled.png?table=block&id=3af95eb6-692e-48cd-a135-c015efeabb99)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5f52477f-6863-4614-b686-f2ee7a367fd1%2FUntitled.png?table=block&id=39e6c43c-d125-420c-8b7a-ec2e31d40c01)
添加允许访问改数据库的IP地址:这里可以点Add current ip address 表示添加当前电脑ip地址,点击 Allow access from anywhere 表示允许所有网络ip地址访问该数据库(这样可能会有风险)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fed7f512a-5654-4e3b-b931-34f8fe83064e%2FUntitled.png?table=block&id=8399704c-61fe-44cf-8b40-725ad28295ac)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7cac5c5f-cfeb-4f95-b2c8-b13a32ec0a00%2FUntitled.png?table=block&id=ba4351ce-fdc9-48f1-9630-4f5ea8fa4b89)
客户端连接数据库:
点击connect
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3fd5ab43-69fc-4e99-92fc-6b06b3ad1a3d%2FUntitled.png?table=block&id=e4d6dc0f-8f55-4711-b17b-d36529498fa7)
点击第三个Connect using MongoDB Compass,采用图形界面连接;
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F09c27a4f-6e55-447d-b84f-9be834cce6a2%2FUntitled.png?table=block&id=1c88a045-256f-44e4-be99-7639ed22392a)
复制下面的连接代码
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffcaf8a37-c614-4529-be6b-1e8f68077c73%2FUntitled.png?table=block&id=0a77a4eb-0fe3-4f47-9d4e-d4e6ee3ce3e7)
打开Navicat,选择新建MongoDB,在URI中输入刚才复制的代码,并且将
<password>
密码部分改成你实际设置的密码;点击测试连接。![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F09e433f0-be6b-4c86-a1f7-7a97ae5601d7%2FUntitled.png?table=block&id=b8a5ec31-2018-4d9a-b937-4e629fb7d967)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd650ec94-30ae-4313-a52e-7e18264c2dfd%2FUntitled.png?table=block&id=e0f65164-0bcb-401c-8bf6-9aaabf19aa3e)
添加测试数据
我们用Navicat往MongoDB添加一条数据:创建一个数据库名叫
vercel
、创建一个集合的名叫demo
,document内容为 {name:"tanghh"}
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F18f85f26-a5e6-4bc6-8896-bf209c0acc74%2FUntitled.png?table=block&id=08425c49-ff06-4aaa-9ef9-04fae450aec0)
至此,数据库的创建,与连接配置已经完成,接下来在代码中实现功能
2.在代码中访问数据库
NPM 安装Mongodb依赖库
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F77819ffd-a562-4682-aeaa-dbffd4be175c%2FUntitled.png?table=block&id=3b3f352a-ac57-42e9-8f6b-6464bd38fa45)
接下我们用接口查询这条数据。我们在api目录下创建名为getUsername.ts的文件,
注意:代码中的CONNECTION_STRING信息更换成你自己的!!!
CONNECTION_STRING变量的值,和之前用Navicat连接的代码不太一样,可以在网站后台这里找到:
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F86cb4f51-141b-4b3a-b19a-2feafe623cf1%2FUntitled.png?table=block&id=7f975ad8-1483-41ae-af9e-e6e701cef726)
3.完成效果展示
至此,一个通过MongoDB返回数据的serverless接口开发完毕;类似的你可以用这个平台简易的完成一个CURD的功能🤪
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff5bf1c47-27ad-47d7-96f3-43b55c2aff4d%2FUntitled.png?table=block&id=dff232cb-f483-455d-ac22-403a882472c4)
通过运行
vercel --prod
命令即可将其发布。总结
动态API,数据库,托管服务器都是免费的,结合这套方案,轻装上阵,搭建你的API服务端吧~ 除了文档中示例的接口,我的github仓库中还列举了一个完整的增删改查,可以参考。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd16c17cb-3707-4793-8399-7c47b6c610a4%2FUntitled.png?table=block&id=067e0e85-3272-4922-89da-e5993a51b0a8)
参考
Vercel API说明
在 vercel 中通过
res.json(obj)
来返回 JSON 数据,像这样的简单方便的函数并不为原生的 HTTP Handler (opens new window)所提供。而由 vercel 提供的 Node.js Helper (opens new window)实现:req.query
: An object containing the request's query string, or {} if the request does not have a query string.
req.cookies
: An object containing the cookies sent by the request, or {} if the request contains no cookies.
req.body
: An object containing the body sent by the request, or null if no body is sent.
res.status(code)
: A function to set the status code sent with the response where code must be a valid HTTP status code. Returns res for chaining.
res.send(body)
: A function to set the content of the response where body can be a string, an object or a Buffer.
res.json(obj)
: A function to send a JSON response where obj is the JSON object to send.
res.redirect(url)
: A function to redirect to the URL derived from the specified path with status code "307 Temporary Redirect".
res.redirect(statusCode, url)
: A function to redirect to the URL derived from the specified path, with specified HTTP status code.
Vercel.json 重定向说明
部署完成后,默认的路由路径是
/api
,此时 /
会显示文件目录,如果想更好地扩展路由呢?通过配置文件
vercel.json
配置 Rewrites/Redirects
可完成此功能,通过这一功能可以快速实现反向代理、路由转换等功能。- 作者:NotionNext
- 链接:https://tangly1024.com/vercel-free-serverless-api
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章