Nest.js×Next.jsの環境をDockerで作成する

本業でNest.js×Next.jsの開発に参戦することが決まったのでTODOアプリでも作ってキャッチアップしよう！
ということで、Dockerで環境構築しました！

Docker類作成

$ tree
.
├── README.md
├── api
│ └── Dockerfile
├── docker-compose.yml
└── front
  └── Dockerfile

まずはこんな感じでファイル、ディレクトリを作成します。
次にDockerfile、docker-compose.ymlの中身を書いていきます。

api/Dockerfile

FROM node:20.10.0

WORKDIR /app

COPY package*.json ./

RUN npm i -g @nestjs/cli

RUN yarn install


COPY . .

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

front/Dockerfile

FROM node:20.10.0

WORKDIR /app

COPY package*.json ./

RUN yarn install

COPY . .

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

docker-compose.yml

version: "3.8"

services:
  api:
    build:
      context: ./api
      dockerfile: Dockerfile
    volumes:
      - ./api:/app
    ports:
      - "3000:3000"
    networks:
      - app-network

  front:
    build:
      context: ./front
      dockerfile: Dockerfile
    volumes:
      - ./front:/app
    ports:
      - "4000:3000"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

ここまでできたらアプリの雛形を作成していきます。

Nest.jsの雛形作成

$ cd /api
$ docker compose run --rm api nest new todo-api
# 今回はyarnを採用しているのでyarnを選択

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

? Which package manager would you ❤️  to use? yarn
CREATE todo-api/.eslintrc.js (663 bytes)
CREATE todo-api/.prettierrc (51 bytes)
CREATE todo-api/README.md (3347 bytes)
CREATE todo-api/nest-cli.json (171 bytes)
CREATE todo-api/package.json (1949 bytes)
CREATE todo-api/tsconfig.build.json (97 bytes)
CREATE todo-api/tsconfig.json (546 bytes)
CREATE todo-api/src/app.controller.ts (274 bytes)
CREATE todo-api/src/app.module.ts (249 bytes)
CREATE todo-api/src/app.service.ts (142 bytes)
CREATE todo-api/src/main.ts (208 bytes)
CREATE todo-api/src/app.controller.spec.ts (617 bytes)
CREATE todo-api/test/jest-e2e.json (183 bytes)
CREATE todo-api/test/app.e2e-spec.ts (630 bytes)

✔ Installation in progress... ☕

🚀  Successfully created project todo-api
👉  Get started with the following commands:

$ cd todo-api
$ yarn run start

                                         
                          Thanks for installing Nest 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.
                                         
                                         
               🍷  Donate: https://opencollective.com/nest

作成できました！次！！！

Nxst.jsの雛形作成

cd front
docker compose run --rm front npx create-next-app todo-front --ts
# 適当に選択してください

Need to install the following packages:
create-next-app@14.0.3
Ok to proceed? (y) y
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /app/todo-front.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next


added 333 packages, and audited 334 packages in 2m

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created todo-front at /app/todo-front

npm notice 
npm notice New patch version of npm available! 10.2.3 -> 10.2.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.4
npm notice Run npm install -g npm@10.2.4 to update!
npm notice

できました！
最後にdocker-compose.ymlを修正します

docker-compose.yml

version: "3.8"

services:
  api:
    build:
      context: ./api
      dockerfile: Dockerfile
    volumes:
      - ./api/todo-api:/app
    # todo-apiに修正
    ports:
      - "3000:3000"
    networks:
      - app-network

  front:
    build:
      context: ./front
      dockerfile: Dockerfile
    volumes:
      - ./front/todo-front:/app
    # todo-frontに修正
    ports:
      - "4000:3000"
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

あとはビルドし直して以下のコマンドで立ち上げます

$ docker compose build
$ docker compose up

フロントエンド　http://localhost:4000/
バックエンド　http://localhost:3000/
こちらにアクセスできれば完成です！！

キャッチアップ頑張ります！！！！！