[Feature]: Run project on Docker in Dev mode (#151)

- Create different Dockerfiles
- Create custom `docker-compose` file to dev environment
- Update pipelines

.github/workflows/deploy_backend.yml

@@ -1,28 +1,28 @@
 name: Deploy backend
 
-on: 
-  push:
-    branches: [ main ]
+on:
+    push:
+        branches: [main]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
+    build:
+        runs-on: ubuntu-latest
 
-    steps:
-    - uses: actions/checkout@v2
+        steps:
+            - uses: actions/checkout@v2
 
-    - uses: azure/docker-login@v1
-      with:
-        login-server: divideandconquer.azurecr.io
-        username: ${{ secrets.REGISTRY_USERNAME }}
-        password: ${{ secrets.REGISTRY_PASSWORD }}
+            - uses: azure/docker-login@v1
+              with:
+                  login-server: divideandconquer.azurecr.io
+                  username: ${{ secrets.REGISTRY_USERNAME }}
+                  password: ${{ secrets.REGISTRY_PASSWORD }}
 
-    - run: |
-        docker build . -f ./backend/Dockerfile  -t divideandconquer.azurecr.io/backend:latest
-        docker push divideandconquer.azurecr.io/backend:latest     
+            - run: |
+                  docker build . -f ./backend/docker/prod/Dockerfile  -t divideandconquer.azurecr.io/backend:latest
+                  docker push divideandconquer.azurecr.io/backend:latest
 
-    - uses: azure/webapps-deploy@v2
-      with:
-        app-name: 'divideandconquer-be'
-        publish-profile: ${{ secrets.AZURE_BACKEND_PUBLISH_PROFILE }}
-        images: 'divideandconquer.azurecr.io/backend:latest'
+            - uses: azure/webapps-deploy@v2
+              with:
+                  app-name: 'divideandconquer-be'
+                  publish-profile: ${{ secrets.AZURE_BACKEND_PUBLISH_PROFILE }}
+                  images: 'divideandconquer.azurecr.io/backend:latest'

.github/workflows/deploy_frontend.yml

@@ -18,7 +18,7 @@ jobs:
           password: ${{ secrets.REGISTRY_PASSWORD }}
 
       - run: |
-          docker build . -f ./frontend/Dockerfile --build-arg NEXT_PUBLIC_BACKEND_URL=${{secrets.NEXT_PUBLIC_BACKEND_URL}} --build-arg NEXT_PUBLIC_NEXTAUTH_URL=${{secrets.NEXT_PUBLIC_NEXTAUTH_URL}} --build-arg NEXT_PUBLIC_EXPIRATION_TIME=${{secrets.NEXT_PUBLIC_EXPIRATION_TIME}} --build-arg NEXT_PUBLIC_ENABLE_AZURE=${{secrets.NEXT_PUBLIC_ENABLE_AZURE}} -t divideandconquer.azurecr.io/frontend:latest
+          docker build . -f ./frontend/docker/prod/Dockerfile --build-arg NEXT_PUBLIC_BACKEND_URL=${{secrets.NEXT_PUBLIC_BACKEND_URL}} --build-arg NEXT_PUBLIC_NEXTAUTH_URL=${{secrets.NEXT_PUBLIC_NEXTAUTH_URL}} --build-arg NEXT_PUBLIC_EXPIRATION_TIME=${{secrets.NEXT_PUBLIC_EXPIRATION_TIME}} --build-arg NEXT_PUBLIC_ENABLE_AZURE=${{secrets.NEXT_PUBLIC_ENABLE_AZURE}} -t divideandconquer.azurecr.io/frontend:latest
           docker push divideandconquer.azurecr.io/frontend:latest
 
       - uses: azure/webapps-deploy@v2

backend/docker/dev/Dockerfile

@@ -0,0 +1,17 @@
+# Dev Environment
+FROM node:16-alpine AS development
+
+# Container Dir
+WORKDIR /app/backend
+
+# Copy package.json (to install all packages)
+COPY package.json ./
+
+# Install the packages (on the package.json)
+RUN yarn
+
+# Copy all files
+COPY ./ .
+
+# Run the build command
+RUN npm run build

docker-compose.dev.yaml

@@ -0,0 +1,136 @@
+version: "3.9"
+
+services:
+  backend:
+    build:
+      context: backend  # starts on backend folder instead on root
+      target: development # choose development part from Dockerfile
+      dockerfile: docker/dev/Dockerfile
+
+    # image name
+    image: dc-backend
+
+    # container name
+    container_name: backend
+
+    networks:
+      - dc-network
+    depends_on:
+      - mongo
+
+    environment:
+      NODE_ENV: ${NODE_ENV}
+      DB_USER: ${DB_USER:-backend}
+      DB_PASSWORD: ${DB_PASSWORD:-password}
+      DB_NAME: ${DB_NAME:-dc}
+      DB_HOST: ${DB_HOST:-mongo}
+      DB_PORT: ${DB_PORT:-27017}
+      DB_REPLICA_SET: ${DB_REPLICA_SET:-dcrs}
+      BACKEND_PORT: ${BACKEND_PORT:-3200}
+      JWT_ACCESS_TOKEN_SECRET: ${JWT_ACCESS_TOKEN_SECRET:-backenddc2022}
+      JWT_ACCESS_TOKEN_EXPIRATION_TIME: ${JWT_ACCESS_TOKEN_EXPIRATION_TIME:-900}
+      JWT_REFRESH_TOKEN_SECRET: ${JWT_REFRESH_TOKEN_SECRET:-backenddc2022refresh}
+      JWT_REFRESH_TOKEN_EXPIRATION_TIME: ${JWT_REFRESH_TOKEN_EXPIRATION_TIME:-1}
+      AZURE_CLIENT_ID: ${AZURE_CLIENT_ID}
+      AZURE_CLIENT_SECRET: ${AZURE_CLIENT_SECRET}
+      AZURE_TENANT_ID: ${AZURE_TENANT_ID}
+      AZURE_ENABLE: ${AZURE_ENABLE}
+
+    # restart strategy
+    restart: unless-stopped
+
+    volumes:
+      - ./backend:/app/backend
+      - /app/backend/node_modules
+
+    command: yarn start:debug
+
+    ports:
+      - 3200:3200
+      # debugging port
+      - 9229:9229
+
+  frontend:
+    build:
+      context: frontend # to start on frontend folder
+      dockerfile: docker/dev/Dockerfile # path to dev Dockerfile
+      args:
+        - NEXT_PUBLIC_BACKEND_URL=${NEXT_PUBLIC_BACKEND_URL:-http://localhost:3200}
+        - NEXT_PUBLIC_NEXTAUTH_URL=${NEXT_PUBLIC_NEXTAUTH_URL:-http://localhost:3000}
+        - NEXT_PUBLIC_ENABLE_AZURE=${NEXT_PUBLIC_ENABLE_AZURE}
+
+    # set image name
+    image: dc-frontend
+
+    # set container name
+    container_name: frontend
+
+    networks:
+      - dc-network
+    depends_on:
+      - backend
+
+    environment:
+      NEXT_PUBLIC_BACKEND_URL: ${NEXT_PUBLIC_BACKEND_URL:-http://localhost:3200}
+      BACKEND_URL: ${BACKEND_URL:-http://backend:3200}
+      NEXTAUTH_URL: ${NEXTAUTH_URL:-http://localhost:3000}
+      NEXT_PUBLIC_NEXTAUTH_URL: ${NEXT_PUBLIC_NEXTAUTH_URL:-http://localhost:3000}
+      SECRET: ${SECRET:-56e9169e3383d4a73fef9e0b4a3ff4e2}
+      NEXT_PUBLIC_EXPIRATION_TIME: ${NEXT_PUBLIC_EXPIRATION_TIME:-900}
+      AZURE_CLIENT_ID: ${AZURE_CLIENT_ID}
+      AZURE_CLIENT_SECRET: ${AZURE_CLIENT_SECRET}
+      AZURE_TENANT_ID: ${AZURE_TENANT_ID}
+      NEXT_PUBLIC_ENABLE_AZURE: ${NEXT_PUBLIC_ENABLE_AZURE}
+
+    volumes:
+      - ./frontend:/app/frontend
+      - /app/frontend/node_modules
+
+    # restart strategy
+    restart: unless-stopped
+
+    # set ports
+    ports:
+      - 3000:3000
+
+  mongo2:
+    image: mongo
+    restart: always
+    container_name: mongo2
+    networks:
+      - dc-network
+    ports:
+      - "27018:27017"
+    entrypoint:  "bash -c '/usr/bin/mongod --replSet $${MONGO_REPLICA_NAME} --journal --bind_ip_all'"
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: ${DB_ROOT_USER:-admin}
+      MONGO_INITDB_ROOT_PASSWORD: ${DB_ROOT_PASSWORD:-password}
+      MONGO_INITDB_DATABASE: ${DB_NAME:-dc}
+      MONGO_BACKEND_USER: ${DB_USER:-backend}
+      MONGO_BACKEND_PASSWORD: ${DB_PASSWORD:-password}
+      MONGO_REPLICA_NAME: ${DB_REPLICA_SET:-dcrs}
+  mongo:
+    image: mongo
+    restart: always
+    container_name: mongo
+    ports:
+      - "27017:27017"
+    volumes:
+      - ./database/rs-init.sh:/scripts/rs-init.sh
+    networks:
+      - dc-network
+    links:
+      - mongo2
+    command: "bash -c '/usr/bin/mongod --replSet $${MONGO_REPLICA_NAME} --journal --bind_ip_all'"
+    environment:
+      MONGO_INITDB_ROOT_USERNAME: ${DB_ROOT_USER:-admin}
+      MONGO_INITDB_ROOT_PASSWORD: ${DB_ROOT_PASSWORD:-password}
+      MONGO_INITDB_DATABASE: ${DB_NAME:-dc}
+      MONGO_BACKEND_USER: ${DB_USER:-backend}
+      MONGO_BACKEND_PASSWORD: ${DB_PASSWORD:-password}
+      MONGO_REPLICA_NAME: ${DB_REPLICA_SET:-dcrs}
+
+# Networks
+networks:
+  dc-network:
+    driver: bridge

docker-compose.yaml

@@ -5,9 +5,15 @@ services:
     build:
       context: .
       dockerfile: backend/Dockerfile
+
+    # set image name
     image: dc-backend
+
+    # set container name
+    container_name: backend
+
     ports:
-      - "3200:3200"
+      - 3200:3200
     environment:
       NODE_ENV: ${NODE_ENV}
       DB_USER: ${DB_USER:-backend}
@@ -38,9 +44,15 @@ services:
         - NEXT_PUBLIC_BACKEND_URL=${NEXT_PUBLIC_BACKEND_URL:-http://localhost:3200}
         - NEXT_PUBLIC_NEXTAUTH_URL=${NEXT_PUBLIC_NEXTAUTH_URL:-http://localhost:3000}
         - NEXT_PUBLIC_ENABLE_AZURE=${NEXT_PUBLIC_ENABLE_AZURE}
+
+    # set image name
     image: dc-frontend
+
+    # set container name
+    container_name: frontend
+
     ports:
-      - "3000:3000"
+      - 3000:3000
     environment:
       NEXT_PUBLIC_BACKEND_URL: ${NEXT_PUBLIC_BACKEND_URL:-http://localhost:3200}
       BACKEND_URL: ${BACKEND_URL:-http://backend:3200}

frontend/docker/dev/Dockerfile

@@ -0,0 +1,20 @@
+# Use Node image with version 16
+FROM node:16-alpine
+
+# Container Dir
+WORKDIR /app/frontend
+
+# Copy package.json (to install all packages)
+COPY ./package.json .
+
+# Install the packages (on the package.json)
+RUN yarn install
+
+# Copy all files
+COPY ./ .
+
+# Export the port used by Next.js
+EXPOSE 3000
+
+# Run uarn dev (as you do via terminal)
+CMD ["yarn", "dev"]

frontend/next.config.js

@@ -10,6 +10,13 @@ module.exports = {
   experimental: {
     outputStandalone: true,
   },
+  webpackDevMiddleware: (config) => {
+    config.watchOptions = {
+      poll: 1000,
+      aggregateTimeout: 300,
+    };
+    return config;
+  },
   webpack(config) {
     config.plugins.push(new webpack.EnvironmentPlugin(process.env));