DockerでNext.jsとMongoDB環境の構築をする

Next.jsとMongoDBを利用して個人アプリ開発を行おうと思い、Dockerで環境構築を行うことにした。

この記事では、DockerでNext.jsとMongoDB環境の構築方法を解説します。

ちなみに私はMacを使用しています。

環境構築

まずはDockerfileとdocker-compose.ymlを以下のような構成で配置します。

SampleProject
 - docker
    - Dockerfile
 - docker-compose.yml

Dockerfile

Dockerfile

FROM node:14.15.4-alpine

EXPOSE 3000
ENV HOST 0.0.0.0

# コマンド実行
RUN apk update && \
    apk add git && \
    npm install -g @vue/cli nuxt create-nuxt-app

docker-compose.yml

docker-compose.yml

version: '3.8'

services:
  # 参考:dockerhub(https://hub.docker.com/_/mongo)
  mongo:
    image: mongo:4.4.5
    restart: always
    ports:
      - 27017:27017
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example
    # データを永続化する場合必要。volumesがないとdocker-compose downする度にデータが消える
    volumes:
      - ./db:/data/db
      - ./configdb:/data/configdb

  mongo-express:
    image: mongo-express:0.54
    restart: always
    ports:
      - 8081:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: example
      ME_CONFIG_MONGODB_URL: mongodb://root:example@mongo:27017/

  nuxt:
    build: ./docker/
    ports:
      - 9000:3000
    volumes:
      - ./SampleProjects:/workspace
    working_dir: /workspace
    command: npm run dev
    # ホットリロードを有効にする
    environment:
      - CHOKIDAR_USEPOLLING=true
    links:
      - mongo

Dockerサービスの立ち上げ

$ docker-compose build

Nuxtアプリケーションの作成

$ npm create-nuxt-app プロジェクト名

各種設定を聞かれますので、自分の作成したい内容に合わせて設定して下さい。

Dockerサービスの起動

$ docker-compose up -d

docker-compose.ymlで「command: npm run dev」と設定しているのでdocker-compose upをすればすぐにブラウザで起動していることを確認できます。

nuxtアプリケーションが起動していることが確認できます。

Mongo-expressが立ち上がっており、ブラウザ上でMongoDBの内容を確認することができます。

まとめ

これでDockerでNuxt.jsとMongoDBの環境構築は完了です。

私もdocker-compose.ymlの設定などは色々な記事を参考にしましたが、人によって色々な書き方があるなーという感想です。

それぞれのローカル環境によっても変わってくるとは思いますので参考にしていただければと思います。