將 Node 應用 Express-js 部署到 Vercel

前言

之前有期視頻介紹過，在 Vercel 上可以免費部署很多應用，包括 Next.js、Nuxt、Remix。除了 Node.js 甚至還支持其他語言，包括 Go、 Python、Ruby，但在 Node.js 中有一個老牌的框架 Express.js，很多應用都是通過 Express.js 創建的，本文將記錄下，如何將 Express.js 應用部署到 Vercel，以及它在 serverless 環境中應該考慮的因素。

在 Vercel 上部署 Express.js 應用程序只需要修改少量代碼。讓我們使用以下步驟創建一個新的 Express.js 項目並將其部署到 Vercel。

使用模板

Vercel 官網有一個 Express.js 項目示例 [1]，可以將其克隆並部署到 Vercel 作爲項目的初始模板。

遷移現有項目

前置條件

安裝 Node.js 環境
擁有 vercel 賬號（可使用 Github 賬號登錄）

創建一個 Express.js 項目

mkdir new-express-project

cd new-express-project

npm init -y

npm install express

並且我們創建一個src/index.js 作爲入口文件

const express = require("express");

const app = express();



app.get("/", (req, res) => res.send("Hello Express"));



app.listen(3000, () => console.log("Server ready on port 3000."));

現在，我們運行 node src/index.js 便可以在本地啓動 Express.js 服務。訪問 http://localhost:3000/ 頁面顯示 Hello Express。

適配 vercel

我們知道 Vercel 是提供的是 serverless 服務，因此他有一個 api 目錄作爲每個函數的入口程序。

比如我們新建一個文件 api/hello.js

export default function handler(request, response) {

  const { name = 'World' } = request.query;

  return response.send(`Hello ${name}!`);

}

部署到 Vercel 之後，訪問 https://example.vercel.app/api/hello?name=Vercel

頁面就會顯示 Hello Vercel。

這就是 serverless，如要將傳統 node 程序遷移到 serverless，需要改動大量代碼。

幸運的是 vercel 已經實現了適配 express.js。

新建一個 api/index.js 作爲主程序的入口。

const { app } = require("../src");



module.exports = app;

並且導出 app。

修改在 src/index.js 中導出 app

const express = require("express");

const app = express();



app.get("/", (req, res) => res.send("Hello Express"));



app.listen(3000, () => console.log("Server ready on port 3000."));



+ exports.app = app;

在根目錄下新建一個文件 vercel.json

{   
    "version": 2, 
    "rewrites": [
        { "source": "/(.*)", "destination": "/api" }
    ]

}

通過使用 vercel.json 文件，我們可以控制 Vercel 配置應用程序的路由，將告訴 Vercel 將所有傳入請求路由到我們的 /api 文件夾。

本地運行

我們可以使用 Vercel CLI 在本地模擬 Vercel 部署的環境。這樣運行方式與 vercel 保持一致

首先，我們需要在終端中運行以下命令來安裝 Vercel CLI。

npm i -g vercel

接下來，登錄 Vercel 授權，Vercel CLI 在您的 Vercel 賬戶上運行命令。

vercel login

現在我們使用本地開發命令，該命令還將執行上面創建的vercel.json配置。

vercel dev

運行 vercel dev 會問你一些問題，隨意回答即可。

回答完問題後，您現在應該在 http://localhost:3000 上有一個本地運行的服務器，我們可以在部署到 Vercel 之前測試該應用程序是否正常運行。

部署

我們可以將代碼提交到 Github 中，然後在 vercel 儀表盤中關聯 git 項目，這樣每次提交代碼就會自動部署。也可以使用 vercel cli 來部署。

只需要執行

vercel

就可以打包部署，在控制檯中會打印 2 個地址，第一個鏈接地址可以查看部署情況。第二個鏈接就是生成的預覽地址。

使用 vercel --prod 可以將預覽環境發佈到生產環境。

適配 serverless 環境

如果從服務器環境遷移到 vercel serverless 環境，可能還需要考慮幾個因素，因爲不再有服務器在後臺運行

Websockets：serverless 函數具有最大執行時間限制，因此需要儘快響應。因此需要客戶端定時請求數據，推薦使用使用 swr 方案代替，或者考慮使用 serverless 友好的實時數據提供程序。

數據庫連接：serverless 函數的本質意味着它們可以打開多個數據庫連接以響應不斷增加的流量。爲了有效地管理這一點，請使用 serverless 友好的數據庫或實時連接池。這有助於確保最佳連接並維持應用程序的正常運行時間。

模板和視圖引擎：在 serverless 環境中，優化響應計算至關重要。考慮 React、Pug 或 EJS 等視圖引擎的效率。設置正確的標頭以啓用緩存也很重要，從而避免需要爲每個請求計算相同的響應。這種方法最大限度地減少了按需計算，並利用緩存的內容來滿足未來的請求。

例如在 vercel.json 配置緩存

{

  "version": 2,

  "rewrites": [{ "source": "/(.*)", "destination": "/api" }],

  "headers": [

    {

      "source": "/assets/(.*)",

      "headers": [

        {

          "key": "Cache-Control",

          "value": "max-age=31536000, immutable"

        }

      ]

    }

  ]

}

參考：https://vercel.com/guides/using-express-with-vercel

[1]Express.js 項目示例：_ https://github.com/vercel/examples/tree/main/solutions/express_

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/fKu9K6XHPbP_j9_nJr5OBw

前言