vercel是什麼神仙網站？

時間 2021-01-29

標籤 html node git es6 github mongodb typescript shell 數據庫 express 欄目網站開發简体版

原文原文鏈接

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項目的結構相似於下圖

訪問並登錄vercel網站，推薦使用github登錄

在vercel的Overview菜單下，點擊按鈕 New Project
在Import Git Repository選項下，選擇須要導入的項目，Import

繼續，點擊Deploy按鈕，vercel就開始構建了

構建完以後，能夠在Overview菜單下，看到新建的項目,至此項目已經建立完成，能夠經過vercel自動配置的子域名訪問了

設置自定義域名

首先，咱們須要申請一個本身的域名，本網站的域名i-tech.tech是在萬網上購買的，其餘人能夠自行選擇域名提供商typescript
點擊卡片上的粗黑色的標題（上圖中的"my-story"）進入配置界面，該界面，有4個菜單，咱們點擊Settings->Domains，並在輸入框中填入想設置的域名，點擊Add按鈕shell
Add以後，可能會看到下圖中的樣子，彆着急，還須要配置一下咱們的域名，設置一下解析數據庫

打開域名控制檯，添加一條以下圖的解析記錄

添加完以後，卡片會變成如圖的樣子

接下來就能夠經過咱們設置的域名（如https://case.i-tech.tech）訪問咱們的網站了，一個簡單的Hexo項目就部署完成了！express

須要更新網站，只須要往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);
}