Dockerization of the project

mbatuhancelik commented 2 years ago

Issue Description

Now that we have working parts on both frontend and backend, we can begin dockerizing our project.

I am planning on creating three containers for this project:

mongo: default mongo container.
backend: this container will contain the REST API
frontend: this container will be responsible for server side rendering Vue and providing a http server

Step Details

Steps that will be performed:

[x] Create .env.production files for the production deployment.
[x] Create a dockerfile to dockerize Node.js Restful API.
[x] Create a dockerfile to dockerize Vue.js frontend.
[x] Create a docker-compose file to run these three containers simultaneously.

Final Actions

Upon completion, the project should be able to run on docker-compose up --build

Deadline of the Issue

18.05.2022 Wednesday 24:00

Reviewer

Onur Kömürcü

Deadline for the Review

19.05.2022 Thursday 24:00

mbatuhancelik commented 2 years ago

Currently, we are importing lots of addresses like running mode, db url, and backend address in .env files, and they tend to change between different environments. They certainly will need to change in docker environment too!

Thus, for the sake of being able to use docker environment alongside of local development environment, .env.prod files will be introduced to set the production environment.

Note that these files will not contain any secret information and will be shared in the repo, and I commited their first version.

mbatuhancelik commented 2 years ago

I created a dockerfile for the API, one challenge I faced was to choose a process manager. I have choosen PM2 as it is easy to use and comes with a load balancer and automatic reload.

created dockerfile is bellow

FROM node:16.15
RUN  npm install pm2 -g
WORKDIR /app
COPY . .
RUN npm install --production
EXPOSE 3000
ENV PORT=3000
ENV NODE_ENV=production
COPY .env.prod .env
CMD [ "pm2-runtime", "npm", "--", "start" ]

mbatuhancelik commented 2 years ago

To dockerize the Vue.js project, I followed the Dockerizing Vue tutorial by Vue js

Dockerfile is in following:

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .
COPY .env.prod .env

# build app for production with minification
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]

mbatuhancelik commented 2 years ago

Finally, by creating a docker-compose file, using the dockerfiles above, I was able to run 3 containers and make them work with each other.

This docker-compose file:

Manages the ports
Introduces the regular mongo container
Creates a volume for the mongo container

Thus, by using docker-compose up, one can run the whole project all-together.

created file is in following:

version: '3.9'
volumes:
  data:
services:
  mongodb:
    image: mongo:latest
    hostname: mongo
    ports:
      - "27017:27017"
    volumes:
      - data:/data/db
  server:
    hostname: backend
    build: 
      context: ./server
      dockerfile: dockerfile
    ports:
      - "3000:3000"
  frontend:
    hostname: frontend
    build: 
      context: ./frontend
      dockerfile: dockerfile
    ports:
      - "8080:8080"

bounswe / bounswe2022group2