Docker + NextJS + 独自ドメインで開発する

最終更新日:

環境

  • MacOS 14

やりたいこと

Docker を使い、
sample.dev にアクセスしたら NextJS の hello world 的な画面を表示させる。

使うイメージ

構成

app ─ NextJS アプリケーション
docker-compose.yaml

サンプルコード

/etc/hosts

  • アクセスしたいドメインは sample.dev 想定
$ sudo vi /etc/hosts

# 下記コード追加
127.0.0.1 sample.dev

app

docker-compose.yaml

services:
    sample-app:
        image: node:22.9.0
        volumes:
            - ./app:/var/www/html
        expose:
            - 3000
        tty: true
        networks:
            - sample-network
        working_dir: /var/www/html
        environment:
            - VIRTUAL_HOST=sample.dev
            # https://nextjs.org/docs/messages/non-standard-node-env
            #
            - NODE_ENV=development
        command: "npm run dev"
    sample-nginx-proxy:
        image: jwilder/nginx-proxy
        ports:
            - 80:80
        volumes:
            - /var/run/docker.sock:/tmp/docker.sock:ro
        networks:
            - sample-network


networks:
    sample-network:
        name: sample_network

ネットワーク関連でうまくいかない時

もし、コードに間違っているところがなくて、
ネットワーク関連のエラーが出てしまう場合、
使用する予定のネットワークを消してもう一度作成すれば動く。
かもしれない。

$ docker network ls
$ docker network rm ネットワークID

複数ドメインを扱う時

nginx-proxy を別リポジトリで管理すればやりやすいかも。

sample-project-nginx-proxy/docker-compose.yaml

services:
    sample-nginx-proxy:
        image: jwilder/nginx-proxy
        ports:
            - 80:80
        volumes:
            - /var/run/docker.sock:/tmp/docker.sock:ro
        networks:
            - sample-network

networks:
    sample-network:
        name: sample_network

sample-project-web/docker-compose.yaml

services:
    sample-web-app:
        image: node:22.9.0
        volumes:
            - ./app:/var/www/html
        expose:
            - 3000
        tty: true
        networks:
            - sample-network
        working_dir: /var/www/html
        environment:
            - VIRTUAL_HOST=sample.dev
            # https://nextjs.org/docs/messages/non-standard-node-env
            #
            - NODE_ENV=development
        command: "npm run dev"

networks:
    sample-network:
        name: sample_network

sample-project-console/docker-compose.yaml

services:
    sample-console-app:
        image: node:22.9.0
        volumes:
            - ./app:/var/www/html
        expose:
            - 3000
        tty: true
        networks:
            - sample-network
        working_dir: /var/www/html
        environment:
            - VIRTUAL_HOST=console.sample.dev
            # https://nextjs.org/docs/messages/non-standard-node-env
            #
            - NODE_ENV=development
        command: "npm run dev"

networks:
    sample-network:
        name: sample_network

/etc/hosts

$ sudo vi /etc/hosts

# 下記コード追加
127.0.0.1 sample.dev console.sample.dev

起動

先に nginx-proxy の方を起動させてから他のコンテナを起動させる。
以下例。

$ cd /path/to/your/nginx-proxy
$ docker-compose up

$ cd /path/to/your/web-project
$ docker-compose up

$ cd /path/to/your/console-project
$ docker-compose up