fullstackTypescriptでORMの型をフロント、バックで参照する

ORMで作成した型をfront,backでも利用できるように./dbディレクトリを作成して、monoremo構成にした時に直接importするときの忘備録

今回利用するレポジトリ

GitHub

GitHub - reagenzn/monorepo-example

Contribute to reagenzn/monorepo-example development by creating an account on GitHub.

.
├── db
│   ├── dist
│   ├── package.json
│   ├── src
│   └── tsconfig.json
├── front
│   ├── eslint.config.js
│   ├── index.html
│   ├── package.json
│   ├── public
│   ├── README.md
│   ├── src
│   ├── tsconfig.json
│   └── vite.config.ts
├── hono
│   ├── dist
│   ├── Dockerfile
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── src
│   └── tsconfig.json
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

利用するパッケージマネージャーはpnpmでpnpm workspaceを使って複数のパッケージを含んだmonorepo構成にしています。

Step1 dbディレクトリでdistで型をexportする

db/package.json

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },
    "./models/*": {
      "types": "./dist/models/*.d.ts",
      "default": "./dist/models/*.js"
    }
  },
  "type": "module",
}

db/tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "bundler",
	"declaration": true,
    "declarationMap": true,
	}
}

Step2 importするパッケージで,pathsの指定をする

hono/tsconfig.json

{
    "paths": {
      "@/*": ["src/*"],
      "@repo/db/*": ["../db/dist/*"]
    }
}

hono/package.json

{
  "dependencies": {
    "@repo/db": "workspace:*",
  }
}

Step3 importして利用できるか確認

hono/src/index.ts

import { db } from "@repo/db";

Step4 Dockerfileでのビルド

FROM node:22.18-alpine
 
# pnpmをグローバルインストール
RUN npm install -g pnpm@10.14.0
 
WORKDIR /workspace
 
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 
COPY hono ./hono
COPY db ./db
 
# pnpmを使って依存関係をインストール
RUN pnpm install
 
RUN pnpm run db:build
RUN pnpm run hono:build
 
 
COPY ./hono/dist/index.js ./index.js
 
CMD ["node", "index.js"]