How to deploy Nextjs + database app with docker multi-container
How to deploy Nextjs + database app with docker multi-container
Deployment React App With Docker
NPM packages used
$ yarn add next react react-dom
@mui/material @mui/icons-material @emotion/react @emotion/styled
@axios next-connect next-absolute-url
mongoose
Directory Stracture
├── .dockerignore
├── Dockerfile
├── docker-compose.yml
│
├── pages
│ ├── addUser.js
│ ├── api
│ │ └── users
│ │ ├── [id].js
│ │ └── index.js
│ │
│ ├── index.js
│ └── viewUser.js
│
├── server
│ ├── controllers
│ │ └── userController.js
│ │
│ └── models
│ ├── database.js
│ └── userModel.js
│
├── README.md
├── .gitignore
├── package.json
└── yarn.lock
/Dockerfile
FROM node:16.13.2-alpine3.15
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "dev"]
/docker-compose.yml (use space, instead of tab)
version: "3"
volumes:
docker:
services:
database:
image: mongo
ports:
- 27017:27017
volumes:
- docker:/data/db
next:
build: .
ports:
- 3000:3000
volumes:
- .:/app
environment:
DB_LOCAL_URL: mongodb://database:27017/next-docker
depends_on:
- database
Building image & Container
$ docker-compose build (1) : Build multi-container image
$ docker image ls : projectDirectoryName-imageName
$ docker-compose up -d (2) : Start multi-container
$ docker-compose logs -f : See all (both) container's logs together
$ docker logs -f next-app_next : See only 'next-app_next' container's logs
$ docker-compose ps -a : show process/containers running by docker-compose
$ docker ps -a : show all process
$ docker down : stop multi-container
NB: - Though database take some times to start & ready, so 1st time may require refresh browser
. To solve that issue we can use a package 'wait-for-it'
Test app on browser
(Browser) http://localhost:3000 : We EXPOSEed & bind port 3000 + Production