【Next.js】PrismaをつかったアプリをVercelにデプロイしてみる

Prismaを使ったNext.jsアプリケーションをVercelにデプロイしてみます。

DBもVercelのものを使用してデプロイに挑戦します！！

デプロイするアプリケーション
想定読者
VercelでPostgreDBをセットアップ
schema.prismaを修正
コード修正
1. ビルドエラーの回避
2. CORS対策
ビルドコマンドを修正
Vercelへアプリケーションをデプロイ
動作確認
参考記事

デプロイするアプリケーション

↓の記事で作成したものをデプロイします。

GitHubリポジトリはこちら

GitHub - hisuihisui/sample-prisma-next-app: sample-prisma-next-app

sample-prisma-next-app. Contribute to hisuihisui/sample-prisma-next-app development by creating an account on GitHub.

想定読者

デプロイするアプリケーションのGitHubリポジトリがある。
Vercelのアカウントを持っている

VercelでPostgreDBをセットアップ

Storage – Dashboard – Vercel

こちらにアクセスして、DBを作成します

Postgres のCreateをクリックします

ダイアログがでて来るので、Postgresが選択されていることを確認してContinueをクリック

（2023/09現在）PostgreはBetaなので、↓が表示されます

Beta版でも大丈夫だよと思ったら、Acceptを押し進みます

DBの名前とリージョンを指定して、Createをクリックします

作成されるとDBの詳細画面に遷移します

ここでDBへの接続情報を確認できます

あとで使うので、接続情報をメモしておきます

必要なのは、Prisma と .env.local の2つの情報になります

機密情報は*(アスタリスク)で隠れていますが、Show Secret で見ることができます

・Prisma

datasource db {
  provider = "postgresql"
  url = env("POSTGRES_PRISMA_URL") // uses connection pooling
  directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
}

datasource db {

provider = "postgresql"

url = env("POSTGRES_PRISMA_URL") // uses connection pooling

directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection

}

・.env.local

POSTGRES_URL="************"
POSTGRES_PRISMA_URL="************"       // これが必要
POSTGRES_URL_NON_POOLING="************"  // これが必要
POSTGRES_USER="************"
POSTGRES_HOST="************"
POSTGRES_PASSWORD="************"
POSTGRES_DATABASE="************"

POSTGRES_URL="************"

POSTGRES_PRISMA_URL="************" // これが必要

POSTGRES_URL_NON_POOLING="************" // これが必要

POSTGRES_USER="************"

POSTGRES_HOST="************"

POSTGRES_PASSWORD="************"

POSTGRES_DATABASE="************"

これでVercelにDBを作成できました

schema.prismaを修正

先ほど確認したPrismaの情報をschema.prismaに反映させます(datasource dbを編集)

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url = env("POSTGRES_PRISMA_URL")
  directUrl = env("POSTGRES_URL_NON_POOLING")
}

...

generator client {

provider = "prisma-client-js"

}

datasource db {

provider = "postgresql"

url = env("POSTGRES_PRISMA_URL")

directUrl = env("POSTGRES_URL_NON_POOLING")

}

...

schema.prismaを変更したのでPrisma Clientを更新しないとローカル環境でアプリケーションが正しく動作しない可能性があります

こちらを実行してPrisma Clientを更新してください

npx prisma generate

1	npx prisma generate

schema.prismaの編集によって読み込む環境変数名を変更した場合は
envファイルの中身も変数名を変更してください！

コード修正

ビルドエラーの回避

そのままだとビルド時にAPIをたたくとエラーになるので、いくつかコードを修正します

詳しくは↓をご覧ください

404 NOT FOUND | Hisuiblog

・.env

NEXT_PUBLIC_API_PREFIX="http://"
NEXT_PUBLIC_VERCEL_URL="localhost:3000"

1 2	NEXT_PUBLIC_API_PREFIX="http://" NEXT_PUBLIC_VERCEL_URL="localhost:3000"

・src/lib/config.ts

export const config = {
  apiPrefix: process.env.NEXT_PUBLIC_API_PREFIX ?? "http://",
  apiHost: process.env.NEXT_PUBLIC_VERCEL_URL ?? "localhost:3000",
};

export const config = {

apiPrefix: process.env.NEXT_PUBLIC_API_PREFIX ?? "http://",

apiHost: process.env.NEXT_PUBLIC_VERCEL_URL ?? "localhost:3000",

};

・src/components/addUser.tsx

...

export default function AddUser() {

  ...

  const fetchAsyncAddUser = async () => {
    
    ...

    // APIのURL
    const url = config.apiPrefix + config.apiHost + "/api/user";

    ...

  };

...

};

...

export default function AddUser() {

...

const fetchAsyncAddUser = async () => {

...

// APIのURL

const url = config.apiPrefix + config.apiHost + "/api/user";

...

};

...

};

・src/components/userList.tsx

import { config } from "@/lib/config";

export default async function UserList() {
  // APIのURL
  const url = config.apiPrefix + config.apiHost + "/api/user";
  // APIへリクエスト
  const res = await fetch(url, {
    cache: "no-store",
  });

  try {
    // レスポンスボディを取り出す
    const data = await res.json();

    return (
      <div>
        <h2>All Users</h2>
        {data.map((user: any, index: any) => (
          <div key={index}>
            <span>Name: {user.name}</span>
            <span>Email: {user.email}</span>
            <span>
              Posts: {user.posts.map((value: any) => `${value.title},`)}
            </span>
            <span>Profile: {user.profile?.bio}</span>
          </div>
        ))}
      </div>
    );
  } catch {
    return <div></div>;
  }
}

import { config } from "@/lib/config";

export default async function UserList() {

// APIのURL

const url = config.apiPrefix + config.apiHost + "/api/user";

// APIへリクエスト

const res = await fetch(url, {

cache: "no-store",

});

try {

// レスポンスボディを取り出す

const data = await res.json();

return (

<div>

<h2>All Users</h2>

{data.map((user: any, index: any) => (

<span>Email: {user.email}</span>

<span>

Posts: {user.posts.map((value: any) => `${value.title},`)}

</span>

<span>Profile: {user.profile?.bio}</span>

</div>

))}

</div>

);

} catch {

return <div></div>;

}

CORS対策

CORSエラー対策のためにnext.config.js に追記をします

詳細は↓をご覧ください

【Vercel】【Next.js】CORSエラーが出ないようにする

VercelへNext.js（v13.4.19、App Router）のアプリケーションをデプロイしました。動作確認をしていくと、Route Handlers周りでCORSエラーが出たので解決していきたいますエラ...

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 全ての API routes にマッチ
  async headers() {
    return [
      {
        // 対象APIのパスパターン
        // 今回は src/app/api/ 配下にAPIを作っているので下記のようにする
        source: "/api/:path*",
        headers: [
          {
            // CORSを許可するオリジン
            key: "Access-Control-Allow-Origin",
            // すべてのオリジンを許可するなら * (アスタリスク)
            // ただセキュリティ的にはよろしくないので注意
            value: "https://<vercelのプロジェクト名>.vercel.app",
          },
          {
            // 許可するメソッド
            key: "Access-Control-Allow-Methods",
            value: "GET,OPTIONS,POST",
          },
          {
            // 許可するリクエストヘッダ
            key: "Access-Control-Allow-Headers",
            value: "Content-Type",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

/** @type {import('next').NextConfig} */

const nextConfig = {

// 全ての API routes にマッチ

async headers() {

return [

{

// 対象APIのパスパターン

// 今回は src/app/api/ 配下にAPIを作っているので下記のようにする

source: "/api/:path*",

headers: [

{

// CORSを許可するオリジン

key: "Access-Control-Allow-Origin",

// すべてのオリジンを許可するなら * (アスタリスク)

// ただセキュリティ的にはよろしくないので注意

value: "https://<vercelのプロジェクト名>.vercel.app",

{

// 許可するメソッド

key: "Access-Control-Allow-Methods",

value: "GET,OPTIONS,POST",

{

// 許可するリクエストヘッダ

key: "Access-Control-Allow-Headers",

value: "Content-Type",

];

};

module.exports = nextConfig;

ビルドコマンドを修正

そのままのビルドコマンドだとPrisma系の内容がDBに反映されないので、修正します

↓のリポジトリを参考にpackage.jsonを書き換えます

GitHub - prisma/deployment-example-vercel: Prisma deployment to Vercel example

Prisma deployment to Vercel example. Contribute to prisma/deployment-example-vercel development by creating an account on GitHub.

下記のようにvercel-build コマンドを追加しました

{
  "name": "sample-prisma-next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "vercel-build": "prisma generate && prisma migrate deploy && next build",
    "lint": "next lint"
  },
  
  ...

}