如何使用TypeScript和CockroachDB部署Netlify应用程序

368 阅读5分钟

当你在建立一个网络应用程序的快速原型时,你可能不会过多考虑你的数据库将如何扩展。

但从长远来看,规模很重要。虽然扩展和部署一个高可用的关系型数据库曾经既昂贵又具有挑战性,但今天它是非常简单的,而且完全免费。真的没有理由不从一个可以自动扩展的数据库开始。

为了证明这一点,让我们来看看使用Prisma和Netlify部署一个使用CockroachDB无服务器--一个云原生分布式SQL数据库--的TypeScript应用样本所需的步骤。

前提条件

在我们开始之前,本教程假设你已经在你的电脑上设置了一些东西。如果你没有,你需要在进行第一步之前把这些东西安装好。

从技术上讲,Github CLI不是必需的,但如果你没有安装它,你将不得不调整本教程中的一些命令。

另外,为了直接检查数据库,安装CockroachDB SQL shell也会有帮助,尽管这不是必须的。

在本教程中,我们也不打算讨论创建应用程序本身,我们只专注于部署它。

在这个教程中,我们将主要使用命令行。让我们开始吧

1.创建一个Netlify的启动账户

第一步是创建一个Netlify的启动账户。这是免费的,你可以用你现有的Github凭证来做。

2.创建一个免费的CockroachDB账户并开始一个无服务器集群

接下来,注册CockroachDB云账户并启动一个免费的无服务器集群。

集群的默认选项对于我们的目的来说是没有问题的,只要你保持默认的0美元支出限额,注册时就不需要信用卡了。

当集群被创建后,连接信息窗口将自动打开。点击这个窗口中的连接字符串标签,并在一个安全的地方记下你的连接字符串。(除其他事项外,这个字符串包含你的密码,只提供一次。我们在本教程的后面也会需要这个字符串)。

现在,我们将离开网络,转而使用命令行。导航到你想放置项目的目录,然后克隆Github repo。

git clone git@github.com:cockroachdb/cockroachdb-typescript.git

在项目目录的顶层,分叉该项目(为了将你的代码部署到Netlify,你需要有自己的 repo 或现有 repo 的分叉)。

gh repo fork --remote

一切就绪!

4.使用Prisma初始化数据库

接下来,我们将使用Prisma和它的CockroachDB集成,让你创建的数据库集群与应用程序正确连接。

第一步是修改项目目录中隐藏的.env 文件,包含一个名为DATABASE_URL 的变量,该变量等于我们在第2步中保存的CockroachDB连接字符串。

在这种情况下,该文件是空的,我们可以使用echo 命令,直接从命令行将环境变量添加到其中。

echo "DATABASE_URL=your-database-connection-string-goes-here” >> .env

接下来,我们将安装Prisma。

npm install prisma --save-dev

然后,我们将运行Prisma Migrate来初始化数据库。这将在我们的CockroachDB无服务器集群中创建一个数据库,使用我们项目目录下prisma/schema.prisma 中定义的模式,并从prisma/seed.ts 中获取一些数据作为种子。

npx prisma migrate dev --name init

运行这个命令将产生以下输出。

Your database is now in sync with your schema.
✔ Generated Prisma Client (3.11.0 | library) to ./node_modules/@prisma/client in 87ms

Running seed command `ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts` ...
{
  test_player_1: { id: 1n, name: 'Test Player 1', email: 'test_player_1@example.com' },
  test_player_2: { id: 2n, name: 'Test Player 2', email: 'test_player_2@example.com' },
  test_player_3: { id: 3n, name: 'Test Player 3', email: 'test_player_3@example.com' }
}

🌱  The seed command has been executed.

5.使用Netlify进行本地部署

现在是时候部署到Netlify了,我们可以通过Github进行部署。我们将从本地部署开始,但要通过命令行进行部署,我们需要先安装Netlify CLI。

npm install netlify-cli -g

一旦安装完毕,我们就可以登录了。

netlify login

运行这个命令将打开一个浏览器窗口,提示你授权该应用程序。点击 "授权 "并返回到命令行。如果你已经授权了 netlify CLI,运行这个命令会直接登录,而不用打开浏览器窗口。

现在,我们将使用以下命令在本地部署该网站。

netlify dev

这将在本地部署应用程序,你可以通过浏览器访问http://localhost:8888/(或运行命令后在输出中指定的URL),并点击以确保应用程序按预期工作。

一旦我们准备好上线,我们可以使用以下命令公开部署应用程序

netlify deploy

这将导致在命令行中出现一系列的提示,其中第一个提示是是否将该项目链接到现有的网站或创建一个新网站。

我们没有Netlify网站,所以让我们选择创建和配置一个新的网站。然后我们会被提示创建一个团队名称和一个网站名称。我们可以使用默认值,让Netlify为我们选择一个网站名称。

接下来我们会被提示创建一个发布目录。同样,我们可以在这里点击默认选项.

在这之后,你可能会被提示通过Github授权(如果你还没有),你需要等待一下所有的文件上传。当它们完成后,你应该看到这个消息。

✔ Deploy is live!

现在,我们可以运行以下命令,在浏览器中打开Netlify的管理界面,这将允许我们查看预览构建和发布网站。

netlify open

就这样了!我们在很短的时间内部署并发布了一个使用自动扩展的分布式云SQL数据库的TypeScript应用。