Next.jsから力技でPrisma Studioを開けるようにする

この記事は何

Prisma Studioをご存知でしょうか？
Prisma StudioとはNodeのORMであるPrismaのデータをUI上で確認できるようにするツールです。

Prisma Studioを本番環境でも使いたい場合、本来であればアプリケーションサーバーとは分けた環境で用意するのがストレートなアプローチですが、プロダクトの規模やフェーズによってはそれができない場合もあると思います。

この記事ではNext.jsのリバースプロキシの機能を使って、力技でNext.jsと同じアプリケーションサーバー上でPrisma Studioを起動、アクセスできるようにする方法をご紹介します。

この記事で紹介する方法は書いた通り正攻法ではありません。
実際に利用する場合は自己責任でお願いします。

Next.jsのリバースプロキシとは

Next.jsにはrewritesという機能があります。

この機能を使うことで、内部ネットワークの別ポートのアプリケーションなどへプロキシすることが可能です。
詳しくは↓の記事をご覧ください。

方針

方針としては以下のようなシンプルな流れで実装します

• 一つのサーバーでNext.jsとPrisma Studioを立ち上げる
• Next.jsからPrisma Studioにリバースプロキシでリクエストを流す
• Next.jsでPrisma Studioにアクセスする際はBasic認証を行うようにする
  • https://qiita.com/axoloto210/items/747eb784e61b173d30b8

実装結果

実装は以下の通りです。
Basic認証に関しては↑の記事の通りなので割愛します。
コードは以下のような前提で実装しています。

• Prisma Studioには/prisma/adminでアクセスできるようにする
• package.json内のコマンドの実装にはnpm-run-allを使用
• Docker内でアプリケーションを立ち上げているため、ネットワークを0.0.0.0に指定

package.json

{
  ...
  "scripts": {
    "start": "run-p start:*",
    "start:next": "next start",
    "start:studio": "prisma studio"
  }
  ...
}

next.config.js

{
  ...
  async rewrites() {
    return [
      {
        source: "/prisma/admin/:path*",
        destination: `http://0.0.0.0:5555/:path*`,
      },
      {
        source: "/prisma/http/:path*",
        destination: `http://0.0.0.0:5555/http/:path*`,
      },
      {
        source: "/prisma/assets/:path*",
        destination: `http://0.0.0.0:5555/assets/:path*`,
      },
      {
        source: "/prisma/index.css",
        destination: `http://0.0.0.0:5555/index.css`,
      },
      {
        source: "/api",
        destination: `http://0.0.0.0:5555/api`,
      },
    ];
  },
  ...
}

はまりポイント

今回力づくでNext.jsからアクセスしているため、ページへのアクセスだけではなく、APIやその他のリソースへのアクセスも全て設定をしてあげる必要があります。
特にこの設定を行うと/apiというパスがPrisma Studioに占有されてしまうのが少し痛いです。
Prisma Studioのバージョンアップ等により設定する必要のあるパスも変わっていく可能性があるので、動作検証しながら必要な設定を行っていくことを薦めします。