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の中身を書いていきます。
```Dockerfile: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"]
```

```Dockerfile: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の雛形作成
```sh
$ 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の雛形作成
```sh
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
```
あとはビルドし直して以下のコマンドで立ち上げます

```sh
$ docker compose build
$ docker compose up
```

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




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