build: Deploy on production environment (#326) (#327)

* fix: Only show assets which are not deleted

* fix: Fix Pagination bug

* build: Dockerize backend and frontend services

* build: Add CORS settings to .env files

* feat: Show IN SERVICE status in dashboard chart

* fix: Remove duplicate toggleModel method

* build: Update requirements.txt

* fix: Change health check of celery from ping to celery health

* build: Add services in docker compose to deploy in stage environment

- Add redis service
- Add script for running celery worker and beat scheduler in background
- Use gunicorn for serving django backend

* ci: Deploy frontend and backend along with dependent services

* ci: Build frontend for production

.github/workflows/prod-deploy.yml

@@ -0,0 +1,121 @@
+name: Deploy to production environment
+
+on:
+  push:
+    branches:
+      - "prod"
+
+jobs:
+
+  deploy-backend:
+    runs-on: ubuntu-latest
+    environment: prod
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Deploy on AWS EC2
+        uses: easingthemes/ssh-deploy@main
+        with:
+          SSH_PRIVATE_KEY: ${{ secrets.AWS_EC2_SSH_PRIVATE_KEY }}
+          ARGS: "-rlgoDzvc -i"
+          SOURCE: "./"
+          REMOTE_HOST: ${{ secrets.AWS_EC2_HOSTNAME }}
+          REMOTE_USER: ${{ secrets.AWS_EC2_USERNAME }}
+          TARGET: "~/asset-management/"
+          EXCLUDE: "/dist/, /node_modules/"
+          SCRIPT_BEFORE: |
+          
+            ls -a
+            
+            echo "================="
+            echo "Update"
+            echo "================="
+            sudo apt-get update -y
+            
+            echo "================="
+            echo "Upgrade"
+            echo "================="
+            sudo apt-get upgrade -y
+
+            echo "================="
+            echo "Install rsync"
+            echo "================="
+            sudo apt-get install -y rsync
+
+            echo "================="
+            echo "Create Directory"
+            echo "================="
+            mkdir -p asset-management
+
+          SCRIPT_AFTER: |
+          
+            ls -a
+
+            echo "================="
+            echo "Change current directory to exam_django"
+            echo "================="
+            cd asset-management/exam_django
+
+            echo "================="
+            echo "Remove the current .prod.env file"
+            echo "================="
+            rm -f .prod.env
+
+            echo "================="
+            echo "Add environment variables to .prod.env file"
+            echo "================="
+            echo "DJANGO_SECRET_KEY=${{ secrets.DJANGO_SECRET_KEY }}" >> .prod.env
+            echo "DEBUG_STATUS=${{ secrets.DEBUG_STATUS }}" >> .prod.env
+            echo "DB_NAME=${{ secrets.DB_NAME }}" >> .prod.env
+            echo "DB_USER=${{ secrets.DB_USER }}" >> .prod.env
+            echo "DB_PORT=${{ secrets.DB_PORT }}" >> .prod.env
+            echo "DB_PASSWORD=${{ secrets.DB_PASSWORD }}" >> .prod.env
+            echo "DB_HOST=${{ secrets.DB_HOST }}" >> .prod.env
+            echo "ALLOWED_HOSTS=${{ secrets.ALLOWED_HOSTS }}" >> .prod.env
+            echo "CORS_ORIGIN_WHITELIST=${{ secrets.CORS_ORIGIN_WHITELIST }}" >> .prod.env
+            echo "CORS_ALLOWED_ORIGINS=${{ secrets.CORS_ALLOWED_ORIGINS }}" >> .prod.env
+            echo "CELERY_BROKER_URL=${{ secrets.CELERY_BROKER_URL }}" >> .prod.env
+            echo "CELERY_RESULT_BACKEND=${{ secrets.CELERY_RESULT_BACKEND }}" >> .prod.env
+            echo "EMAIL_HOST_USER=${{ secrets.EMAIL_HOST_USER }}" >> .prod.env
+            echo "EMAIL_HOST_PASSWORD=${{ secrets.EMAIL_HOST_PASSWORD }}" >> .prod.env
+            echo "EMAIL_PORT=${{ secrets.EMAIL_PORT }}" >> .prod.env
+            echo "EMAIL_USE_TLS=${{ secrets.EMAIL_USE_TLS }}" >> .prod.env
+            echo "SENTRY_DSN=${{ secrets.SENTRY_DSN }}" >> .prod.env
+            echo "HEALTH_CHECK_APP=${{ secrets.HEALTH_CHECK_APP }}" >> .prod.env
+            echo "HEALTH_CHECK_EXTERNAL=${{ secrets.HEALTH_CHECK_EXTERNAL }}" >> .prod.env
+            echo "BACKUP_PARENT_DIR=${{ secrets.BACKUP_PARENT_DIR }}" >> .prod.env
+            echo "FULL_BACKUP_DIR=${{ secrets.FULL_BACKUP_DIR }}" >> .prod.env
+            echo "GOOGLE_API_KEY=${{ secrets.GOOGLE_API_KEY }}" >> .prod.env
+            
+            echo "================="
+            echo "Change current directory to exam_frontend"
+            echo "================="
+            cd ../exam_frontend
+
+            echo "================="
+            echo "Remove the current .env file"
+            echo "================="
+            rm -f .env
+
+            echo "================="
+            echo "Add environment variables to .env file"
+            echo "================="
+            echo "VITE_CONFIG_URL=${{ secrets.VITE_CONFIG_URL }}" >> .env
+            echo "VITE_ADD_ASSET_URL=${{ secrets.VITE_ADD_ASSET_URL }}" >> .env
+            echo "VITE_LOGIN_URL=${{ secrets.VITE_LOGIN_URL }}" >> .env
+            echo "VITE_GET_ASSET_TYPE=${{ secrets.VITE_GET_ASSET_TYPE }}" >> .env
+
+            echo "================="
+            echo "Change current directory to asset-management"
+            echo "================="
+            cd ..
+
+            echo "================="
+            echo "Start Production Deploy Script"
+            echo "================="
+            sudo chmod +x ./stage-deploy.sh
+            ./stage-deploy.sh

docker-compose.yml

@@ -66,8 +66,9 @@ services:
     container_name: stage-asset-management-frontend
     image: stage-asset-management-frontend-image
     build: ./exam_frontend/
+    entrypoint: ["bash", "entrypoint-stage.sh"]
     ports:
-      - 5173:5173
+      - 4173:4173
     restart: always
     depends_on:
       - stage-asset-management-backend-service

exam_frontend/Dockerfile

@@ -16,4 +16,7 @@ COPY . .
 
 EXPOSE 5173
 
+RUN chmod +x entrypoint-stage.sh
+EXPOSE 4173
+
 CMD ["yarn", "dev"]

exam_frontend/entrypoint-stage.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+yarn build
+
+yarn preview

exam_frontend/package.json

@@ -12,7 +12,7 @@
     "url": "https://github.com/themesberg/flowbite-react-admin-dashboard.git"
   },
   "scripts": {
-    "build": "yarn typecheck && vite build",
+    "build": "vite build",
     "dev": "vite --host",
     "format": "prettier --check --ignore-path .gitignore --write .",
     "lint": "eslint --ignore-path .gitignore .",

exam_frontend/src/components/SideDrawerComponent/SideDrawerComponentHandler.tsx

@@ -1,25 +1,27 @@
+import React, { useState } from "react";
+import SideDrawerProps from "./types";
 
-import React, { useState } from 'react';
-import SideDrawerProps from './types';
+import { Button, Drawer, Space } from "antd";
+import type { DrawerProps } from "antd";
 
-import { Button, Drawer, Space } from 'antd';
-import type { DrawerProps } from 'antd';
+const SideDrawerComponent: React.FC<SideDrawerProps> = ({
+  children,
+  buttonTextLarge,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [size, setSize] = useState<DrawerProps["size"]>();
 
-const SideDrawerComponent: React.FC<SideDrawerProps> = ({children,buttonTextLarge}) => {
-    const [open, setOpen] = useState(false);
-    const [size, setSize] = useState<DrawerProps['size']>();
-
-    const showDefaultDrawer = () => {
-      setSize('default');
-      setOpen(true);
-    };
-
-    const showLargeDrawer = () => {
-      setSize('large');
-      setOpen(true);
-    };
-
-    const onClose = () => {
-      setOpen(false);
-    };
-
+  const showDefaultDrawer = () => {
+    setSize("default");
+    setOpen(true);
+  };
+
+  const showLargeDrawer = () => {
+    setSize("large");
+    setOpen(true);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+};

exam_frontend/src/pages/authentication/Login.tsx

@@ -86,7 +86,7 @@ export default function Login() {
           <div
             className="absolute inset-0 bg-cover bg-bottom rounded-lg"
             style={{
-              backgroundImage: `url('../../../public/images/Experion.jpg')`,
+              backgroundImage: `url('/images/Experion.jpg')`,
               filter: "blur(1px)",
             }}
           ></div>
@@ -149,7 +149,7 @@ export default function Login() {
                   }
                 >
                   <img
-                    src="../../../public/images/Microsoft logo.png"
+                    src="/images/microsoft logo.png"
                     alt="Microsoft logo"
                     className="w-30 h-6 ml-2 mx-3"
                   />

stage-deploy.sh

@@ -0,0 +1,49 @@
+#!/bin/bash
+
+echo "================="
+echo "Starting Stage Deploy Script"
+echo "================="
+
+echo "================="
+echo "Update"
+echo "================="
+sudo apt-get update -y
+
+echo "================="
+echo "Upgrade"
+echo "================="
+sudo apt-get upgrade -y
+sudo apt-get install -y ca-certificates curl gnupg
+
+echo "================="
+echo "Get docker compose version"
+echo "================="
+docker compose version
+
+
+if [ $? -ne 0 ]
+then
+    echo "Docker Compose does not exit"
+
+    echo "================="
+    echo "Install docker and docker compose"
+    echo "================="
+    sudo install -m 0755 -d /etc/apt/keyrings
+    curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
+    sudo chmod a+r /etc/apt/keyrings/docker.gpg
+    echo \
+    "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian \
+    "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \
+    sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+    sudo apt-get update -y
+    sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
+fi
+
+echo "================="
+echo "Docker compose up by building in detached mode"
+echo "================="
+sudo docker compose --profile stage up --build --detach
+
+echo "================="
+echo "Successfully executed Stage Deploy Script"
+echo "================="