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

PostgreSQL

 

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

DBも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をセットアップ

 

Page Not Found – Vercel

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

 

Postgres のCreateをクリックします

 

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

 

 

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

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

 

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

 

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

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

 

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

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

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

 

・Prisma

 

・.env.local

 

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

 

schema.prismaを修正

 

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

 

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

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

 

 

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

 

コード修正

ビルドエラーの回避

 

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

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

404 NOT FOUND | Hisuiblog
手を動かして深く理解できるハンズオン形式の技術ブログ

 

・.env

 

・src/lib/config.ts

 

・src/components/addUser.tsx

 

・src/components/userList.tsx

 

CORS対策

 

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

詳細は↓をご覧ください

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

 

 

ビルドコマンドを修正

 

そのままのビルドコマンドだと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 コマンドを追加しました

 

buildよりもvercel-buildの方がVercelにビルドしたときに優先されるみたい。
ドキュメントは発見できませんでした。。。

 

Vercelへアプリケーションをデプロイ

 

【Vercel】Next.jsアプリをデプロイしてみる
Next.jsで作ったアプリをVercelへデプロイしてみます。 今回はVercelのコンソールを使用して構築していきます Terraformでの設定方法はこちら Vercelとは?? ...

こちらの記事を参考にVercelにアプリケーションをデプロイします

 

今回は、Environment VariablesにDBの接続情報を設定してください

POSTGRES_PRISMA_URL と POSTGRES_URL_NON_POOLING に先ほどメモした値を設定します

また、NEXT_PUBLIC_API_PREFIXhttps:// を設定します

 

 

動作確認

 

デプロイが完了したら、動作確認をします

 

 

アプリにアクセスして、ユーザー登録、一覧表示ができていればOKです

 

参考記事

 

How to Build a Fullstack App with Next.js, Prisma, & PostgreSQL
Learn how to create and deploy a fullstack application with Next.js, Prisma, PostgreSQL, and Vercel.
Deploy to Vercel | Prisma Documentation
Learn how to deploy a Next.js application based on Prisma Client to Vercel.
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.

 

コメント

タイトルとURLをコピーしました