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

NestjsをDevContainterで起動するゼロから始める環境構築
◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

ご挨拶

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

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

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

ゼロから始める環境構築

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

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

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

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

ここで作成が必要なのは、Dockerfiledocker-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をインストールしましょう。

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"
}

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

Remoteの機能が詰め込まれたHubを開く

出てきた検索で「Reopen in Container」をクリックしましょう。

Reopen in Containerを指定して開く

するとVSCodeが自動で閉じて立ち上がります。これで、コンテナ内のソースコード変更が直接VSCodeで実行することができます。開いたほうでnode_modulesを見るとしっかり詰まっていることが確認できると思います。

おわりに

よっしゃ!終了です。環境構築うまくいきましたか?何度も作成すればどっかで成功しますよ。

Nest.jsを単品で使うシーンはなかなかないかと思いますが、環境構築は一個ずつ丁寧に作成したほうが心の負担的にも楽です。特にDockerをあまり触ったことない勢からすれば、地獄の時間になることでしょう。ですが、環境をきれいに保つことはより良いエンジニアに近づく一歩になります。

環境構築系の記事はほかにも書いていますので、もし合致している環境があれば覗いてみてください。

React+devcontainer環境構築

 

python+devcontainer環境

今回参考にしたサイトです。

Twitterのほうもよろしくお願いします。

アバター画像
About 龍:Ryu 106 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる