Dockerを使ってNestJSの開発環境を構築してみました

はじめに

こんにちは！ご訪問いただきありがとうございます！
環境構築シリーズ第5弾です！

今回はバックエンド開発への理解を深めるため、以下の技術を組み合わせた開発環境を構築しました。

• NestJS
  • Node.jsのフレームワークのひとつで、TypeScriptで構築されています。
• TypeScript
  • 静的型付け言語で、開発効率やコードの可読性を向上させることができます。
• PostgreSQL
  • データをテーブル形式で管理する、オープンソースのRDBMSです。
• pgAdmin
  • PostgreSQL用のGUIツールです。
• ESLint(TypeScript&Airbnbスタイル)
  • コードの品質や一貫性を確保するための静的解析ツールです。今回はTypeScriptとAirbnbのスタイルガイドに準拠しています。
• Prettier
  • コードの自動整形ツールで、コードのフォーマットを一貫性のあるスタイルに保つことができます。

本記事では、具体的な手順を追って、どのように開発環境を構築したのかを紹介します。
これらの技術に関心をお持ちで、情報が足りず困っているという方のヒントになれば嬉しいです。

事前にDockerのセットアップが必要です。

作業用ディレクトリと必要なファイルの作成

作業用ディレクトリの作成

まずは、任意の階層に作業用ディレクトリを作成します。

bash

mkdir nestjs-study
cd nestjs-study

• mkdir nestjs-study
  作業用ディレクトリ（nestjs-study）を作成
• cd nestjs-study
  作業用ディレクトリ（nestjs-study）に移動

必要なファイルの準備

環境構築にあたり必要なファイルを準備します。

bash

touch Dockerfile db.Dockerfile docker-compose.yml .env
ls
code .

• touch Dockerfile db.Dockerfile docker-compose.yml .env
  各ファイルをまとめて作成
• ls
  ファイルが作成されているかディレクトリの中身を確認
• code .
  VSCodeを開く（設定していない方はいつも通りの手順で開いてください）

Dockerのセットアップ

.envの作成

環境変数を定義するためのファイルを作成します。

.env

POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres
POSTGRES_DB=postgres
PGADMIN_DEFAULT_EMAIL=[e-mail]
PGADMIN_DEFAULT_PASSWORD=password

それぞれ任意の値を定義してください。

Dockerfileの作成

NestJS用のDockerfileを作成します。

Dockerfile

FROM node:18.16.0-slim
RUN apt-get update && \
    apt-get install -y locales curl
RUN locale-gen ja_JP.UTF-8
RUN localedef -f UTF-8 -i ja_JP ja_JP
ENV LANG=ja_JP.UTF-8
ENV TZ=Asia/Tokyo
WORKDIR /app

db.Dockerfileの作成

PostgreSQL用のDockerfileを作成します。

db.Dockerfile

FROM postgres:15.3
RUN apt-get update && \
    apt-get install -y curl
RUN locale-gen ja_JP.UTF-8
RUN localedef -f UTF-8 -i ja_JP ja_JP
ENV LANG=ja_JP.UTF-8
ENV TZ=Asia/Tokyo

docker-compose.ymlの作成

docker-compose.ymlを作成します。

docker-compose.yml

version: '3.7'
services:
  app:
    build: .
    tty: true
    ports:
      - 3005:3005
      - 5555:5555
    volumes:
      - .:/app
      - /app/node_modules
    depends_on:
      - db
  db:
    build: 
      context: "."
      dockerfile: "db.Dockerfile"
    restart: always
    ports:
      - 5432:5432
    volumes:
      - ./db/postgres/init.d:/docker-entrypoint-initdb.d
      - ./db/postgres/data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: ${POSTGRES_USER}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      POSTGRES_DB: ${POSTGRES_DB}
      POSTGRES_INITDB_ARGS: "--encoding=UTF-8"
  pgadmin:
    image: dpage/pgadmin4
    restart: always
    ports:
      - 81:80
    environment:
      PGADMIN_DEFAULT_EMAIL: ${PGADMIN_DEFAULT_EMAIL}
      PGADMIN_DEFAULT_PASSWORD: ${PGADMIN_DEFAULT_PASSWORD}
    volumes:
      - ./db/postgres/pgadmin:/var/lib/pgadmin
    depends_on:
      - db

コンテナの構築・起動

ターミナルに戻り、docker-compose.ymlファイルがあるディレクトリで下記のコマンドを入力し、コンテナをバックグラウンドで構築・起動します。（最初は時間がかかるかもしれません！）

bash

docker compose up -d

docker-composeと docker　composeの違いについて
Docker Compose V2のリリースにともない、以前まで主流であったdocker-composeのかわりに、docker composeでの実行が可能になりました。
本記事では、現在のDocker社の公式ドキュメントに準拠し、docker composeを使用しています。

コンテナに入る

コンテナの構築・起動が完了したら、下記のコマンドを入力しコンテナに入ります。

bash

docker compose exec app bash

NestJSプロジェクトの新規作成

Nest CLIをインストール。

開発・保守を支援する、NestJSのCLIツールをインストールします。

bash

npm install -g @nestjs/cli

プロジェクトの作成

Nest CLIを使用してプロジェクトを新規作成します。

bash

nest new --strict .

--strict　オプションを使用することで、strictモードでプロジェクトを作成します。

パッケージマネージャーの選択

パッケージマネージャーはyarnを選択します。

bash

⚡  We will scaffold your app in a few seconds..

? Which package manager would you ❤️  to use? (Use arrow keys)
  npm
❯ yarn
  pnpm
  

NestJSのセットアップが完了したことを確認

NestJSのセットアップが完了したので、以下のコマンドを実行し、Hello Worldが表示されるかをブラウザで確認しましょう。

bash

yarn start

URL：http://localhost:3000/

ESlintのセットアップ

ESLintをセットアップしましょう。
ESLintはコードの品質や一貫性を確保するための静的解析ツールで、以下の設定は、AirbnbのスタイルガイドとTypeScriptに準拠しています。

必要なパッケージのインストール

AirbnbのESLint設定、AirbnbのTypeScript用のESLint設定がインストールされます。

bash

yarn add --dev eslint-config-airbnb-base eslint-plugin-import eslint-config-airbnb-typescript 

.eslintrc.jsonの修正

ルートディレクトリの.eslintrc.jsを以下の通り修正します。

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'airbnb-base',  // baseがないとReactの設定に関するエラーが発生する
    'plugin:@typescript-eslint/recommended',
    'airbnb-typescript/base',  // baseがないとReactの設定に関するエラーが発生する
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    'class-methods-use-this': 'off',  // staticに関するエラーを無視する
    'import/prefer-default-export': 'off',  // default-exportのエラーを無視する
  },
};

EsLintのセットアップが完了したことを確認

ESLintのセットアップが完了したので実行してみましょう。

bash

yarn lint

今回のNestJSプロジェクトのセットアップは以上です。
ここまでお疲れ様でした！

終わりに...

今回はNestJSの開発環境の構築についてご紹介しました。

これらのセットアップを適切に行うことで、効率的かつ品質の高いNestJSプロジェクトを開発することができます。また、これらの設定はあくまで基本的なものであり、プロジェクトの要件や好みに応じてカスタマイズすることもできます。

もし環境構築に困った時は、またこの記事に戻ってきてください。
ここまでご覧いただき、ありがとうございました。