Nextjsでフルスタックアプリ開発！Docker環境編

目標と前提環境

今回の目標

create-next-appを行うためのDocker環境を用意

create-next-appに関しては以下を参考に。

前提環境

PC : mac

利用ライブラリー

1. docker
2. docker-compose

始めましょう。

前提環境のチェック

まずは次のコマンドが動作するか確認しましょう。

docker -v

Docker version 20.10.13, build a2233s222

docker-compose -v

docker-compose version 1.29.2, build 5bec333111

エラーが出る場合はdockerとdocker-composerをインストールしましょう。

dockerのインストール

docker-composeのインストール

環境構築

では、docker環境を構築します。

セットアップ内容

• Nodejs v16.x

ディレクトリ構成

.
├── README.md
├── app
├── docker
│   └── Dockerfile
└── docker-compose.yml

appディレクトリは今後nextjsのコードが入って来ます。作成しておいてください。
まずは、上の構成の通りファイルを配置しましょう。

Dockerfile

FROM node:16-alpine
LABEL app="nextjs-fullstack-app-qiita"
WORKDIR /app
COPY . .
EXPOSE 3000

LABEL app="nextjs-fullstack-app-qiita"の部分はお好きな名前をどうぞ。

docker-compose.yml

version: "3.8"
services:
  frontend:
    build: ./docker
    volumes:
      - ./app:/app
    working_dir: /app
    ports:
      - 3000:3000
    tty: true
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true

Dockerコンテナ立ち上げ

次のコマンドでdockerコンテナを作成します。

docker-compose up -d

コンテナの中に入ってNodejsがセットアップされているか確認しましょう。
shの部分はあなたの環境にあったコマンドを渡しましょう。docker-compose exec frontend bashになることが多いでしょうか。

docker-compose exec frontend sh
node -v
v16.20.0

v16.20.0と表示されればおkです。

以上になります。