vercel是什么神仙网站？
Vercel?
vercel是我用过的最好用的网站托管服务。本网站就是基于hexo引擎模板开发，托管在vercel上的。
vercel类似于github page，但远比github page强大，速度也快得多得多，而且将Github授权给vercel后，可以达到最优雅的发布体验，只需将代码轻轻一推，项目就自动更新部署了。
vercel还支持部署serverless接口。那代表着，其不仅仅可以部署静态网站，甚至可以部署动态网站，而这些功能，统统都是免费的，简直是白嫖党的福利啊！！！！！
vercel还支持自动配置https，不用自己去FreeSSL申请证书，更是省去了一大堆证书的配置，简直是懒人的福利啊啊啊有木有！
vercel目前的部署模板有31种之多，我没有全部用过。接下来，我将介绍其中的两种。
用Vercel部署Hexo
新建一个vercel项目
关于hexo的怎么用可以前往hexo官网了解
- 将hexo上传至github上，如果是个人博客啥的，最好使用私有方式存储，不出意外的话。整个hexo项目的结构类似于下图
- 访问并登陆vercel网站，推荐使用github登陆
- 在vercel的Overview菜单下，点击按钮 New Project
- 在Import Git Repository选项下，选择需要导入的项目，Import
- 继续，点击Deploy按钮，vercel就开始构建了
- 构建完之后，可以在Overview菜单下，看到新建的项目,至此项目已经创建完成，可以通过vercel自动配置的子域名访问了
设置自定义域名
首先，我们需要申请一个自己的域名，本网站的域名i-tech.tech是在万网上购买的，其他人可以自行选择域名提供商
点击卡片上的粗黑色的标题（上图中的"my-story"）进入配置界面，该界面，有4个菜单，我们点击Settings->Domains，并在输入框中填入想设置的域名，点击Add按钮
Add之后，可能会看到下图中的样子，别着急，还需要配置一下我们的域名，设置一下解析
- 打开域名控制台，添加一条如下图的解析记录
- 添加完之后，卡片会变成如图的样子
接下来就可以通过我们设置的域名（如https://case.i-tech.tech）访问我们的网站了，一个简单的Hexo项目就部署完成了！
需要更新网站，只需要往github上提交新的commit，vercel就会自动重新构建了！完美！！！！
用vercel部署Serverless Api，不购买云服务器也能拥有自己的动态网站，酷！！！！
有人可能会问了。能部署api还不行啊，没有数据库啊。身为一个混迹江湖多年的白嫖党，请跟我继续往下走~
去https://cloud.mongodb.com上白嫖一个数据库如何？
- 首先我们打开https://cloud.mongodb.com并注册登录
https://cloud.mongodb.com提供512M免费的MongoDB存储额度，作为个人网站使用足够了，当然还有其他的免费数据库，如db4free.net、mlab.com等各位各取所需。了解更多可以访问免费在线 MySQL/PostgreSQL/MongoDB/Redis 数据库云服务合集了解
我是觉得https://cloud.mongodb.com最好用，所以，本文中我只介绍它的使用方式。
- 依次点击Atlas->Clusters
- 大家可以看到有个Create a New Cluster的按钮，点击它
- 选择如下图的配置，如果需要设置密码的话，设置并记住密码，点击Create Cluster即可
- 至此我们已经有了一个属于我们自己的数据库的，可以在Atlas->Clusters页面看到刚创建好的MongoDB数据库，接下来，我们要通过Navicat数据库可视化管理工具连接一下吧
通过Navicat连接MondDb数据库
- 按照上文的操作，我们可以看到如下图的界面，点击CONNECT
- 接下来，选择Connect Using MongoDB Compass
- 接下来，点击I have MongDB Compass，可以看到一串连接字符串，如下图红线框起来的地方
- 参照上图中红线框起来的连接字符串，我们按照下图填下我们的Navicat连接配置信息，密码处填写创建数据库时设置的密码
- 点击测试连接，我会发现，连接成功，随后点击确定即可
万事具备，只差Api，开启Serverless Api开发之旅
基于noodejs的Serverless Api
- 第一次使用首先需要安装vercel
使用npm init给当前目录添加一个package.json文件
登录vercel，在终端输入以下命令，回车之后会让你输入邮箱，填完邮箱后，vercel会向该邮箱发送一个链接，点击该链接确认登录
vercel login
- 登录完毕之后，输入以下命令，将当前目录初始化为vercel项目目录。回车之后，vercel会询问你一些信息，一路回车就好
vercel
- 给vercel配置路由信息，在根目录新建vercel的配置文件vercel.json，并填入下面的配置，下面的意思是，当访问的路径返回状态是404时，就访问welcome.html页面
{
"routes": [
{
"handle": "filesystem"
},
{
"src": "/(.*)",
"status": 404,
"dest": "/welcome.html"
}
]
}
- 当前我们还没有welcome.html页面，我们在根目录新建welcome.html，并填入下面的内容
<!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后面的链接即可预览
vercel
- 访问链接后我们可以看到
- 这还只是最简单的页面，到这里，我们的项目目录结构应该长这样子的
- 为了让我们的项目更强大，引入node相关的依赖。为了开发更便捷，我们使用typescript。执行以下命令
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，输入以下内容
{
"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。写入以下内容
TZ='asia/shanghai'
- 接下来开始准备api。在根目录下添加一个新目录，命名为api，我们后面新建的api将会放在里面
- 在api目录下，新建文件helloworld.ts，并写入下面的内容，作为测试简单地输出hello world！
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链接查看效果
Serverless连接MongoDB数据库
- 通过以下命令安装依赖，我们就可以在nodejs中操作MongoDB数据库了
npm i mongodb
npm i @types/mongodb -D
- 为了方便我们测试，我们先用Navicat往MongoDB添加一条数据，添加后的数据长这样，集合的名字叫做northwind，document为{name:"huangkemeng"}
- 接下来，我们用接口返回这条数据。我们在api目录下创建名为getUsername.ts的文件，文件内容如下，注意：将方括号内的信息更换成你自己的!!!
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变量的值，我们很轻而易举得地找到，请看下图
- 至此，一个通过MongoDB返回数据的serverless接口开发完毕，请看效果
- 通过运行vercel --prod命令即可将其发布。
关于更多关于vercel的介绍了，可以邮件联系我，比如该serverless的调试等，篇幅太长，这里就不再赘述！。End！
转载自叶子的博客
vercel是什么神仙网站？的更多相关文章
- 浏览器表单自动填充默认样式 - autofill问题解决
这不知道是个什么神仙网站,解决办法写的这么清楚,页面有这么让人舒服 https://lhajh.github.io/css/chrome/2018/04/17/The-chrome-browser-f ...
- 用GitHub Pages搭建博客（七）
本篇介绍百度统计.百度搜索 一般来讲,部署了一个网站后,我们需要知道网站的浏览量,以便知道网站是否有人访问. 在Jekyll的模板中,由于国外开发者更多,一般的主题默认都开发了谷歌统计(Google ...
- 这世上倒底有没有神仙——说“Excel不是数据库，是不是犯了白马非马论的错误？？
这问题是这样引出来的: 我上计算机应用基础课,讲到Excel,因为一直以来,很多新生对Word中的表格和Excel中的表格总是分不清,甚至有老师也问过我,Excel中的表格和Word中的表格有什么区别 ...
- google官方建议使用的网站性能测试工具
转自:http://www.laokboke.net/2013/05/12/google-official-recommended-site-performance-testing-tools/ 最近 ...
- 记录一道神仙CTF-wtf.sh-150
记录一道完全超出我能力的CTF神仙题(不愧是世界级比赛的真题orz),此题我仅解出了第一部分的flag,第二部分则参考了WP.不得不说这种题目解出来还是很有自豪感的嘛~ 直接看题! 0x01 第一部 ...
- 【原创】（求锤得锤的故事）Redis锁从面试连环炮聊到神仙打架。
这是why技术的第38篇原创文章 又到了一周一次的分享时间啦,老规矩,还是先荒腔走板的聊聊生活. 有上面的图是读大学的时候,一次自行车骑行途中队友抓拍的我的照片.拍照的地方,名字叫做牛背山,一个名字很 ...
- 如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- 如何一步一步用DDD设计一个电商网站（八）—— 会员价的集成
阅读目录 前言 建模 实现 结语 一.前言 前面几篇已经实现了一个基本的购买+售价计算的过程,这次再让售价丰满一些,增加一个会员价的概念.会员价在现在的主流电商中,是一个不大常见的模式,其带来的问题是 ...
- 如何一步一步用DDD设计一个电商网站（十）—— 一个完整的购物车
阅读目录 前言 回顾 梳理 实现 结语 一.前言 之前的文章中已经涉及到了购买商品加入购物车,购物车内购物项的金额计算等功能.本篇准备把剩下的购物车的基本概念一次处理完. 二.回顾 在动手之前我对之 ...
随机推荐
- CentOS7 实战部署tomcat网站服务器
简介:实战演练tomcat网站服务器的搭建 Tomcat:是一个开源免费的Web应用服务器,性能稳定,是目前比较流行的Web应用服务器 tomcat官网下载: https://tomcat.apa ...
- 讲两个int 数组找出重复的数字 用最少的循环
int a[] = {1,3}; int b[] = {1,3,5}; int size = a.length>b.length ?a.length:b.length; int valueA = ...
- 阿里技术专家详解 Dubbo 实践，演进及未来规划
Dubbo 整体介绍 Dubbo 是一款高性能,轻量级的 Java RPC 框架.虽然它是以 Java 语言来出名的,但是现在我们生态里面已经有 Go.Python.PHP.Node.JS 等等语言. ...
- 伯俊BOS2.0店铺收入对账功能设计
一.客户需求 通过导入银行POS机流水,将流水与ERP系统的零售付款数据进行对比,统计差异! 二.功能设计 1.新增"POS机号对应表单",用于维护POS机与erp店仓对应 2.新 ...
- OpenManipulator RM-X52 ROS 开源机械臂
DYNAMIXEL PRO PH54-200-S500-R 简介
- 每日一个linux命令4
mkdir命令 linux mkdir 命令用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录. mkdir test 创建一个空目录 ...
- WDCP v3 安装
---已更新至3.0.3---经过近期的努力,wdCP_v3正式版终于可以和大家见面了v3功能预览1 底层完全重新架构,更安全稳定,省资源更高效2 安装更简单,快速与方便3 功能更强大和易扩展,且完美 ...
- 【函数分享】每日PHP函数分享(2021-1-8)
explode() 使用一个字符串分割另一个字符串. array explode( string $delimiter , string $string [, int $limit ]) 参数描述de ...
- 通过DNSLOG回显验证漏洞
通过DNSLOG回显验证漏洞 前言 实际渗透测试中,有些漏洞因为没有回显导致无法准确判断漏洞是否存在,可能导致渗透测试人员浪费大量精力在一个并不存在的漏洞上,因此为了验证一些无回显漏洞,可结合DNSl ...
- ASP.NET Core中的数据保护
在这篇文章中,我将介绍ASP.NET Core 数据保护系统:它是什么,为什么我们需要它,以及它如何工作. 为什么我们需要数据保护系统? 数据保护系统是ASP.NET Core使用的一组加密api.加 ...