ホームページ - EY-Office

2024-06-04

next.jsといえばVercel、VercelにReact Server Componentsをデプロイしてみた

先週のReact Server Componentを本番環境で動かしてみたら、少しハマったはサーバー（インターネットに接続されたコンピューター）にNode.js等をインストールしRSC(React Server Component)が動作する環境を構築しましたが、今時はReactが簡単に動くサービスを使う事も多いと思います。

今回はそのようなサービスの代表 Vercelの上でRSCを動かしてみました。

RSC on Vercel Bing Image Creatorが生成した画像を使っています

Vercelとは

英語版WikipediaのVercelに簡単な紹介がありますが、Vercel Inc.(旧ZEIT)社が運営するWebアプリケーションを実行するサービス（PaaS: Platform as a Service）です。
以前からHerokuというPaaSが有名でしたが、これはRuby on RailsやJavaなどのバックエンド向けのサービスでしたが、Vercelは主にフロントエンド（React, Vue, Next.js, Nuxt, …）を実行するサービスです。

ここに価格表があります。基本的には有償のサービスですが、開発や趣味ならHobbyプランが無料で使えます。
また、Vercel Inc.はデータセンター等は持ってなくインフラにはAWSやCloudflareを使っているそうです。

またVercelはNext.js開発プロジェクトのスポンサーとして有名です。Next.jsはオープンソースの開発プロジェクトですが、Vercelが開発の維持および主導を行っています。

VercelにNext.jsアプリをデプロイする

VercelにNext.jsやReactなどのSPAをデプロイするには簡単です（GitHub等のアカウントがあるのが前提ですが）

Vercelにアカウントを作成する（GitHubで認証します）
プロジェクトページのOverviewタブにあるAdd NewボタンのProjectを押す
自分のGitHubリポジトリーからデプロイ可能なリポジトリーが表示されるので、デプロイするリポジトリーのImportボタンを押す
（必要があれば環境変数の設定等を行う）
Deployボタンを押す

問題が無ければ、https://アプリ名.vercel.app/ でアプリが動作しています。いつものジャンケンアプリ（SPA版）は簡単に動きました。

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

さて、先週と同じRSC版ジャンケンアプリをVercelで動かす事にしました。

Vercel上のデータベース

VercelはVercel Storageにあるように、いくつかのストレージをサポートしていますが、RDBとしてはVercel Postgresをサポートしています。

プロジェクトページのStorageタブでPostgresのデータベースを作成できます、ただしHobbyプランでは作成できるのは1つのみです。また現在、Postgresサーバーは日本には無くシンガポールかポートランド等を選ぶ必要があります。

Storageの管理ページからは、以下が行えます。

RDB接続用情報（アカウント、パスワード、ホスト名・・・）の表示
テーブル単位でのデータ表示
SQL文の実行

また、このPostgresはネット上からアクセスできるので開発環境等でも使えます。

やはりPrismaがネックかな？

先週判ったように開発環境（私の場合はMac）でも本番と同じRDBを使った方が良いので、色々なネット記事を読みながらDockerでPostgreSQLサーバーを動かし動作確認しました。

結果、Prismaの設定は以下のようになりました。

schema.prisma
- Vercelで動かすにはdirectUrlの設定が必要です
- 先週判ったようにshadowDatabaseUrlも設定します

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

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

model Scores {
  id        Int      @id @default(autoincrement())
  human     Int
  computer  Int
  judgment  Int
}

開発環境の.env
- どこかの記事でshadowDatabaseUrlも同じデータベースを設定したので試したところ動きました、しかしこれで良いのかは疑問です。

POSTGRES_PRISMA_URL="postgres://react:react@localhost:5432/react"
POSTGRES_URL_NON_POOLING="postgres://react:react@localhost:5432/react"
POSTGRES_SHADOW_PRISMA_URL="postgres://react:react@localhost:5432/react"

Vercel上環境変数
- パスワード、ホスト名はマスクしています
- 設定値はStorageの管理ページで参照できます
- 環境変数の設定はProject作成画面で設定できます
  - またProjectのSettings画面からも設定・変更できます

POSTGRES_PRISMA_URL="postgres://default:XXXXXXXX@YYYYYY.us-west-2.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NON_POOLING="postgres://default:XXXXXXXX@YYYYYY.us-west-2.aws.neon.tech:5432/verceldb?sslmode=require"
POSTGRES_SHADOW_PRISMA_URL="postgres://default:XXXXXXXX@YYYYYY.us-west-2.aws.neon.tech:5432/verceldb?sslmode=require"

package.json
- buildのscriptsを変更しPrismaの設定用コマンドを追加しました

{
  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && prisma db push && next build", // ← 変更
    "start": "next start",
    "lint": "next lint"
  },
}

遅いぞ！？

buildは問題なく進み、ジャンケンアプリの画面が表示されました。しかしジャンケンのボタンを押しても反応がありませんでした。😅
そこでログでも見ようかと思っていたら、ジャンケンの結果が表示されてました！
またジャンケンのボタンを押してみましたが反応しません・・・と思ったのですが少しすると結果が表示されました。

SPA版のジャンケンアプリは直ぐに反応していたので、RDBまたはServer Componentが遅いようです、そこでVercelのページを調べるとVercel Postgres Limitsに

Databases for those on Hobby plans are configured with 0.25 logical CPUs (Hobbyプランのデータベースは0.25論理CPUで構成されています)
If your database is not accessed within a 5 minute period, your database will be suspended. The next time it is accessed, you will experience a “cold start” of up to 1 second. （5分以内にデータベースにアクセスしないと、データベースは一時停止されます。次回アクセスすると、最大1秒の「コールドスタート」が発生します。）

最初に反応が遅かったのは、コールドスタートだったのかもしれません、その後も待たされるのもHobbyプランのRDBのCPUが弱いからのようです。