GitHub Action で Lintのspeedチェック（yarn / bun / pnpm）：New Relicとの連携

GitHub Actions で Lintやテスト実行がアプリケーションが大きくなるにつれて遅くなっていく。
開発生産性をあげていく取り組みで、yarn / bun / pnpm のlintの実行時間を検証してみた。

検証リポジトリ

https://github.com/redamoon/yarn-bun-pnpm-lint

検証用に同じコードでLintを回してみた。

New Relic で GitHub Actionsのテレメトリデータを可視化してみた。
New Relic の License KeyをGitHub 側にいれて yml追加するだけで行けた。

https://github.com/redamoon/yarn-bun-pnpm-lint/blob/main/.github/workflows/new-relic-exporter.yml

https://qiita.com/nr-ttanaka/items/acde1acd0c79497d2f4e

New Relic テストカバレッジを可視化もできるようだ。（MEMO）
https://qiita.com/arie0703/items/cc7c4c7f875b074e5b0e

pnpm のワークスペースを使って、nestjs（バックエンド）と next.js（フロントエンド）を統合して管理し、pnpm で一括起動できるようにする方法を説明します。

1. ワークスペースのセットアップ

1.1 pnpm workspace を作成

プロジェクトのルートディレクトリで以下を実行して、pnpm を初期化します。

pnpm init

次に、pnpm-workspace.yaml を作成します。

packages:
  - "service"
  - "app"

これで、service/ と app/ が pnpm のワークスペースとして認識されます。

2. NestJS（バックエンド）のセットアップ

2.1 NestJS のプロジェクトを作成

NestJS のディレクトリ (service/) を作成し、プロジェクトを初期化します。

mkdir service && cd service
pnpm create nest-app .

または、nest CLI がある場合は:

nest new .

2.2 必要な依存関係をインストール

service/ ディレクトリ内で以下を実行:

pnpm install

3. Next.js（フロントエンド）のセットアップ

3.1 Next.js のプロジェクトを作成

app/ ディレクトリを作成し、Next.js プロジェクトを作成。

mkdir app && cd app
pnpm create next-app . --ts

3.2 依存関係をインストール

app/ ディレクトリ内で以下を実行:

pnpm install

4. pnpm scripts による一括起動

ワークスペースの package.json に以下を追加します。

4.1 ルート package.json の設定

{
  "name": "monorepo",
  "private": true,
  "scripts": {
    "dev": "pnpm --parallel run dev",
    "dev:service": "pnpm --filter service run start:dev",
    "dev:app": "pnpm --filter app run dev"
  }
}

4.2 service/package.json

{
  "scripts": {
    "dev": "nest start --watch"
  }
}

4.3 app/package.json

{
  "scripts": {
    "dev": "next dev"
  }
}

5. 開発環境の起動

ルートディレクトリで以下を実行すれば、バックエンド (NestJS) とフロントエンド (Next.js) が並列に起動します。

pnpm dev

6. 環境変数の設定

環境変数を統一する場合は、.env ファイルを作成し、service/ と app/ で共通の変数を利用できます。

例: ルートディレクトリに .env を作成

NEXT_PUBLIC_API_URL=http://localhost:3001

pnpm ワークスペースを利用して NestJS (バックエンド) と Next.js (フロントエンド) を管理し、一括起動できるようになります！ 🚀

https://qiita.com/arie0703/items/cc7c4c7f875b074e5b0e

テストのカバレッジもNew Relicを使って可視化できる。

この環境に Prisma を導入し、PostgreSQL を Docker で立ち上げる手順を説明します。

1. PostgreSQL を Docker でセットアップ

プロジェクトのルート (workspace) に docker-compose.yml を作成し、PostgreSQL コンテナを設定します。

1.1 docker-compose.yml の作成

services:
  postgres:
    image: postgres:16
    container_name: postgres_db
    restart: always
    ports:
      - "5432:5432"
    environment:
      POSTGRES_USER: admin
      POSTGRES_PASSWORD: password
      POSTGRES_DB: mydatabase
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

2. Prisma のセットアップ

2.1 Prisma のインストール

NestJS のバックエンド (service/) に Prisma を導入します。

cd service
pnpm add prisma @prisma/client

Prisma CLI も追加:

pnpm add -D @prisma/cli

2.2 Prisma の初期化

pnpm prisma init

これで service/prisma/schema.prisma が生成されます。

2.3 .env の設定

service/.env に PostgreSQL の接続情報を追加します。

DATABASE_URL="postgresql://admin:password@localhost:5432/mydatabase"

2.4 schema.prisma の修正

service/prisma/schema.prisma を編集し、データベースを PostgreSQL に設定。

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

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

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

2.5. Docker で PostgreSQL を起動

docker-compose で PostgreSQL を立ち上げます。

docker compose up -d

3 マイグレーションを実行

以下のコマンドでデータベースにテーブルを作成。

pnpm prisma migrate dev --name init

成功すると、Prisma が PostgreSQL にテーブルを作成します。

4. Prisma の動作確認

NestJS の main.ts に PrismaService を追加して、Prisma が動作するか確認。

4.1 prisma.service.ts を作成

service/src/prisma/prisma.service.ts を作成。

import { Injectable, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
import { PrismaClient } from '@prisma/client';

@Injectable()
export class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
  async onModuleInit() {
    await this.$connect();
  }

  async onModuleDestroy() {
    await this.$disconnect();
  }
}

4.2 app.module.ts に追加

service/src/app.module.ts に PrismaService を追加。

import { Module } from '@nestjs/common';
import { PrismaService } from './prisma/prisma.service';

@Module({
  providers: [PrismaService],
  exports: [PrismaService],
})
export class AppModule {}

5. Next.js から API を叩く

Next.js (app/) から NestJS (service/) にリクエストを送るための API を作成。

5.1 service/src/user/user.controller.ts を作成

import { Controller, Get } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';

@Controller('users')
export class UserController {
  constructor(private readonly prisma: PrismaService) {}

  @Get()
  async getUsers() {
    return this.prisma.user.findMany();
  }
}

5.2 app/pages/api/users.ts を作成

Next.js から service にリクエストを送るエンドポイント。

export default async function handler(req, res) {
  const response = await fetch('http://localhost:3001/users');
  const data = await response.json();
  res.status(200).json(data);
}

6. pnpm dev で動作確認

すべての環境を起動。

pnpm dev

1. docker-compose up -d で PostgreSQL が起動
2. pnpm dev で service と app が並列起動
3. http://localhost:3000/api/users にアクセスすると、NestJS から PostgreSQL のデータが取得される

まとめ

✅ Docker で PostgreSQL を起動
✅ Prisma で NestJS の ORM を設定
✅ Next.js から NestJS に API リクエストを送信

この構成で、フロント (Next.js)、バックエンド (NestJS)、DB (PostgreSQL) を pnpm ワークスペースで統合できます 🚀