Next.js×Dockerの環境構築

投稿日：2024/5/13

更新日：2024/5/13

Summary

Next.jsの学習を行いたく、その検証に使うための環境構築をここに残しておこうと思います！

構築

まずは適当なディレクトリを作成して、以下のファイルを用意しください！

Terminal

$ tree 
.
├── Dockerfile
└── docker-compose.yml

1 directory, 2 files

次にこれらの中身を整えていきます！

Dockerfile

FROM node:20.12.0

WORKDIR /{コンテナ内の作業したい場所}

COPY package*.json ./

RUN yarn install

COPY . .

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

docker-compose.yml

version: "3.8"

services:
  app:
    build:
      context: .
    volumes:
      - ./{アプリケーション名}:/{コンテナ内の作業したい場所}
    ports:
      - "3000:3000"

例えば、アプリケーション名をapp、コンテナ内の作業場所(WORKDIR)をworkspaceとすると以下のようになります。

Dockerfile

FROM node:20.12.0

WORKDIR /workspace

COPY package*.json ./

RUN yarn install

COPY . .

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

docker-compose.yml

version: "3.8"

services:
  app:
    build:
      context: .
    volumes:
      - ./app:/workspace
    ports:
      - "3000:3000"

アプリケーション名とWORKDIRは同じ名前でもOKです！
今回はわかりやすいようにappとworkspaceとしていますが、自分はどちらもappで作ることが多いです！

ここまで行けたらビルドしましょう！

Terminal

docker compose build

何をしているかというと、先ほど作成したDockerfileからDocker Imageを作成しています！
これによってコンテナはイメージから作成されるのでそのイメージを作成してるわけですね！

ビルドが完了したらNext.jsのアプリケーションを作成しましょう！

Terminal

$ docker compose run --rm app npx create-next-app@latest .
Need to install the following packages:
create-next-app@14.2.3
Ok to proceed? (y) y
✔ Would you like to use TypeScript? … No / Yes
✔ 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 /workspace.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

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


added 358 packages, and audited 359 packages in 3m

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

found 0 vulnerabilities
Success! Created workspace at /workspace

npm notice 
npm notice New minor version of npm available! 10.5.0 -> 10.7.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.7.0
npm notice Run npm install -g npm@10.7.0 to update!
npm notice

色々聞かれますがとりあえずdefaultのものでOKです！

コマンドの最後の.ですが、これはアプリケーション名をdocker-composeで決めているため.にしています！

ここまでで作成完了なので最後に立ち上げて確認だけしておきましょう！

Terminal

$ docker compose up
[+] Running 1/1
 ⠿ Container next-practice-app-1  Created                                                                                                 0.1s
Attaching to next-practice-app-1
next-practice-app-1  | 
next-practice-app-1  | > workspace@0.1.0 dev
next-practice-app-1  | > next dev
next-practice-app-1  | 
next-practice-app-1  |   ▲ Next.js 14.2.3
next-practice-app-1  |   - Local:        http://localhost:3000
next-practice-app-1  | 
next-practice-app-1  |  ✓ Starting...
next-practice-app-1  | Attention: Next.js now collects completely anonymous telemetry regarding usage.

ここまでできたらlocalhost:3000にアクセスしましょう！

このような画面ができれば完成です！

まとめ

今回はNext.jsでの検証をする用に簡単なアプリケーションを作成しました！

SSR、SSGの検証とか色々これを利用してやっていこうと思います〜！

Index

Summary
構築
まとめ