vercel是什么神仙网站?
Mark Lv4

Vercel?

vercel是我用过的最好用的网站托管服务。本网站就是基于hexo引擎模板开发,托管在vercel上的。html

vercel相似于github page,但远比github page强大,速度也快得多得多,并且将Github受权给vercel后,能够达到最优雅的发布体验,只需将代码轻轻一推,项目就自动更新部署了。node

vercel还支持部署serverless接口。那表明着,其不只仅能够部署静态网站,甚至能够部署动态网站,而这些功能,通通都是免费的,简直是白嫖党的福利啊!!!!!git

vercel还支持自动配置https,不用本身去FreeSSL申请证书,更是省去了一大堆证书的配置,简直是懒人的福利啊啊啊有木有!es6

vercel目前的部署模板有31种之多,我没有所有用过。接下来,我将介绍其中的两种。github

用Vercel部署Hexo

新建一个vercel项目

关于hexo的怎么用能够前往hexo官网了解mongodb

  • 将hexo上传至github上,若是是我的博客啥的,最好使用私有方式存储,不出意外的话。整个hexo项目的结构相似于下图

image-20210128194843676

  • 访问并登录vercel网站,推荐使用github登录

image-20210129093313304

  • 在vercel的Overview菜单下,点击按钮 New Project
  • 在Import Git Repository选项下,选择须要导入的项目,Import

image-20210129093413893

  • 继续,点击Deploy按钮,vercel就开始构建了

image-20210129093555701

  • 构建完以后,能够在Overview菜单下,看到新建的项目,至此项目已经建立完成,能够经过vercel自动配置的子域名访问了

image-20210129094120077

设置自定义域名

  • 首先,咱们须要申请一个本身的域名,本网站的域名i-tech.tech是在万网上购买的,其余人能够自行选择域名提供商typescript
  • 点击卡片上的粗黑色的标题(上图中的”my-story”)进入配置界面,该界面,有4个菜单,咱们点击Settings->Domains,并在输入框中填入想设置的域名,点击Add按钮image-20210129095458198shell
  • Add以后,可能会看到下图中的样子,别着急,还须要配置一下咱们的域名,设置一下解析数据库

image-20210129095610042

  • 打开域名控制台,添加一条以下图的解析记录

image-20210129100136724

  • 添加完以后,卡片会变成如图的样子

image-20210129100321509

接下来就能够经过咱们设置的域名(如https://case.i-tech.tech)访问咱们的网站了,一个简单的Hexo项目就部署完成了!express

须要更新网站,只须要往github上提交新的commit,vercel就会自动从新构建了!完美!!!!

用vercel部署Serverless Api,不购买云服务器也能拥有本身的动态网站,酷!!!!

有人可能会问了。能部署api还不行啊,没有数据库啊。身为一个混迹江湖多年的白嫖党,请跟我继续往下走~

https://cloud.mongodb.com上白嫖一个数据库如何?

https://cloud.mongodb.com提供512M免费的MongoDB存储额度,做为我的网站使用足够了,固然还有其余的免费数据库,如db4free.netmlab.com等各位各取所需。了解更多能够访问免费在线 MySQL/PostgreSQL/MongoDB/Redis 数据库云服务合集了解

我是以为https://cloud.mongodb.com最好用,因此,本文中我只介绍它的使用方式。

  • 依次点击Atlas->Clusters

image-20210129102544049

  • 你们能够看到有个Create a New Cluster的按钮,点击它

image-20210129102640412

  • 选择以下图的配置,若是须要设置密码的话,设置并记住密码,点击Create Cluster便可

image-20210129102949701

  • 至此咱们已经有了一个属于咱们本身的数据库的,能够在Atlas->Clusters页面看到刚建立好的MongoDB数据库,接下来,咱们要经过Navicat数据库可视化管理工具链接一下吧

经过Navicat链接MondDb数据库

  • 按照上文的操做,咱们能够看到以下图的界面,点击CONNECT

image-20210129103712446

  • 接下来,选择Connect Using MongoDB Compass

image-20210129104311381

  • 接下来,点击I have MongDB Compass,能够看到一串链接字符串,以下图红线框起来的地方

image-20210129104512665

  • 参照上图中红线框起来的链接字符串,咱们按照下图填下咱们的Navicat链接配置信息,密码处填写建立数据库时设置的密码

image-20210129104740510

  • 点击测试链接,我会发现,链接成功,随后点击肯定便可

image-20210129104824746

万事具有,只差Api,开启Serverless Api开发之旅

基于noodejs的Serverless Api

  • 第一次使用首先须要安装vercel

image-20210129132921187

  • 使用npm init给当前目录添加一个package.json文件
  • 登陆vercel,在终端输入如下命令,回车以后会让你输入邮箱,填完邮箱后,vercel会向该邮箱发送一个连接,点击该连接确认登陆
1
vercel login
  • 登陆完毕以后,输入如下命令,将当前目录初始化为vercel项目目录。回车以后,vercel会询问你一些信息,一路回车就好
1
vercel
  • 给vercel配置路由信息,在根目录新建vercel的配置文件vercel.json,并填入下面的配置,下面的意思是,当访问的路径返回状态是404时,就访问welcome.html页面
1
2
3
4
5
6
7
8
9
10
11
12
{
"routes": [
{
"handle": "filesystem"
},
{
"src": "/(.*)",
"status": 404,
"dest": "/welcome.html"
}
]
}
  • 当前咱们尚未welcome.html页面,咱们在根目录新建welcome.html,并填入下面的内容
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热烈欢迎!</title>
</head>
<body>
<h1>大写的欢迎!</h1>
</body>
</html>
  • 如今,启动一下咱们的vercel项目,查看一下效果,直接在控制台输入下面的命令便可,点击控制台输出的Preview后面的连接便可预览
1
vercel

image-20210129142716094

  • 访问连接后咱们能够看到

image-20210129142745377

  • 这还只是最简单的页面,到这里,咱们的项目目录结构应该长这样子的

image-20210129142924324

  • 为了让咱们的项目更强大,引入node相关的依赖。为了开发更便捷,咱们使用typescript。执行如下命令
1
2
3
4
5
npm i typescript
npm i express
npm i @vercel/node -D
npm i babel-register -D
npm i babel-plugin-transform-es2015-modules-commonjs -D
  • 在根目录新建typescript的配置文件tsconfig.json,输入如下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"noEmitHelpers": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts",
"typings/browser",
"typings/browser.d.ts"
],
"compileOnSave": true
}
  • 为了使咱们的时区设置正确,咱们新建一个文件.env。写入如下内容
1
TZ='asia/shanghai'
  • 接下来开始准备api。在根目录下添加一个新目录,命名为api,咱们后面新建的api将会放在里面
  • 在api目录下,新建文件helloworld.ts,并写入下面的内容,做为测试简单地输出hello world!
1
2
3
4
5
6
7
import { NowRequest, NowResponse } from '@vercel/node';
module.exports = async (req: NowRequest, res: NowResponse) => {
var data = {
msg: "hello world!"
}
res.status(200).json(data);
}
  • 至此,咱们一个简单的返回helloworld的serverless接口已经开发完毕了,咱们预览一下效果,输入命令vercel,并访问Preview连接查看效果

image-20210129151736608

Serverless链接MongoDB数据库

  • 经过如下命令安装依赖,咱们就能够在nodejs中操做MongoDB数据库了
1
2
npm i mongodb
npm i @types/mongodb -D
  • 为了方便咱们测试,咱们先用Navicat往MongoDB添加一条数据,添加后的数据长这样,集合的名字叫作northwind,document为{name:”huangkemeng”}

image-20210129153828521

  • 接下来,咱们用接口返回这条数据。咱们在api目录下建立名为getUsername.ts的文件,文件内容以下,注意:将方括号内的信息更换成你本身的!!!
1
2
3
4
5
6
7
8
9
import { NowRequest, NowResponse } from '@vercel/node';
import { MongoClient } from 'mongodb'
const CONNECTION_STRING = "mongodb+srv://huangkemeng:[yourpassword]@clusterblog.engmb.azure.mongodb.net/admin";
module.exports = async (req: NowRequest, res: NowResponse) => {
const client = await MongoClient.connect(CONNECTION_STRING, { useNewUrlParser: true, useUnifiedTopology: true });
const db = await client.db('[hkm-story]');
var result = await db.collection("[northwind]").find().toArray();
res.status(200).json(result);
}
  • 关于上图中提到的CONNECTION_STRING变量的值,咱们很垂手可得得地找到,请看下图

image-20210129161709172

image-20210129161810441

  • 至此,一个经过MongoDB返回数据的serverless接口开发完毕,请看效果

image-20210129162053681

  • 经过运行vercel –prod命令便可将其发布。

关于更多关于vercel的介绍了,能够邮件联系我,好比该serverless的调试等,篇幅太长,这里就再也不赘述!。End!

  • Post title:vercel是什么神仙网站?
  • Post author:Mark
  • Create time:2021-05-04 15:28:19
  • Post link:https://x.iqimeng.com/2021/05/04/study/vercel是什么神仙网站?/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.