ExpressとPrismaでサクッと作るAPI：Part1（環境構築）

環境

API

Node v18.17.1
Express v4.18.2
TypeScript v5.2.2

DB

Prisma v5.2.0
mysql v8.0

ローカル環境

Docker

環境構築

コンテナ起動

ソースコードをclone

git clone https://github.com/masayan1126/express-api.git

以下を実行するとAPI、DB、phpMyAdminコンテナが起動する（portなどはdocker-compose.ymlに指定しているので、適宜開いている番号を指定）

cd docker && docker compose up -d

開発用サーバー起動

APIコンテナに入る。コンテナIDはDocker Desktop上またはdocker psコマンドを打つと確認できる

docker container exec -it <コンテナID> /bin/bash

APIのエントリーポイントを作成

:/usr/api# touch main.ts

依存関係をインストール

:/usr/api#　npm install

main.tsを編集。expressのインスタンスを作成し、使用するポート番号を指定。ポートはDockerfileのENVで宣言しているポートが適用される

import express from "express";

const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

開発サーバーを起動

:/usr/api#　npm run dev

API周りで使用しているライブラリ

すでにexpressなどの必要なライブラリはpackage.jsonに記述済み。初めてだと馴染みがないものがあるので2点ほどピックアップしている

ts-node-dev
- リアルタイムでのソースコード書き換え(ホットリロード)にも対応
- tsファイルをjsファイルにコンパイルすることなく、起動することができ、さらに監視モードで素早く再起動が使用できる
npn-run-all
- 複数のnpm-scriptsを実行する

簡易API作成

エンドポイント作成

ルートにhttpGETリクエストを送ると、Hello Worldを返すAPIをapp.tsに追記

import express, { Request, Response } from "express";

const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());

// ここを追加
app.get("/", (req: Request, res: Response) => {
  return res.status(200).json({
    message: "Hello World!!!",
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

ブラウザで動作確認

http://localhost:18000/にアクセスし、{"message":"Hello World!!!"}を表示されていればOK

CORS設定

ブラウザからは確認できるが、別オリジンからのhttpリクエストはブロックされる。そのためcorsというライブラリをすでに依存関係に追加している。expressのインスタンスを生成する際にこれを設定として加えることで、別オリジンからのリクエストを許可することが可能になる（今回、フロントエンドのアプリケーションは別オリジンで起動するため）

import express, { Request, Response } from "express";
import cors from "cors";

const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());

// 追加（これは、後ほど起動するフロントエンドアプリケーションの起動ポート）
const allowedOrigins = ["http://localhost:3000"];

// 追加
const options: cors.CorsOptions = {
  origin: allowedOrigins,
};

// 追加
app.use(cors(options));

app.get("/", (req: Request, res: Response) => {
  return res.status(200).json({
    message: "Hello World!!!",
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

ここまででDBを扱わない簡易APIの構築が完了

DB、ORMセットアップ

フロー

①初期化でスキーマなど作成→②model作成→③スキーマにmodel追加→④初期マイグレーション（migrationファイル生成、DBにテーブル追加）→⑤スキーマからPrisma Client生成→以降は繰り返し

セットアップ作業

初期化（スキーマ、.envファイル生成）

:/usr/api#　npx prisma init

.envの接続urlを変更（.envは必ず.gitignoreに追加しておいてくこと）

# "mysql://<ユーザー>:<パスワード>@<ホスト名>:<ポート>/<DB>"
DATABASE_URL="mysql://user:password@db:3306/your_db"

api/prisma/schema.prismaにUsreモデルを作成。idはuuidとし、emailはユニーク制約を設定しておく。また、今回はmysqlを使用するので、datasourceをmysqlに変更しておく

generator client {
    provider      = "prisma-client-js"
    binaryTargets = ["native", "linux-arm64-openssl-3.0.x"]
}

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

// ここを追加
model User {
    id    String @id @default(uuid())
    email String @unique
    name  String
}

Prismaでスキーマをもとにテーブル作成(初期マイグレーション)。また、スキーマから、Prisma Clientコードを自動作成

:/usr/api#　npx prisma migrate dev --name init

Applying migration `20230903101043_init`

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20230903101043_init/
    └─ migration.sql

Your database is now in sync with your schema.

✔ Generated Prisma Client (v5.2.0) to ./node_modules/@prisma/client in 288ms

これでDBとPrismaのセットアップを完了した

DB周りで使用しているライブラリメモ

prisma-merge@0.2.0
- 複数のスキーマをマージして、schema.prismaを生成する

パート1はここまで。パート2ではPrismaクライアントを使用してAPIのプログラムからDBと対話し、APIのCRUD実装する

まとめ

いかがでしたでしょうか。本記事では、ExpressとPrismaでAPIをサクッと作るシリーズのPart1です。Part1では主にDockerを用いた環境構築を行っています。また、Expressを用いた簡単なAPIと作成やORMのPrismaでDBと対話するためのスキーマ作成等のセットアップを行いました

Masayan tech blog.