VueJS + ExpressJS + Nginx + MongoDB

.dockerignore

# DOCKER
.dockerignore
Dockerfile
docker-compose.yml

# OS
.DS_Store

# NPM
backend/node_modules
backend/package-lock.json
frontend/node_modules
frontend/package-lock.json

# APP
frontend/dist

# DATABASE
database/*
!database/.gitkeep

.gitignore

# OS
.DS_Store

# NPM
backend/node_modules
backend/package-lock.json
frontend/node_modules
frontend/package-lock.json

# APP
frontend/dist

# DATABASE
database/*
!database/.gitkeep

README.md

Docker & Docker-copose example for frontend/backend partails

File structure

• backend/
• database/
• frontend/
• webserver/
• .dockerignore
• .gitignore
• docker-compose.yml
• Dockerfile

Build & run

# Build & run & open browser
docker-compose up --build -d && open http://localhost/

# Stop
docker-compose stop && docker system prune <<< y

docker-compose.yml

version: "3.7"

services:

  database:
    container_name: docker_database
    build:
      context: ./
      target: database_stage
    working_dir: /home/mysite.com
    restart: unless-stopped
    volumes:
      - ./database:/data/db
    environment:
      - MONGO_INITDB_DATABASE=mysite
    networks:
      - docker_network

  frontend:
    container_name: docker_frontend
    build:
      context: ./
      target: frontend_stage
    working_dir: /home/mysite.com
    depends_on: [ database ]
    restart: "no"

  backend:
    container_name: docker_backend
    build:
      context: ./
      target: backend_stage
    working_dir: /home/mysite.com
    restart: unless-stopped
    depends_on: [ frontend ]
    networks:
      - docker_network
      
  webserver:
    container_name: docker_webserver
    build:
      context: ./
      target: nginx_stage
    restart: unless-stopped
    ports:
      - 80:80
    depends_on: [ "backend" ]
    networks:
      - docker_network

networks:
  docker_network:

Dockerfile

# -------------------- DATABASE ---------------------- #

FROM mongo:latest as database_stage

WORKDIR /home/mysite.com

VOLUME [ "/data/db" ]

ENV MONGO_INITDB_DATABASE=mysite

EXPOSE 27017

CMD [ "mongod" ]

# -------------------- FRONTEND ---------------------- #

FROM node:latest as frontend_stage

WORKDIR /home/mysite.com

RUN chown -R node:node ./

COPY frontend/package*.json ./

RUN npm install --silent

COPY frontend/ ./

RUN npm run build

# -------------------- BACKEND ---------------------- #

FROM node:latest as backend_stage

WORKDIR /home/mysite.com

COPY backend/package*.json ./

RUN npm install --silent

COPY backend/ ./

EXPOSE 3000

CMD [ "npm", "start" ]

# -------------------- WEBSERVER ---------------------- #

FROM nginx:latest as nginx_stage

WORKDIR /usr/share/nginx/html

COPY --from=frontend_stage /home/mysite.com/dist ./frontend/

COPY webserver/*.html ./errors/

COPY webserver/nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD [ "nginx", "-g", "daemon off;" ]