本記事の概要

この記事では、MySQLをクラウドで立ち上げ、速攻で利用を開始できるIPaaSサービス、PlanetScaleについて Next.jsで利用する具体例を交えながら、利用準備が整うまでを順を追って解説します。

ぜひ最後までご覧ください。

先日本ブログにてご紹介したSupabaseはPostgreSQLで裏側のDBが構築されるサービスで コンセプトは似ています。よろしければこちらもご覧ください。

参考記事: Next.js製ブログにアクセスカウンターを追加する作業でSupabase使ってみた。

注意点

PlanetScaleはforeign key制約(外部キー制約)をサポートしていない ので、既存DBからの移行ができない可能性がありますので 検討にあたりこの点を確認されることをお勧めします。

また、多額の資金調達をしているものの、未だ正式リリース版となっていないことにも商用利用にあたり、注意が必要かと思われます。

参考記事:PlanetScaleとは何か、なぜ外部キー制約をサポートしていないのか 参考記事:PlanetScale is now generally available

※ 2023/10/21追記

作業

まず、PlanetScale のトップページにアクセス。

右上の、「Sign in」 を選択します。

ps9.png

メールアドレスでの登録もできますが、私は手軽さを重視して 「Github」 でのログインを選択。

ps1.png?n=0

サービスを初めて使うので、引き継ぐべきDBもないですから 「Start With Empty Database」 を選択。

ps2.png

GithubみたいなUIですが、必要な情報を入力していきます。

ps3.png

今回はお試しということでプランから「Hobby」を選択。おそらくユーザーの身元確認と与信も兼ねて、クレジットカード情報の入力は避けられないようです。

ps4.png

このあたりは、Jiraなどの、Atlassian社の運営するサービスと使い勝手が似てますね。いつのまにか無料枠を超えて、課金が生じる可能性もある ので既にトラフィックがあるサービスでご利用の方はお気をつけいただければと思います。

下にスクロールで進んで 「Create database」 を選択。

次の画面で 「どの言語経由で接続するか？」 という選択肢が大量に出てきます。私は、Next.js に加え、データベースのスキーマ管理にPrismaを使うので、これを選択。

ps5.png

すると、接続完了するまでのチュートリアルがそのまま表示されます！これは楽ちんですね笑

ps7.png

上記のように、画面の中程に表示されている中程に表示されている.envの中身を丸ごと、Next.jsプロジェクトのルートディレクトリ直下に.envをファイル作成した上でペーストします。

これで、接続設定は完了です。（かんたん！）Vercelで本番運用するときなどは.envをgitにコミットせず、環境変数を使って移しましょう。

参考記事: Vercelで環境変数を設定する

Next.jsアプリケーションでの接続設定

私の方では、Next.jsプロジェクトのエントリーポイントとなるpage/index.tsxは以下のようになりました。

page/index.tsx
import { GetServerSideProps } from 'next';
import Image from 'next/image'
const { PrismaClient } = require('@prisma/client')

const Page = ({ user }: { user: any }) => {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      ユーザー情報がここにJSON形式で表示されます: {user}
    </main>
  )
}

export default Page

type Props = {
  user: any // Typescriptの型判定を行うときは別途typeのライブラリが必要だが今回は省略
}

export const getServerSideProps: GetServerSideProps<Props> = async (context) => {

  const prisma = new PrismaClient()

  async function getUser() {
    try {
      const user = await prisma.user.findMany();
      return user;
    } catch (e) {
      console.error(e);
      await prisma.$disconnect();
      throw e;
    }
  }

  try {
    const user = await getUser();
    return {
      props: {
        user: JSON.stringify(user)
      },
    };
  } catch (e) {
    console.error(e);
    return {
      props: {
        user: JSON.stringify([]), // DBに接続しないときは空配列を返します
      },
    };
  }
}

あらかじめ、schema/prisma.schema.tsを作成。

に以下のテスト用Userテーブルの定義を投げ込んでおき、プロジェクトルートでpushしてテーブルを作成しておきます。

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

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

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

コマンドコンソール から以下のコマンドを実行。.envにより、接続設定が正しく行えていれば データベースにUserテーブルが作成されるはずです。

prisma db push

ダッシュボード => プロジェクトを選択すると、ページ下部にログが出ており、テーブル作成のSQL文もログに出ているはず。

ローカルからMySQL DBへの接続は、Tableplusをあらかじめ設定しておきましょう。

先ほど設定した.envを

DATABASE_URL='mysql://[User]:[Password]@aws.connect.psdb.cloud/[Database]?sslaccept=strict'

このように設定して接続します。

ps6.png

あらかじめUserテーブルにテストデータを書き込んでおきます。

ps8.png

yarn run devでNext.jsのローカルサーバを立ち上げ、http://localhost:3000/にアクセス。

ちゃんと表示されました！

ps10.png

まとめ

個人的にはPHP関連の開発をたくさんしていた&Wordpressなどでは大量にMySQL製のDBがある ということで、PostgresよりはMySQLの方が親しんでいて、触れやすいDBでした。

日本にはMySQLを使っているサービスがたくさんある

2021年のポストなのでちょっと古いですが、日本ではMySQLのシェアがとても多いです。

参考記事: インフォグラフィック：2021年開発者エコシステムの現状

それゆえ、 レガシー（過去の遺産）のデータベースをそのまま使用できるPlanetScaleはこれからいろいろ使い道がありそうだな と 思った次第でした。今度はダンプデータインポートの方法でも試してみたいと思います。

この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！