从 Vercel 到 PlanetScale-六虎

本文详细介绍怎么运用 Vercel 的 Serverless 功用为项目添加 API ，并运用 Prisma 衔接 PlanetScale 数据库。

本文将不会触及且依据读者已熟知并树立以下环境：

开发环境（Node.js/Git/VSCode…）

Github 账号

科学上网

装备开发分支

承接上文，当咱们向 Github 长途库房推送代码后，Github Actions 和 Vercel 就会别离对代码进行构建和布置。

频频的 commit 操作显然会消耗过多的构建和布置时长。关于 Github 来说，免费用户的构建时长是每月 2000 分钟；而关于 Vercel 来说，免费用户的构建时长是每月 6000 分钟。虽然免费额度不太可能用完，但频频的构建确实显得糟蹋且没有必要。

因而，咱们能够从本地项目代码中迁出一个 dev 分支，用于日常的开发：

$ git checkout -b dev
# 与长途库房同步
$ git push -u origin dev

此刻，关于触发构建的条件，咱们有两种挑选：其一，在 dev 分支开发完成后，将代码兼并到 main 分支，再由 main 分支进行 push 操作触发构建，此种状况不必更改 workflow 脚本；其二，在 dev 分支开发完成后，push 到长途库房，由长途库房的 dev 分支向 main 分支提交 pull request 再触发构建，此种状况则需求对 .github/workflows/pages.yml 文件做如下修正：

...
on:
  # push:
  pull_request:
    branches: [main]
...

当然，也能够保存两者，适用于任何代码兼并的场景。

运用 Vercel 的 Serverless

Serverless 初体验

Vercel 本身是具备 Serverless 功用的，能够独自新建项目开发朴实的 API 服务；而关于具有前端部分的项目，需求在项目根目录下创立 api 目录(只能命名为 api )来作为 Serverless 的根目录。

进入 api 目录，并将其初始化：

$ cd api
$ pnpm init

假如你喜爱 ES module 方法导入模块，能够在生成的 package.json 中参加字段：

{
  ...
  "type": "module"
  ...
}

也能够不加，就会自然保持 commonjs 的导入方法。下文中的代码示例，都是以 ES module 为例。

在 api 目录下新建 index.js 文件，然后简单写一个 Serverless :

export default async (req, res) => {
  const data = {
    msg: 'Hello world!'
  }
  res.status(200).json(data)
}

提交 commit 构建布置后，在浏览器中直接翻开 <project url>/api ，假如看到以下内容，则阐明 API 布置成功：

{
  msg: "Hello world!"
}

设置 Serverless 的开发形式

Vercel 提供了开发形式，便于在本地进行开发，而不必频频布置到出产环境中，敞开 Serverless 的开发形式，只需求在本地项目目录下履行如下指令：

# Vercel 指令行登录授权
$ npx vercel auth login
# 敞开 Serverless 本地开发形式
$ npx vercel dev

指令会简单问询你几个问题，顺次绑定好对应的权限和项目即可：

此刻，在浏览器中拜访 localhost:3000/api 即可看到在本地运行 Serverless 的返回成果。

假如一起要兼顾页面和接口的开发，有两种指令行计划：

翻开两个终端窗口，别离履行 npx vercel dev 和 vite :

长处是各自的终端信息比较全面不会相互搅扰；

缺陷是需求翻开两个窗口和履行两次指令。

在 package.json 中注册一个 script:

{
  ...,
  "scripts": {
    ...,
    "vercel:dev": "npx vercel dev | vite"
  }
}

然后履行 pnpm vercel:dev 即可一起启动开发环境下的页面和接口服务。

长处是只需求敞开一个终端界面，并履行一个指令就能够敞开一切服务；

缺陷是一切信息混在在一起，对各个开发部分会有必定搅扰。

因为在开发环境中，页面和接口的服务在不同的端口提供，在页面开发中直接恳求接口会有跨域约束，咱们需求在 vite.config.js 中装备署理：

import { defineConfig } from 'vite'
export default defineConfig({
  ...,
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000/api',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      }
    }
  }
})

这样在恳求时，只需求恳求 /api 则会署理到本地的接口服务。一起，因为在 Vercel 出产环境页面和接口服务是同域名，则不存在跨域的状况，因而在出产环境能够不必做更多的处理。

PlanetScale 和 Prisma

PlanetScale 数据库的创立和装备

翻开 planetscale.com ，相同能够运用 Github 账号进行授权登录。

PlanetScale 为免费用户提供了一个免费的数据库，这个数据库能够包含两个分支，一起，有必定的运用约束，如下图所示：

但关于一个个人博客项目来说，这个额度是足够的。

登录后，咱们能够创立一个数据库：

通过 Region 来挑选数据库实例地点的节点，建议依据地理位置挑选离自己更近的节点。

创立好数据库后，能够点击 New Branch 创立一个开发分支，如下图：

创立好分支后，在任一分支的 Overview 界面下，点击 Promote a branch to production 按钮，来指定一个出产环境分支：

一般地，咱们将 main 分支作为出产环境分支，而 dev 作为开发环境分支。

在两个分支的 Overview 界面中点击 Connect 按钮，PlanetScale 会生成对应数据库的衔接凭据：

能够更改 Connect with 选项，检查不同衔接方法的凭据运用介绍，此处咱们挑选 Prisma :

将获取到的 DATABASE_URL 参数填写到 Vercel 项目装备的 Environment Variables 中装备环境变量：

这儿，需求装备两个 DATABASE_URL 别离在开发环境和出产环境，对应 PlanetScale 数据库的开发分支和出产分支的拜访凭据。

拜访凭据装备在此处的目的是为了使敏感信息更安全，而不会随项目代码露出出去。

运用 Prisma 衔接数据库

让咱们暂时回到本地项目目录，来到 api 目录，添加依赖，并初始化 Prisma ：

$ pnpm add @prisma/client
$ pnpm add prisma -D
$ npx prisma init

初始化过程会在目录下生成 prisma/schema.prisma 和 .env 。

在 prisma/schema.prisma 中写入如下内容：

// 生成客户端
generator client {
  provider = "prisma-client-js"
}
// 数据源衔接凭据
datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}
// User 数据表描绘
model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

在 .env 中写入如下内容：

DATABASE_URL='mysql://root@127.0.0.1:3309/<database name>'

其中，<database name> 为 PlanetScale 上创立的数据库称号。

安装 PlanetScale CLI :

github.com/planetscale…

从以上地址能够获取 PlanetScale CLI 的各渠道最新版本，下载后解压后放置在任意途径，并将该途径注册进系统的环境变量中

在终端中运用 pscale version 来检测安装是否成功。

在终端中输入指令：

# 弹出页面验证授权
$ pscale auth login

# 衔接数据库，并署理到本地 3309 端口
$ pscale connect <database name> <branch name> --port 3309

其中，<database name> 为数据库称号， <branch name> 为分支称号，此处能够为咱们设置的开发分支 dev 。

本地署理端口能够更改，但需与 .env 中 DATABASE_URL 描绘的端口保持一致。

然后再翻开一个终端，输入指令：

$ npx prisma db push

履行结束后，咱们能够去检查 PlanetScale 的控制台的 Schema 界面，里边有相应的 User 表，则证明咱们的数据结构操作现已成功：

此刻，就能够在数据表中添加一些数据，此处笔者直接运用 Prisma studio 进行操作：

$ npx prisma studio

在弹出的页面中操作添加一条记载：

接下来，咱们处理一下 Serverless 的代码。

首先，咱们在 api 目录下创立 lib/prisma.js ，其内容如下：

import { PrismaClient } from '@prisma/client'
const prisma = global.prisma || new PrismaClient()
if (process.env.NODE_ENV === 'development') global.prisma = prisma
export default prisma

其目的在于在开发环境下创立 PrismaClient 的单例。

然后，咱们修正一下 index.js 的内容：

import prisma from './lib/prisma.js'
export default async (req, res) => {
  const users = await prisma.user.findMany()
  const data = {
    msg: 'Hello world!',
    data: users
  }
  res.status(200).json(data)
}

敞开本地开发服务，拜访 localhost:3000/api 就会得到如下成果：

{
  msg: "Hello world!",
  data: [
    {
      id: 1,
      email: "test_user@test.com",
      name: "user_development"
    }
  ]
}

阐明在开发环境中，完好打通了从 Serverless 到数据库的开发链路，能够进一步编写接口的业务逻辑。

数据库布置

当咱们开发好相关的 Serverless 功用，数据库结构也相应固定下来时，就能够进行布置操作了。

前文现已介绍了 Serverless 的布置，此处不再赘述，但需求补充的是，因为 Vercel Serverless 的构建不会进行 Prisma Client 的生成，因而需求在提交代码布置之前于 api 目录下的 package.json 中添加一条 script 钩子 ：

{
  ...,
  "scripts": {
    ...,
    "postinstall": "prisma generate"
  }
}

下面咱们侧重介绍数据库的布置：

首先，咱们需求将数据库的 dev 分支通过 deploy request 兼并到 main 分支上：

当确认 deploy request 之后，两表的结构就兼并了。

然后，在终端窗口树立数据库出产分支的署理：

$ pscale connect tutorial main --port 3309

翻开一个新的终端，运用 Prisma studio 衔接数据库：

$ npx prisma studio

创立一条记载：

然后，确保 Serverless 布置和数据库都预备妥当后，拜访 <project url>/api ，假如呈现以下内容：

{
  msg: "Hello world!",
  data: [
    {
      id: 1,
      email: "test_user@test.com",
      name: "test_production"
    }
  ]
}

则阐明布置出产环境现已成功。

总结

在本文中，咱们首先区分了项目的开发环境和出产环境，并从 Vercel 的 Serverless 功用动身，通过 Prisma 在 Serverless 中添加拜访 PlanetScale 数据库的能力。

至此，一套完好的、环绕 Github, Vercel, PlanetScale, Prisma 功用的个人博客系统开发工作流现已彻底打通，后续的关注点就将逐渐转移到详细业务功用的实现上。

前文拾遗

在上文中，咱们创立了 gh-pages 分支用于承载构建后的文件，用于布置至 Github Pages 。但在触发 Vercel 构建后，Vercel 会进行 Preview Deployment ，而它的默许拉取分支便是 gh-pages 。这会形成 Vercel 的构建错误，如下图：

解决方法便是，在项目的 Settings > Git > Ignored Build Step 中装备：

# Command
[ "$VERCEL_ENV" != production ]

这能够阻止触发 非production 的构建。

一起，因为构建会触发 Github 告诉，会默许发送告诉和邮件，假如觉得没有必要或觉得遭到打扰，能够在项目中添加 vercel.json 装备文件，然后添加如下部分：

{
  ...,
  "github": {
    "silent": true
  }
}

如对该文章触及到的论题感兴趣，可关注

【开源说】微信大众号

回复【关注】或【作者】

长按二维码加老友，备注【开源说】

从 Vercel 到 PlanetScale

装备开发分支

运用 Vercel 的 Serverless

Serverless 初体验

设置 Serverless 的开发形式

PlanetScale 和 Prisma

PlanetScale 数据库的创立和装备

运用 Prisma 衔接数据库

数据库布置

总结

前文拾遗

相关文章

Android学习之Intent

来了铁子，看完别说不会了哦，SpringBoot【完结篇】！

疫情这么严重下的初级前端年终总结

Flutter 源码分析系列之RendererBinding

作者信息