Nest.js『だけ』をdevcontainerで構築する：ゼロから始める環境構築

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

1 ご挨拶
2 ゼロから始める環境構築
3 おわりに

ご挨拶

どもども！無事にさいたまに帰還した龍ちゃんです。新年一発目の出社日だったのですが、朝からアクシデント三連発でちょっとだけ遅れました。まだ街も年始から目覚めていない説がありますね。

さて、今回は環境構築系の記事になります。具体的には「Visual Studio CodeのdevcontainerでNest.jsを開発する環境」を作る内容です。ここで重要なのは、Next.js「だけ」の環境構築という点です。大体セットでDBなども構築するのですが、Docker初心者には重いのでいったんシンプルな環境だけを構築しようと思って始めました。

それでは、始めて行きましょう。あ！必要なのは、Dockerだけです。

ゼロから始める環境構築

環境構築の流れの説明を入れていこうと思います。ざっくりと４ステップになります。

Nodeが使えるDockerの環境を作成する
Docker上でNest.jsの環境を作成する
快適な開発のためにちょこちょこ設定変更
devcontainerで起動する

目指すところは、Hello World！を表示させるところまでになります。React版の記事を公開しました。フロントエンドの方はぜひご一読ください。もし本番環境が必要な方は、最後のほうにリンクがあります。

Nodeが使えるDockerの環境を作成する

ここで作成が必要なのは、Dockerfileとdocker-compose.ymlになります。まずは、Dockerfileになります。

ARG NODE_VER
FROM node:${NODE_VER}

RUN npm update -g npm
RUN npm i -g @nestjs/cli

USER node
WORKDIR /home/node/app

Nodeのバージョンはdocker composeから弄れるようにしています。npmのアップグレードとnest.jsのグローバルインストールはユーザーを切り替える前に実行しましょう。権限不足でこけます。

次にdocker-compose.ymlになります。

version: '3.7'
services:
  nest:
    build:
      args:
        - NODE_VER=20.10.0
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/home/node/app

Dockerfileの変数を渡して起動しているシンプルなものです。ここまでコピペが終了したら、あとはbuildしておきましょう。

docker compose build

無事成功したら、この節は終了です。npm周りでこけた場合は、実行しているユーザーがrootではない可能性があります。

Nest.jsの環境構築

すでに作成したイメージは、nestのCLIが容易されている状態になっています。そのため、コンテナを起動してnestのコマンドを実行することでファイルを作成することができます。

まずは、docker-compose.ymlのファイルを変更します。

docker compose run --rm nest nest new backend

—rmオプションは実行後、コンテナを破棄するオプションなので今回の環境構築に適任です。

あとは、Nest.jsのCLIが良しなにやってくれます。これは雑談レベルですが、Nest.jsを扱うときはnpmでやった方が何かとエラーが少ないような気がします。環境構築時にyarnを採用した場合、エラーが大量に発生した思い出があります。

実行後にbackendというディレクトリが作成されていれば成功です。

好きな名前を付けたい場合は、括弧部分を外してコマンドを実行してください。好きな名前にした場合は、以下の説では脳内でbackendの文字を置換してください。

docker compose run --rm nest nest new {好きな名前を付けよう}

快適な開発のために変更：node_modulesをコンテナ内に収める

ここからは、快適な開発のために変更を加えていきます。まずは、思い切ってbackend内にあるnode_modulesの中身と.gitを削除しましょう。

rm -rf backend/node_modules/*
rm -rf backend/.git

次にdocker-compose.ymlに変更を加えます。

version: '3.7'
services:
  nest:
    build:
      args:
        - NODE_VER=20.10.0
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - ./backend:/home/node/app
      - node_modules:/home/node/app/node_modules
    ports:
      - "3000:3000"

volumes:
  node_modules:

具体的な変更点としては、以下になります。

node_modulesをマウント
Bindマウントの先をbackendに変更
portを接続

最後にDockerfileを変更します。

ARG NODE_VER
FROM node:${NODE_VER}

RUN npm update -g npm
RUN npm i -g @nestjs/cli

USER node
WORKDIR /home/node/app

COPY --chown=node:node ./backend .

RUN npm install

EXPOSE 3000

CMD [ "npm", "run", "start:dev" ]

変更した点としては、事前にnode_modulesを作成するための処理が走っています。

ここまで来て、やっとで起動することができます。buildしてからupしましょう。

docker compose build

docker compose up

これで、http://localhost:3000にアクセスして「Hello World！」と返答があれば成功しています。

面白いのがnode_modulesがからのまま起動できている点です。実際は、コンテナ内のnode_moduleにパンパンに詰まっています。もしこの状態で、Visual Studio Codeを起動したら大量のエラーが吐かれます。それを解消するために、devcontainerで開発環境を作成します。

devcontainerで開発環境を作る

作成自体は簡単です。まずは、Visual Studio CodeでRemote Developmentをインストールしましょう。

こちらをインストールしたら、トップで.devcontainerというディレクトリを作成して、devcontainer.jsonというファイルを作成してコピペで保存してください。

{
    "name": "procject-dev",
    "dockerComposeFile": [
        "../docker-compose.yml"
    ],
    "service": "nest",
    "workspaceFolder": "/home/node/app",
    "customizations": {
        "vscode": {
            "extensions": [
                "esbenp.prettier-vscode",
                "dbaeumer.vscode-eslint",
                "VisualStudioExptTeam.vscodeintellicode",
                "christian-kohler.path-intellisense",
                "mhutchie.git-graph",
                "donjayamanne.githistory",
                "oderwat.indent-rainbow",
                "formulahendry.auto-rename-tag",
                "vscode-icons-team.vscode-icons",
                "MariusAlchimavicius.json-to-ts",
                "wix.vscode-import-cost"
            ]
        }
    },
    "forwardPorts": [3000],
    "remoteUser": "node"
}

設定自体は、完了です。あとは、画面クリック作業になります。まずは左下をクリックしましょう。