在 Vercel 上部署 Node API（Express Typescript）

几周前，我用 Node 开发了一个基于 Typescript 的 API，并尝试将其部署到 Heroku 上。

但这个过程漫长而耗时。另外，我注意到 Heroku 将从 2022 年 11 月 28 日起停止免费账户。☹️

因此，我尝试了各种其他平台来部署基于 Typescript 的 Node API。我发现其中一个免费、强大且功能丰富的平台是 VERCEL。根据我的经验，以下是一些简单的步骤，您可以按照这些步骤轻松地在 Vercel 上部署基于 Typescript 的 Node API。🚀

1）Express + Typescript 样板应用✏️

使用 TypeScript 创建 Express 项目。您可以按照以下步骤为该项目制作样板。（Github 仓库链接在文章末尾提供）

• 初始化节点项目
  
  
  

  npm init -y
  

• 安装软件包（您可以使用 npm/yarn/pnpm）
  
  
  

  yarn add express
  yarn add -D typescript
  yarn add -D @types/node
  yarn add -D @types/express
  yarn add -D nodemon
  yarn add -D ts-node
  

• 要tsconfig.json
  使用 TypeScript，我们需要创建 tsconfig.json 文件，它将有助于用纯 JS 编译和构建 TypeScript 文件。执行以下命令
  
  
  

  npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
  

文件创建完成后，您可以保留原样，或者清理不必要的内容。将 的内容替换tsconfig.json为以下内容：

    {
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "target": "es6",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {
            "*": ["node_modules/*", "src/types/*"]
        }
    },
    "include": ["./src/**/*"]
    }

• 更新scripts于package.json
  
  
  

  "start": "nodemon src/index.ts",
  

• 编写快速服务器代码：创建文件：src/index.ts并将以下代码粘贴到其中

  import express, { Request, Response } from 'express'

  const app = express()
  const port = process.env.PORT || 8080

  app.get('/', (_req: Request, res: Response) => {
    return res.send('Express Typescript on Vercel')
  })

  app.get('/ping', (_req: Request, res: Response) => {
    return res.send('pong 🏓')
  })

  app.listen(port, () => {
    return console.log(`Server is listening on ${port}`)
  })

• 启动服务器：在终端中运行yarn start或npm run start命令以启动快速服务。您可以打开浏览器并访问localhost:8080。API 将返回 的响应Express Typescript on Vercel。

2）在我们的项目中初始化 git。📥

• .gitignore在文件夹根目录下创建一个文件，并添加node_modules内容。如果 .gitignore 文件存在，则检查该文件node_modules是否已添加到其中。
• git init在终端中执行（从项目根目录）或者您可以使用 VS Code 的源代码控制选项卡来初始化 git 存储库。
• 将本地仓库连接到远程仓库 (github/bitbucket)。您可以使用任何版本控制系统来发布您的仓库。

3）创建 Vercel 项目🗃️

• 前往 vercel.com -> 登录
• 使用您保存了存储库的版本控制平台登录。

• 从仪表板 -> 添加新项目 -> 选择您的存储库 -> 部署

• 部署后你会看到类似这样的内容！😟

（错误🚨）

• 别担心...只需按照步骤修复它。👍

4）在应用程序中添加 Vercel 配置⚙️

• 在上面的步骤中，第一次部署完成后，您可以看到我们没有收到Express Typescript on Vercel来自 API 的响应。
• 为了按预期工作，我们需要告诉 Vercel 这是一个 API，您需要将其作为无服务器功能提供。
• 为此，我们只需vercel.json在项目根目录中添加文件。将以下代码粘贴到文件中。

{
    "version": 2,
    "builds": [
        {
            "src": "dist/index.js",
            "use": "@vercel/node",
            "config": { "includeFiles": ["dist/**"] }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "dist/index.js"
        }
    ]
}

注意：请检查您的 tsconfig.json 文件。必须保留 的值outDir，而不是dist。如果您的配置文件中有除 之外的其他值dist，请在两个位置中的任意一个位置替换它。

5）添加pre-commit钩子🏷️

• Vercel 需要纯 JS 源文件，而不是 Typescript。为此，我们需要在提交之前构建项目并发送编译后的 JS 文件，以便 Vercel 能够解析这些文件并提供 API。

• 安装pre-commit和rimraf打包：
  
  
  

  yarn add -D pre-commit
  yarn add -D rimraf

• 修改文件scripts中的字段package.json如下：

  "scripts": {
  "start": "nodemon src/index.ts",
  "build": "rimraf dist && tsc",
  "ts.check": "tsc --project tsconfig.json",
  "add-build": "git add dist",
  "test": "echo \"Error: no test specified\" && exit 1"
  },

• 添加新字段pre-commitfield 在package.json：

  "pre-commit": [
      "ts.check",
      "build",
      "add-build"
  ]

• 这能做什么？→ 每当你提交时，pre-commit 中编写的命令都会被执行。它会检查 Typescript 错误，构建项目，并将 build 文件夹添加到暂存的更改中。（如果你选择手动构建，请不要忘记运行 build 命令来开始构建。）

5）重新部署并重新检查 API

• 提交您所做的更改，并将提交推送到 GitHub。检查 Vercel 是否有新的部署。Vercel 会在每次推送时自动触发新的部署。如果 Vercel 尚未启动，您可以手动启动部署。

• 新部署上线后，您可以复制部署 URL 并在浏览器中运行。您将看到Express Typescript on VercelAPI 响应。太棒了😃

• 为了确保 API 正常运行，您还可以点击将作为响应/ping返回的路由。pong 🏓

结束语🙋‍♂️

• 感谢您跟随我的步骤。如果您发现上述步骤有任何问题，请在评论区留言。
• 也谦虚地请求你写下你想在我的下一篇博客里讨论的主题。我会把它添加到我的目标清单里。🎯
• 该项目的 Github repo 链接：Express Typescript 代码

蒂尔斯·帕特尔，签字！ 🫡