phase2 --------- partial 4

zubhub_backend/deploy_backend.sh

@@ -6,6 +6,6 @@ cp -r zubhub/zubhub_backend/ zubhub_backend/
 rm -rf zubhub/ zubhub_backend/.env.example
 cd zubhub_backend
 docker-compose down
-docker-compose up -d --build
+docker-compose -f ./docker-compose.prod.yml up -d --build
 echo "Updated backend"
 # EOT

zubhub_backend/docker-compose.prod.yml

@@ -0,0 +1,124 @@
+version: "3.3"
+
+services:
+  web:
+    env_file: .env
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    command: /start
+    restart: on-failure
+    environment:
+      - ENVIRONMENT=${ENVIRONMENT}
+      - SECRET_KEY:${SECRET_KEY}
+      - DEBUG:${DEBUG}
+      - POSTGRES_NAME=${POSTGRES_NAME}
+      - POSTGRES_USER=${POSTGRES_USER}
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
+      - POSTGRES_HOST=${POSTGRES_HOST}
+      - SENDGRID_API_KEY=${SENDGRID_API_KEY}
+    volumes:
+      - .:/zubhub_backend
+    ports:
+      - 8000
+    depends_on:
+      - db
+      - rabbitmq
+
+  db:
+    env_file: .env
+    image: postgres:11
+    restart: on-failure
+    environment:
+      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
+    volumes:
+      - postgres_data:/var/lib/postgresql/data/
+    ports:
+      - 5432
+
+  reverse-proxy:
+    image: valian/docker-nginx-auto-ssl:1.0.0
+    container_name: reverse-proxy
+    restart: on-failure
+    ports:
+      - 80:80
+      - 443:443
+    volumes:
+      - ./.ssl-data:/etc/resty-auto-ssl
+    environment:
+      ALLOWED_DOMAINS: "(api|www.api|rabbitmq|flower|prometheus).zubhub.unstructured.studio"
+      SITES:
+        "api.zubhub.unstructured.studio=web:8000;www.api.zubhub.unstructured.studio=web:8000;\
+        rabbitmq.zubhub.unstructured.studio=rabbitmq:15672;flower.zubhub.unstructured.studio=flower:5555;\
+        prometheus.zubhub.unstructured.studio=prometheus:9090"
+      FORCE_HTTPS: "true"
+    depends_on:
+      - web
+      - rabbitmq
+      - flower
+      - prometheus
+
+  rabbitmq:
+    env_file: .env
+    image: rabbitmq:3-management
+    restart: on-failure
+    ports:
+      - 5672
+      - 15672
+
+  celery_worker:
+    env_file: .env
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    image: zubhub_celery_worker
+    command: /start-celeryworker
+    restart: on-failure
+    volumes:
+      - .:/zubhub_backend
+    depends_on:
+      - rabbitmq
+      - db
+
+  flower:
+    env_file: .env
+    build:
+      context: .
+      dockerfile: ./Dockerfile
+    image: zubhub_celery_flower
+    ports:
+      - 5555
+    command: /start-flower
+    restart: on-failure
+    volumes:
+      - .:/zubhub_backend
+    depends_on:
+      - celery_worker
+      - rabbitmq
+      - db
+
+  prometheus:
+    image: prom/prometheus
+    ports:
+      - 9090
+    command:
+      - --config.file=/etc/prometheus/prometheus.yml
+    restart: on-failure
+    volumes:
+      - ./prometheus.yml:/etc/prometheus/prometheus.yml:ro
+    depends_on:
+      - cadvisor
+
+  cadvisor:
+    image: google/cadvisor
+    container_name: cadvisor
+    restart: on-failure
+    volumes:
+      - /:/rootfs:ro
+      - /var/run:/var/run:rw
+      - /sys:/sys:ro
+      - /var/lib/docker/:/var/lib/docker:ro
+
+volumes:
+  postgres_data:
+  .ssl-data:

zubhub_backend/docker-compose.yml

@@ -36,28 +36,6 @@ services:
     ports:
       - 5432:5432
 
-  reverse-proxy:
-    image: valian/docker-nginx-auto-ssl:1.0.0
-    container_name: reverse-proxy
-    restart: on-failure
-    ports:
-      - 80:80
-      - 443:443
-    volumes:
-      - ./.ssl-data:/etc/resty-auto-ssl
-    environment:
-      ALLOWED_DOMAINS: "(api|www.api|rabbitmq|flower|prometheus).zubhub.unstructured.studio"
-      SITES:
-        "api.zubhub.unstructured.studio=web:8000;www.api.zubhub.unstructured.studio=web:8000;\
-        rabbitmq.zubhub.unstructured.studio=rabbitmq:15672;flower.zubhub.unstructured.studio=flower:5555;\
-        prometheus.zubhub.unstructured.studio=prometheus:9090"
-      FORCE_HTTPS: "true"
-    depends_on:
-      - web
-      - rabbitmq
-      - flower
-      - prometheus
-
   rabbitmq:
     env_file: .env
     image: rabbitmq:3-management
@@ -121,4 +99,3 @@ services:
 
 volumes:
   postgres_data:
-  .ssl-data:

zubhub_frontend/zubhub/.prettierrc.yaml

@@ -0,0 +1,10 @@
+printWidth: 80
+tabWidth: 2
+useTabs: false
+semi: true
+singleQuote: true
+trailingComma: all
+bracketSpacing: true
+jsxBracketSameLine: false
+arrowParens: avoid
+requirePragma: false

zubhub_frontend/zubhub/Dockerfile

@@ -13,6 +13,6 @@ RUN npm run build
 FROM nginx:stable-alpine
 COPY --from=build /zubhub_frontend/build /usr/share/nginx/html
 # new
-COPY nginx/default.conf /etc/nginx/conf.d/default.conf
-EXPOSE 80
+COPY nginx/dev/default.conf /etc/nginx/conf.d/default.conf
+EXPOSE 3000
 CMD ["nginx", "-g", "daemon off;"]

zubhub_frontend/zubhub/Dockerfile.prod

@@ -0,0 +1,18 @@
+# build environment
+FROM node:13.12.0-alpine as build
+WORKDIR /zubhub_frontend
+ENV PATH /zubhub_frontend/node_modules/.bin:$PATH
+COPY package.json ./
+COPY package-lock.json ./
+RUN npm ci --silent
+RUN npm install react-scripts@3.4.1 -g --silent
+COPY . ./
+RUN npm run build
+
+# production environment
+FROM nginx:stable-alpine
+COPY --from=build /zubhub_frontend/build /usr/share/nginx/html
+# new
+COPY nginx/prod/default.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

zubhub_frontend/zubhub/deploy_frontend.sh

@@ -1,12 +1,23 @@
 #! /bin/bash
 
+echo "copying .env file and ssl folder"
 mv zubhub_frontend/zubhub/.env zubhub/zubhub_frontend/zubhub/.env
 mv zubhub_frontend/zubhub/.ssl-data zubhub/zubhub_frontend/zubhub/
+echo "done copying .env file and ssl folder"
+
+echo "removing unneccessary files and folders"
 rm -rf zubhub_frontend
 cp -r zubhub/zubhub_frontend/ zubhub_frontend/
 rm -rf zubhub/ zubhub_frontend/zubhub/.env.example
+rm -rf zubhub/ zubhub_frontend/zubhub/Dockerfile
+rm -rf zubhub/ zubhub_frontend/zubhub/docker-compose.yml
+rm -rf zubhub/ zubhub_frontend/zubhub/nginx/dev
+echo "done removing unneccessary files and folders"
+
 cd zubhub_frontend/zubhub/
+
+echo "stopping and rebuilding the containers"
 docker-compose down
-docker-compose up -d --build
+docker-compose -f ./docker-compose.prod.yml up -d --build
 echo "Updated frontend"
 # EOT

zubhub_frontend/zubhub/docker-compose.prod.yml

@@ -0,0 +1,32 @@
+version: "3.3"
+
+services:
+  zubhub_frontend:
+    container_name: zubhub_frontend
+    build:
+      context: .
+      dockerfile: Dockerfile.prod
+    volumes:
+      - ./nginx/prod/default.conf:/etc/nginx/conf.d/default.conf
+    restart: on-failure
+    ports:
+      - "80"
+
+  reverse-proxy:
+    image: valian/docker-nginx-auto-ssl:1.0.0
+    container_name: reverse-proxy
+    restart: on-failure
+    ports:
+      - 80:80
+      - 443:443
+    volumes:
+      - ./.ssl-data:/etc/resty-auto-ssl
+    environment:
+      ALLOWED_DOMAINS: "(zubhub|www.zubhub).unstructured.studio"
+      SITES: "zubhub.unstructured.studio=zubhub_frontend;www.zubhub.unstructured.studio=zubhub_frontend"
+      FORCE_HTTPS: "true"
+    depends_on:
+      - zubhub_frontend
+
+volumes:
+  .ssl-data:

zubhub_frontend/zubhub/docker-compose.yml

@@ -7,26 +7,7 @@ services:
       context: .
       dockerfile: Dockerfile
     volumes:
-      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
+      - ./nginx/dev/default.conf:/etc/nginx/conf.d/default.conf
     restart: on-failure
     ports:
-      - "8080:80"
-
-  reverse-proxy:
-    image: valian/docker-nginx-auto-ssl:1.0.0
-    container_name: reverse-proxy
-    restart: on-failure
-    ports:
-      - 80:80
-      - 443:443
-    volumes:
-      - ./.ssl-data:/etc/resty-auto-ssl
-    environment:
-      ALLOWED_DOMAINS: "(zubhub|www.zubhub).unstructured.studio"
-      SITES: "zubhub.unstructured.studio=zubhub_frontend;www.zubhub.unstructured.studio=zubhub_frontend"
-      FORCE_HTTPS: "true"
-    depends_on:
-      - zubhub_frontend
-
-volumes:
-  .ssl-data:
+      - "3000:3000"

zubhub_frontend/zubhub/nginx/dev/default.conf

@@ -0,0 +1,33 @@
+map $sent_http_content_type $expires {
+  default off;
+  text/html epoch;
+  text/css max;
+  application/javascript max;
+  ~image/ max;
+}
+server {
+  listen 3000;
+  server_name localhost;
+
+  gzip on;
+  gzip_min_length 1000;
+  gzip_buffers 4 32k;
+  gzip_proxied any;
+  gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
+  gzip_vary on;
+  gzip_disable “MSIE [1–6]\.(?!.*SV1)”;
+  access_log /var/log/nginx/access.log;
+  error_log /var/log/nginx/error.log;
+
+  location / {
+    root /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+  }
+
+  error_page   500 502 503 504  /50x.html;
+
+   location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}

zubhub_frontend/zubhub/package.json

@@ -11,6 +11,7 @@
     "@testing-library/react": "^11.1.2",
     "@testing-library/user-event": "^12.2.2",
     "aws-sdk": "^2.813.0",
+    "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "formik": "^2.2.5",
     "nanoid": "^3.1.20",
@@ -32,7 +33,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "pretty": "prettier --config ./.prettierrc.yaml --write \"src/**/*.{js,jsx}\""
   },
   "eslintConfig": {
     "extends": [
@@ -51,5 +53,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "2.2.1"
   }
 }