🌊

[Part5] TypeScript, PostgreSQL, Next.js, Prisma & GraphQLでApp作成

2022/07/17に公開

GraphQL

この記事は、Next.js、GraphQL、TypeScript、Prisma、PostgreSQLを使用してフルスタックアプリを構築するコースの最終パートです。この記事では、アプリを Vercel にデプロイする方法について学びます。

はじめに

このコースでは、ユーザーがキュレーションされたリンクのリストを閲覧し、お気に入りのリンクをブックマークできるフルスタックアプリ「awesome-links」を構築する方法を学びます。

パート 4 では、AWS S3 を使用して画像のアップロードをサポートしました。このパートでは、サーバーレス環境でデータベース接続を処理するために Prisma Data Proxy をセットアップし、アプリを Vercel にデプロイします。

前提条件

このチュートリアルに沿って進むには、GitHub のアカウントと Vercel が必要です。また、ホストされているPostgreSQLデータベースが必要です。Prisma Data Platformは、プロジェクトのセットアップ時にHeroku上のデータベースを自動的にプロビジョニングすることができます。

https://github.com/prisma/awesome-links

リポジトリをフォークする

このコースの完全なソースコードはGitHubで見つけることができます。フォローするためには、リポジトリを自分のGitHubアカウントにフォークしてください。

前のパートから続いている場合は、コードをソース管理に追加し、GitHub にプッシュしていることを確認してください。

Prisma Data Proxyを使ったサーバーレス環境でのデータベースアクセス

サーバーレス機能は、刹那的で短命なもの、つまりステートレスです。アプリケーションへのトラフィックが急増すると、サーバーレス関数のインスタンス数も増加します。一方、データベース接続はステートフルであり、アプリケーションとデータベースの間にTCP接続が必要です。

サーバーレス機能がデータベースにアクセスする必要がある場合、データベースへの接続を確立し、クエリを送信し、データベースからレスポンスを受信します。そして応答データはサーバーレス機能を呼び出したクライアントに配信され、データベース接続が閉じられ、機能は再び破棄される。

トラフィックが急増すると、各サーバーレス機能は新しいデータベース接続を生成します。

PostgreSQL や MySQL などの従来のデータベースには、通常、データベース接続の上限があり、アプリケーションへのトラフィックが急増すると、簡単に使い果たすことができます。接続の上限を使い切ると、アプリケーションへのリクエストは失敗し始めるでしょう。

この問題を解決するには、pgBouncer for PostgreSQLやPrisma Data Proxyのようなデータベース接続プーラーを使用することです。

Prisma Data Proxyはデータベース用のプロキシサーバーで、コネクションプールを管理し、既存のデータベース接続が再利用されるようにします。これにより、ユーザーからのリクエストが失敗するのを防ぎ、アプリのパフォーマンスを向上させることができます。

https://youtu.be/GWbzyyziH9A

Prisma Data Proxyの使用開始

https://cloud.prisma.io/projects/create にアクセスし、GitHub を使用してログインします。プロジェクト名を付け、Import a Prisma repositoryオプションを選択し、フォークまたは作成した "awesome-links "リポジトリを選択します。詳細を入力したらNextを選択します。

Configure environment」ステップでは、新しいデータベースをプロビジョニングするか、自分のデータベースを使用するかのどちらかを選択します。HerokuではPostgreSQLデータベースを、PlanetScaleではMySQLデータベースをプロビジョニングすることができます。自分のデータベースを使用する場合は、データベースの接続文字列を指定します。

PostgreSQLデータベースをプロビジョニングすると、新しいHerokuアプリとPostgreSQLアドオンがHerokuアカウントに作成されます。Herokuアプリの一意な名前を提供してください。

Prisma Data Proxyの設定ステップでは、パフォーマンスを向上させるために、データベースに最も近い場所を選択します。完了したら、[プロジェクトの作成]を選択します。

プロジェクトの準備ができたら、"Deploy project" ページに2つの接続文字列といくつかの使用法の詳細が表示されます。

1つ目はPrisma Data ProxyのURLで、Vercelにアプリをデプロイする際に使用します。
2つ目はデータベースの接続文字列で、データベーススキーマを進化させる際にマイグレーションを実行するために使用します。
Prisma Data ProxyのURLは二度と表示されないのでコピーしておきますが、後でさらに作成することができます。

アプリケーションの更新

dataProxyプレビュー機能の有効化

アプリケーションを配備する前に、Prisma Data Proxyで動作させるために、アプリケーションをいくつか更新する必要があります。

まず、既存のDATABASE_URLの名前をMIGRATE_DATABASE_URLに変更して、.envファイルを更新してください。DATABASE_URL 変数を作成し、前のステップで設定した Prisma Data Proxy の URL をここに設定します。

# .env
MIGRATE_DATABASE_URL="postgres://"
DATABASE_URL="prisma://"

MIGRATE_DATABASE_URLは、データベースのスキーマを変更する際に使用されます。

次に、ジェネレータブロックにdataProxy Preview機能を入れて、Prismaのスキーマを更新します。

/// prisma/schema.prisma
generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["dataProxy"]
}

package.jsonに新しいスクリプトを作成する

次に、ビルドスクリプトを更新してpackage.jsonファイルを更新し、prisma:generateを追加してください。

"scripts": {
  //... existing scripts
  "vercel-build": "prisma:generate && next build",
  "prisma:generate": "PRISMA_CLIENT_ENGINE_TYPE=\"dataproxy\" prisma generate",
},

prisma:generate - Prisma Data Proxyを使用するPrismaクライアントを生成する
vercel-build - Prisma Clientを生成し、アプリケーションをビルドする。

本番ではタイプチェックをスキップする

プロジェクトのルートにnext.config.jsを作成し、以下のコードを追加することで、Vercelがアプリを構築する際にタイプチェックをスキップすることができます。

// next.config.js
module.exports = {
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if your project has type errors.
    ignoreBuildErrors: true,
  },
}

ApolloクライアントのAPI URIを更新する

次に、Apollo Clientの設定で、APIのURIを/api/graphqlに更新します。

// lib/apollo.ts
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { relayStylePagination } from '@apollo/client/utilities';

export const client = new ApolloClient({
  uri: '/api/graphql',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          links: relayStylePagination(),
        },
      },
    },
  }),
});

Vercel にアプリをデプロイする

Vercel のアカウントにログインし、[新規プロジェクト] をクリックして新しいプロジェクトを作成します。

次に、"awesome-links" リポジトリをインポートします。

最後に、環境変数を追加します。

環境変数については、リポジトリ内の.env.exampleファイルを参照してください。

環境変数を追加したら、[デプロイ]をクリックします。

アプリケーションが正常にデプロイされたら、その URL をコピーし、:

Auth0 Dashboard の Allowed Callback URLs と Allowed Logout URLs を、アプリケーションの URL で更新します。
Auth0アクションをデプロイされたアプリケーションのURLで更新します。
S3のAllowedOrigins Cross-origin Resource Sharing（CORS）ポリシーを、デプロイされたアプリケーションのURLで更新します。
AUTH0_CALLBACK_URL 環境変数を、デプロイしたアプリケーションの URL で更新します。
アプリケーションを本番環境に再デプロイする

すべてが正しく動作すれば、デプロイされたアプリケーションを見ることができます。

まとめ

この記事でこのシリーズは終わりです。優れた開発者体験を提供する最新のツールを使用してフルスタック・アプリケーションを構築する方法を学び、さまざまなサービスを活用してアプリケーションを本番環境に対応させる方法を学びました。

あなたは

Prisma を使用したデータベース・モデリング
Apollo Server と Nexus を使用して GraphQL API を構築しました。
Auth0を使用した認証の追加
AWS S3 を使用した画像アップロードを追加しました。
Prisma Data Proxyを使用してデータベースのコネクションプールを処理した
Next.jsアプリケーションをVercelにデプロイした

このアプリの完全なソースコードはGitHubで見ることができます。もしバグを見つけたり、改良を加えたい場合は、気軽に問題を提起したり、リポジトリに貢献したりできます。

GitHubで編集を提案