使用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是一种用于定义Docker镜像的文本文件。

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配置文件”。

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配置的文章后，也有了不同的写法，让我感觉到每个人对此有不同的看法。

希望各位能够参考一下，由于每个本地环境可能有所不同。