碼上歡樂
相關內容    簡體    繁體

vercel是什么神仙網站？

本文轉載自   查看原文   2021-01-29 18:41   315    vercel/ 前端/ 網站托管/ serverless

Vercel?

vercel是我用過的最好用的網站托管服務。本網站就是基於hexo引擎模板開發，托管在vercel上的。

vercel類似於github page，但遠比github page強大，速度也快得多得多，而且將Github授權給vercel后，可以達到最優雅的發布體驗，只需將代碼輕輕一推，項目就自動更新部署了。

vercel還支持部署serverless接口。那代表着，其不僅僅可以部署靜態網站，甚至可以部署動態網站，而這些功能，統統都是免費的，簡直是白嫖黨的福利啊！！！！！

vercel還支持自動配置https，不用自己去FreeSSL申請證書，更是省去了一大堆證書的配置，簡直是懶人的福利啊啊啊有木有！

vercel目前的部署模板有31種之多，我沒有全部用過。接下來，我將介紹其中的兩種。

vercel支持的模板

用Vercel部署Hexo

新建一個vercel項目

關於hexo的怎么用可以前往hexo官網了解

  • 將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是在萬網上購買的，其他人可以自行選擇域名提供商

  • 點擊卡片上的粗黑色的標題（上圖中的"my-story"）進入配置界面，該界面，有4個菜單，我們點擊Settings->Domains，並在輸入框中填入想設置的域名，點擊Add按鈕image-20210129095458198

  • Add之后，可能會看到下圖中的樣子，別着急，還需要配置一下我們的域名，設置一下解析

image-20210129095610042

  • 打開域名控制台，添加一條如下圖的解析記錄

image-20210129100136724

  • 添加完之后，卡片會變成如圖的樣子

image-20210129100321509

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

需要更新網站，只需要往github上提交新的commit，vercel就會自動重新構建了！完美！！！！

用vercel部署Serverless Api，不購買雲服務器也能擁有自己的動態網站，酷！！！！

有人可能會問了。能部署api還不行啊，沒有數據庫啊。身為一個混跡江湖多年的白嫖黨，請跟我繼續往下走~

去https://cloud.mongodb.com上白嫖一個數據庫如何？

https://cloud.mongodb.com提供512M免費的MongoDB存儲額度，作為個人網站使用足夠了，當然還有其他的免費數據庫，如db4free.net、mlab.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會向該郵箱發送一個鏈接，點擊該鏈接確認登錄

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

image-20210129142716094

  • 訪問鏈接后我們可以看到

image-20210129142745377

  • 這還只是最簡單的頁面，到這里，我們的項目目錄結構應該長這樣子的

image-20210129142924324

  • 為了讓我們的項目更強大，引入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鏈接查看效果

image-20210129151736608

Serverless連接MongoDB數據庫

  • 通過以下命令安裝依賴，我們就可以在nodejs中操作MongoDB數據庫了
 npm i mongodb
 npm i @types/mongodb -D
  • 為了方便我們測試，我們先用Navicat往MongoDB添加一條數據，添加后的數據長這樣，集合的名字叫做northwind，document為{name:"huangkemeng"}

image-20210129153828521

  • 接下來，我們用接口返回這條數據。我們在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變量的值，我們很輕而易舉得地找到，請看下圖

image-20210129161709172

image-20210129161810441

  • 至此，一個通過MongoDB返回數據的serverless接口開發完畢，請看效果

image-20210129162053681

  • 通過運行vercel --prod命令即可將其發布。

關於更多關於vercel的介紹了，可以郵件聯系我，比如該serverless的調試等，篇幅太長，這里就不再贅述！。End！

轉載自葉子的博客


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 推薦自學python必入的神仙網站 codeforces 1461D，離線查詢是什么神仙方法，為什么快這么多？ Golang | 既是接口又是類型，interface是什么神仙用法？ 一次找出范圍內的所有素數，埃式篩法是什么神仙算法？ 神仙語錄 將你的hexo部署在vercel Vercel雲服務和Serverless Github Page 加速 | vercel ~~ Vercel托管博客 陸地神仙：張至順
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM