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！
轉載自葉子的博客