我尝试使用Docker+mongodb+nextjs构建开发环境

我使用Docker在Next.js的examples中構建了一個使用mongoose的環境。
https://github.com/vercel/next.js/tree/master/examples/with-mongodb-mongoose

创建与Docker相关的文件

touch {Dockerfile,docker-compose.yml,.dockerignore}
FROM node:15
WORKDIR /app

version: "3"
services:
    node:
        build:
            context: .
        container_name: nodecon
        tty: true
        ports:
            - "3000:3000"
        environment:
            - NODE_ENV=development
            - CHOKIDAR_USEPOLLING=true
        volumes:
            - ./src:/app
    mongo:
        image: mongo
        container_name: mongo-container
        environment:
            - MONGO_INITDB_ROOT_USERNAME=myuser
            - MONGO_INITDB_ROOT_PASSWORD=mypassword
        volumes:
            - mongo-db:/data/db
volumes:
    mongo-db:

启动Docker

docker-compose run --rm node /bin/bash

获取Nextjs的示例项目

如果将其放入容器中,我认为会在终端上显示类似 “root@864f3dd6a631:/app#” 的表示。
在容器内部执行 create-next-app。

npx create-next-app --example with-mongodb-mongoose . 

当我在ls命令下确认时,发现文件已经创建很多了。
请确保本地文件夹src下也有相同的文件生成。

一旦从容器中退出

创建.env文件

假设有src/.env.local.example文件,请将其更名为.env,并进行修改。
参考网址[https://docs.mongodb.com/manual/reference/connection-string/]

MONGODB_URI=mongodb://<username>:<password>@<host>:<port>/test?authSource=admin

在docker-compose.yml文件中,将用户名和密码放入。
对于IP地址,可以使用IP地址,但是由于Docker内部能够进行名称解析,所以可以将服务名称放入。
将默认端口号27017用作MongoDB的端口。
在本例中,如下所示。

MONGODB_URI=mongodb://myuser:mypassword@mongo:27017/test?authSource=admin

修改 Docker 文件

FROM node:15
WORKDIR /app
+ COPY ./src/package.json .
+ ARG NODE_ENV
+ RUN if [ "$NODE_ENV" = "development" ]; \
+     then npm install; \
+     else npm install --production; \
+     fi
version: "3"
services:
    node:
        build:
            context: .
+           args:
+              NODE_ENV: development
        container_name: nodecon
        tty: true
        ports:
            - "3000:3000"
        environment:
            - NODE_ENV=development
            - CHOKIDAR_USEPOLLING=true
        volumes:
            - ./src:/app
+           - /app/node_modules
+       depends_on:
+           - mongo
    mongo:
        image: mongo
        container_name: mongo-container
        environment:
            - MONGO_INITDB_ROOT_USERNAME=myuser
            - MONGO_INITDB_ROOT_PASSWORD=mypassword
        volumes:
            - mongo-db:/data/db

volumes:
    mongo-db:

我提前准备了环境变量以应对生产环境,但我认为没有特别必要。

我将app/node_modules设置为可不需要本地文件的node_modules。

为了先启动mongodb,我设置了depends_on。

创建Docker容器

docker-compose build
docker-compose up -d

确认MongoDB和Node两个容器已经启动起来了。

docker ps

进入节点容器

docker exec -it <container_name> /bin/bash

在这里使用节点容器名称进入。指定在docker-compose.yml文件中指定的容器名称nodecon。

在node容器内启动nexjs。

npm run dev

请打开 http://localhost:3000/ 并确认页面显示正确。

ブラウザで適当にPetを追加する

查询数据库

进入容器中的数据库(从本地)

docker exec -it <db_container_name> /bin/bash

登陆数据库

mongo -u <username> -p <password>

检查数据库

> show dbs

数据库的更改

> use test

确认数据

> db.pets.find()

确认之前输入的值是否被显示出来。

将服务器的自动启动设置。

为了避免每次都进入容器并运行npm run dev变得繁琐,我将在docker-compose up时自动启动。

services:
    node:
       ...
        depends_on: 
            - mongo
+       command: npm run dev

docker logs nodecon

确认启动日志是否显示。

你认为上述的情况怎么样?

广告
将在 10 秒后关闭
bannerAds