NestJSプロジェクト構築備忘録

はじめに

プロジェクト作成時に諸々調べる時間を短縮するため、備忘録として残しておきます。

プロジェクト作成

下記コマンドを実行し、プロジェクトを作成します。

docker run --rm -it -v $PWD:/app -w /app node:20-slim \
sh -c 'npm install -g npm && npm i -g @nestjs/cli && nest new --strict project-name'

nest newコマンドでプロジェクトを作成する際に、--strictオプションを入れないと、チェックがゆるいtsconfig.tsが生成されるようです。

パッケージマネージャーに何を使用するか聞かれます。
npmを選択し、プロジェクトを作成します。

? Which package manager would you ❤️  to use? npm

Docker関連ファイル作成

プロジェクト作成後にできたプロジェクトルートフォルダに以下の構成でファイルを配置します。

プロジェクトルート
├─ .devcontainer
|  └─ devcontainer.json
├─ docker-compose.yml
└─ Dockerfile

プロジェクト作成時点で.prettierrcファイルが作成されるので、prettier.configPathは作成されたファイルに合わせます。

.devcontainer.json

{
    "service": "nextjs-sample",
    "dockerComposeFile": "../docker-compose.yml",
    "workspaceFolder": "/workdir",
    "customizations": {
      "vscode": {
        "extensions": ["eamodio.gitlens", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"],
        "settings": {
          "prettier.configPath": ".prettierrc",
          "editor.defaultFormatter": "esbenp.prettier-vscode",
          "editor.formatOnSave": true,
          "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
          },
          "editor.tabSize": 2
        }
      }
    }
}

Dockerfile

FROM node:20-slim

RUN apt-get update && apt-get install -y git vim locales-all

ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8

WORKDIR /workdir

フロントエンドのポートと被ることがあるため、ポートをデフォルトの3000から3001へ変更しています。

docker-compose.yml

version: '3.9'
services:
  input-attendance-backend:
    ports:
      - 3001:3001
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/workdir
    tty: true

main.tsのポートも忘れずに変更します。

main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3001); // 3001に変更
}
bootstrap();

srcフォルダ配下のファイルに@/*の記載でアクセスできるようにtsconfig.jsonに以下を追加します。

tscofig.json

{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

また、相対インポートをエラーとしたいため、以下のルールを追加します。

.eslintrc.js

module.exports = {
  ...
  rules: {
    ...
    '@typescript-eslint/no-restricted-imports': ['error', { patterns: ['./', '../'] }],
  },
};

自動作成されたファイルは相対インポートになっており、エラーとなるため解消してください。

例えばmain.tsは以下のように修正すればエラーは出なくなります。

main.ts

import { NestFactory } from '@nestjs/core';
- import { AppModule } from './app.module';
+ import { AppModule } from '@/app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(3001);
}
bootstrap();

以上で完了です。