メインコンテンツにスキップ

Deno Deployへのデプロイ

このガイドでは、シンプルなアプリケーションをDeno Deployに構築してデプロイする方法を学習できます。このアプリケーションは、Prisma ORMを使用して各リクエストのログをPrisma Postgresデータベースに保存します。

このガイドでは、Prisma CLI、Deno CLI、Deno Deploy、Prisma Client、およびPrisma Postgresの使用について説明します。

情報

このガイドでは、Prisma Postgresデータベースと連携してDeno Deployにアプリケーションをデプロイする方法を示しますが、Prisma Accelerateで独自のデータベースを使用することもできます。

前提条件​

  • 無料のアカウント
  • 無料のDeno Deployアカウント
  • Node.js & npmがインストールされていること
  • Deno v1.29.4以降がインストールされていること。詳細はこちら。
  • (推奨) Prisma ORMの最新バージョン。
  • (推奨) VS Code用Deno拡張機能。詳細はこちら。

1. アプリケーションとデータベースをセットアップする​

まず、プロジェクトのディレクトリを作成し、次にdeno runを使用してprisma initを実行し、npm specifiersを持つnpmパッケージとしてアプリケーションを初期化します。

アプリケーションをセットアップするには、ターミナルを開き、任意の場所に移動します。次に、次のコマンドを実行してアプリケーションをセットアップします

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

プロジェクトの名前を入力し、データベースのリージョンを選択します。

このコマンドは

  • お使いのCLIをアカウントに接続します。ログインしていない場合、またはアカウントをお持ちでない場合は、ブラウザが開き、新しいアカウントの作成または既存のアカウントへのサインインを案内します。
  • データベースモデル用のschema.prismaファイルを含むprismaディレクトリを作成します。
  • DATABASE_URL（例: Prisma Postgresの場合、DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI..."のような値）を含む.envファイルを作成します。

prisma/schema.prismaファイルを編集して、Logモデルを定義し、カスタムのoutputパスと、runtimeとしてdenoを指定した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を使用するために必要なClient extensionをインストールします

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

このコマンドは2つのことを行います。

  1. このマイグレーション用の新しいSQLマイグレーションファイルを作成します。
  2. データベースに対して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のエラー: An import path cannot end with a '.ts' extension

VS Codeを使用しており、index.tsの冒頭のimport文でAn import path cannot end with a '.ts' extensionというエラーが表示される場合は、VS Code用Deno拡張機能をインストールし、表示 > コマンドパレットを選択してDeno: Initialize Workspace Configurationコマンドを実行する必要があります。これにより、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にプッシュする​

プロジェクトをDeno Deployに追加し、変更をプッシュするたびに自動デプロイを有効にするには、GitHubリポジトリが必要です。

GitHubリポジトリをセットアップするには

  1. プライベートなGitHubリポジトリを作成します。.

  2. 次のコマンドを使用して、ローカルでリポジトリを初期化し、変更を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にアプリケーションを追加します

  1. https://dash.deno.com/にアクセスします。
  2. GitHub組織またはユーザーを選択し、次にリポジトリを選択します。
  3. 本番ブランチを選択し、Fresh (Automatic)モードを選択すると、リポジトリにプッシュするたびにDeno Deployがデプロイを実行します。
  4. Build Stepにdeno run -A npm:prisma generateを追加して、Prisma Clientを生成します。
  5. プロジェクトのエントリーポイントとしてindex.tsを選択します。
  6. Create & Deployをクリックします。

DATABASE_URL環境変数を追加する必要があるため、デプロイは失敗します。

プロジェクトの設定を見つけて、そこに移動します。

  1. データベース接続文字列を定義するには、Environment VariablesセクションのAdd Variableをクリックします。
    1. KEYにDATABASE_URLと入力します。
    2. VALUEにデータベース接続文字列を貼り付けます。
  2. 保存をクリックします。

再デプロイをトリガーするには、コードを追加して別のコミットを作成する必要があります。

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 Postgresデータベースに接続するPrisma Clientを使用して正常にデプロイできました。

© . All rights reserved.