部署到 Deno Deploy

透過本指南，您可以學習如何構建一個簡單的應用程式並將其部署到 Deno Deploy。該應用程式使用 Prisma ORM 將每個請求的日誌儲存到 Prisma Postgres 資料庫。

本指南涵蓋了 Prisma CLI 與 Deno CLI、Deno Deploy、Prisma Client 和 Prisma Postgres 的使用。

資訊

本指南演示瞭如何將應用程式部署到 Deno Deploy 並結合 Prisma Postgres 資料庫，但您也可以使用 Prisma Accelerate 搭配您自己的資料庫。

先決條件

一個免費的賬戶
一個免費的 Deno Deploy 賬戶
已安裝 Node.js 和 npm
已安裝 Deno v1.29.4 或更高版本。瞭解更多。
（推薦）最新版本的 Prisma ORM。
（推薦）VS Code 的 Deno 擴充套件。瞭解更多。

1. 設定您的應用程式和資料庫

首先，為您建立一個專案目錄，然後使用 deno run 和 prisma init 將您的應用程式初始化為具有 npm 描述符的 npm 包。

要設定您的應用程式，請開啟終端並導航到您選擇的位置。然後，執行以下命令來設定您的應用程式

mkdir prisma-deno-deploy
cd prisma-deno-deploy
npx prisma@latest init --db

輸入專案名稱並選擇資料庫區域。

此命令

將您的 CLI 連線到您的賬戶。如果您尚未登入或沒有賬戶，瀏覽器將開啟以引導您建立新賬戶或登入現有賬戶。
建立一個包含 schema.prisma 檔案的 prisma 目錄，用於您的資料庫模型。
建立一個 .env 檔案，其中包含您的 DATABASE_URL（例如，對於 Prisma Postgres，它應該類似於 DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI..."）。

編輯 prisma/schema.prisma 檔案以定義一個 Log 模型，新增自定義的 output 路徑，並使用 deno 作為 runtime 新增 prisma-client 生成器

schema.prisma

generator client {
  provider        = "prisma-client-js"
  provider        = "prisma-client"
  output          = "../generated/prisma"
  runtime = "deno"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Log {
  id      Int    @id @default(autoincrement())
  level   Level
  message String
  meta    Json
}

enum Level {
  Info
  Warn
  Error
}

然後，安裝 Prisma Client

deno install npm:@prisma/client

然後，安裝使用 Prisma Postgres 所需的客戶端擴充套件

deno install npm:@prisma/extension-accelerate

Prisma Client 在 Deno 上預設不讀取 .env 檔案，因此您還必須在本地安裝 dotenv-cli

deno install npm:dotenv-cli

2. 建立資料庫模式

資料模型就緒且資料庫連線配置完成後，您現在可以將資料模型應用到資料庫。

deno run -A npm:prisma migrate dev --name init

該命令執行兩個操作

它為這次遷移建立一個新的 SQL 遷移檔案
它針對資料庫執行 SQL 遷移檔案

此時，該命令還有額外的副作用。該命令會安裝 Prisma Client 併為專案建立 package.json 檔案。

3. 建立您的應用程式

您現在可以建立一個本地 Deno 應用程式。在專案根資料夾中建立 index.ts 並新增以下內容

index.ts

import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
import { withAccelerate } from "npm:@prisma/extension-accelerate";
import { PrismaClient } from "./generated/prisma/client.ts";

const prisma = new PrismaClient().$extends(withAccelerate());

async function handler(request: Request) {
  // Ignore /favicon.ico requests:
  const url = new URL(request.url);
  if (url.pathname === "/favicon.ico") {
    return new Response(null, { status: 204 });
  }

  const log = await prisma.log.create({
    data: {
      level: "Info",
      message: `${request.method} ${request.url}`,
      meta: {
        headers: JSON.stringify(request.headers),
      },
    },
  });
  const body = JSON.stringify(log, null, 2);
  return new Response(body, {
    headers: { "content-type": "application/json; charset=utf-8" },
  });
}

serve(handler);

資訊

VS Code 錯誤：匯入路徑不能以“.ts”副檔名結尾

如果您使用 VS Code 並在 index.ts 開頭的 import 語句中看到錯誤 匯入路徑不能以“.ts”副檔名結尾，您需要安裝 VS Code 的 Deno 擴充套件，選擇檢視 > 命令面板 並執行命令 Deno: 初始化工作區配置。這會告訴 VS Code 當前專案中的 TypeScript 檔案需要用 Deno 執行，從而觸發正確的驗證。

4. 在本地測試您的應用程式

您現在可以在本地啟動應用程式並測試日誌條目的建立。

npx dotenv -- deno run -A ./index.ts

在網路瀏覽器中，開啟 https://:8000/。此頁面將您的請求寫入資料庫。

{
  "id": 1,
  "level": "Info",
  "message": "GET https://:8000/",
  "meta": {
    "headers": "{}"
  }
}

重新整理頁面幾次。

每次重新整理時，指令碼都會生成一個新的日誌條目，並且當前日誌條目的 id 會遞增。

這證實了您的應用程式在本地環境中執行時是正常的。

5. 建立儲存庫並推送到 GitHub

您需要一個 GitHub 儲存庫來將您的專案新增到 Deno Deploy 並啟用在您推送更改時自動部署。

要設定 GitHub 儲存庫

建立一個私有 GitHub 儲存庫.

在本地初始化您的儲存庫並將您的更改推送到 GitHub，使用以下命令

git init -b main
git remote add origin https://github.com/<username>/prisma-deno-deploy
git add .
git commit -m "initial commit"
git push -u origin main

6. 部署到 Deno Deploy

使用 GitHub 儲存庫將您的應用程式新增到 Deno Deploy

前往 https://dash.deno.com/。
選擇一個 GitHub 組織或使用者，然後選擇一個儲存庫。
選擇一個生產分支並選擇 Fresh (Automatic) 模式，以便 Deno Deploy 可以在您每次推送更改到儲存庫時進行部署。
在 Build Step 中新增 deno run -A npm:prisma generate 來生成 Prisma Client。
選擇 index.ts 作為您專案的入口點。
點選 建立並部署。

部署應該會失敗，因為您必須新增 DATABASE_URL 環境變數。

找到並導航到專案的設定。

要定義資料庫連線字串，請在 環境變數 部分點選 新增變數。
1. 對於 KEY，輸入 DATABASE_URL。
2. 對於 VALUE，貼上資料庫連線字串。
點選儲存。

您必須新增一些程式碼並建立另一個提交以觸發重新部署。

在您的 index.ts 檔案中新增以下程式碼

index.ts

import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
import { withAccelerate } from "npm:@prisma/extension-accelerate";
import { PrismaClient } from "./generated/prisma/client.ts";

const prisma = new PrismaClient().$extends(withAccelerate());

async function handler(request: Request) {
  // Ignore /favicon.ico requests:
  const url = new URL(request.url);
  if (url.pathname === "/favicon.ico") {
    return new Response(null, { status: 204 });
  }

  console.log("Request received.")

  const log = await prisma.log.create({
    data: {
      level: "Info",
      message: `${request.method} ${request.url}`,
      meta: {
        headers: JSON.stringify(request.headers),
      },
    },
  });
  const body = JSON.stringify(log, null, 2);
  return new Response(body, {
    headers: { "content-type": "application/json; charset=utf-8" },
  });
}

serve(handler);

提交新更改

git add . 
git commit -m "add log"
git push origin main

這將重新構建部署，現在由於添加了環境變數而起作用。完成後，按照部署輸出中的 URL。應用程式應該顯示與之前相同的結果，帶有新的、遞增的日誌記錄 ID

{
  "id": 5,
  "level": "Info",
  "message": "GET https://prisma-deno-deploy.deno.dev/",
  "meta": {
    "headers": "{}"
  }
}

總結

您已成功部署了一個您使用 TypeScript 建立的 Deno 應用程式，該應用程式使用 Prisma Client 連線到 Prisma Postgres 資料庫。

先決條件​

1. 設定您的應用程式和資料庫​

2. 建立資料庫模式​

3. 建立您的應用程式​

4. 在本地測試您的應用程式​

5. 建立儲存庫並推送到 GitHub​

6. 部署到 Deno Deploy​

總結​