fix fe nginx, add nginx for be, and fe upstreams, and fix project arc…

…hitecture

backend/.dockerignore

@@ -0,0 +1 @@
+Dockerfile.backend

Dockerfile.backend → backend/Dockerfile

@@ -1,18 +1,21 @@
 # Use an official Python runtime as a parent image
 FROM python:3.8-slim
 
-# make a local directory
-RUN mkdir /backend
+# # make a local directory
+# RUN mkdir /backend
 
 # set "/backend" as the working directory from which CMD, RUN, ADD references
 WORKDIR /backend
 
-# now copy all the files in this directory to /backend
-ADD /backend/ .
+# Copy the requirements file separately to leverage Docker caching
+COPY requirements.txt /backend/
 
 # pip install the local requirements.txt
 RUN pip install -r requirements.txt
 
+# now copy all the files in this directory to /backend
+COPY . /backend/
+
 # Listen to port 5000 at runtime
 EXPOSE 5000
 

backend/app/api/__init__.py

@@ -3,4 +3,4 @@
 __package__ = "api"
 
 # Here, we initiate the registering of our /api blueprint within our flask backend application.
-api = Blueprint("api", __name__, url_prefix="/api")
+api = Blueprint("api", __name__, url_prefix="/api/v1")

backend/requirements.txt

@@ -5,7 +5,7 @@ Flask==3.0.0
 flask_cors==4.0.0
 Flask-Migrate==4.0.5
 Flask-SQLAlchemy==3.1.1
-gunicorn==21.2.0
+gunicorn==21.2.0    
 itsdangerous==2.1.2
 Jinja2==3.1.2
 joblib==1.3.2

docker-compose.yml

@@ -1,25 +1,13 @@
 # Here, it is a docker compose config file, that includes frontend, 
 # backend, and mysql services along with their environment variables.
 
-version: '2'
+version: '3'
 services:
-  frontend:
-    container_name: mental-wellbeing-fe
-    build: 
-      context: .
-      dockerfile: Dockerfile.frontend
-    ports:
-      - "80:80"
-    volumes:
-      - ./nginx:/etc/nginx/conf.d
-
   backend:
     container_name: mental-wellbeing-api
     build: 
-      context: .
-      dockerfile: Dockerfile.backend
-    ports:
-      - "5000:5000"
+      context: ./backend
+      dockerfile: Dockerfile
     volumes:
       - ./backend:/backend
     links:
@@ -51,12 +39,31 @@ services:
       - '3306'
     volumes:
       - my-db:/var/lib/mysql
-      - ./backend/db-init:/docker-entrypoint-initdb.d
+      - ./db-init:/docker-entrypoint-initdb.d
     environment:
         MYSQL_USER: sapbuffalo
         MYSQL_PASSWORD: sap
         MYSQL_ROOT_PASSWORD: root123
         MYSQL_DATABASE: sp_db
+
+  frontend:
+    container_name: mental-wellbeing-fe
+    build: 
+      context: ./frontend
+      dockerfile: Dockerfile
+    depends_on:
+      - backend
+
+  proxy:
+    container_name: mental-wellbeing-nginx
+    build:
+      context: ./nginx
+      dockerfile: Dockerfile
+    restart: always
+    ports:
+      - "80:80"
+    depends_on:
+      - frontend
 
 volumes:
   my-db:

Dockerfile.frontend → frontend/Dockerfile

@@ -5,13 +5,13 @@ FROM node:14 as build
 WORKDIR /app
 
 # Copy package.json and package-lock.json to the container
-COPY frontend/package*.json ./
+COPY ./package*.json /app
 
 # Install app dependencies
 RUN npm install
 
 # Copy the rest of the application code to the container
-COPY frontend/ .
+COPY . /app
 
 # Build the Vue.js app for production
 RUN npm run build
@@ -22,14 +22,18 @@ FROM nginx:alpine
 
 # Copy the built Vue.js app from the previous stage to place it 
 # in the nginx docker file system at a particular location
-COPY --from=build /app/dist /vue-fe
+# COPY --from=build /app/dist /vue-fe
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Remove the default nginx config
+RUN rm /etc/nginx/conf.d/default.conf
 
 # Copying the nginx config file for serving the frontend 
 # via a proxy server at a Nginx default config location
-COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./nginx/nginx.conf /etc/nginx/conf.d
 
 # Expose port 8080
-EXPOSE 80
+EXPOSE 8080
 
 # Command to run the Nginx server
 CMD ["nginx", "-g", "daemon off;"]

frontend/nginx/nginx.conf

@@ -0,0 +1,9 @@
+server {
+
+  listen 8080;
+
+  location / {
+    root   /usr/share/nginx/html;
+    try_files $uri $uri/ /index.html;
+  }
+}

frontend/src/views/Input.vue

@@ -3,7 +3,7 @@
   <div class="input">
     <h2>Input a csv file</h2>
     <div class="file-upload-container">
-      <FileUpload name="demo[]" url="http://localhost:5000/api/predict/rf" @upload="onAdvancedUpload($event)" :multiple="false" accept=".csv" :maxFileSize="1000000" class="custom">
+      <FileUpload name="demo[]" url="http://localhost/api/v1/predict/rf" @upload="onAdvancedUpload($event)" :multiple="false" accept=".csv" :maxFileSize="1000000" class="custom">
         <template #empty>
           <p>Drag and drop files here to upload.</p>
         </template>

frontend/src/views/Visualization.vue

@@ -220,7 +220,7 @@ export default {
   methods: {
     async fetchCountries(){  
         try {
-            const apiUrl = 'http://localhost:5000/api/visual/countries-list'; 
+            const apiUrl = 'http://localhost/api/v1/visual/countries-list'; 
             const response = await fetch(apiUrl, { method: 'GET' });    
 
             if (response.ok) {

nginx/Dockerfile

@@ -0,0 +1,7 @@
+FROM nginx:alpine
+
+# Remove the current default nginx config
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Copy the new nginx config to nginx container's folder
+COPY ./nginx.conf /etc/nginx/conf.d

nginx/nginx.conf

@@ -2,20 +2,36 @@
 # to serve our vue.js built frontend applciation and flask 
 # build backend application
 
+
+upstream backend {
+    # Here it tells the domain through which we 
+    # will be able to access our backend container
+    server mental-wellbeing-api:5000;
+}
+
+upstream frontend {
+    # Here it tells the domain through which we 
+    # will be able to access our frontend web container
+    server mental-wellbeing-fe:8080;
+}
+
 server {
     # This part helps nginx to listen to port 80
     listen 80;
 
-    # Here it tells the domain through which we 
-    # will be able to access our frontend web application 
-    server_name localhost;
-
     # This block of code specifies the location of the 
     # vue.js production code to the nginx proxy server to serve over the web
     location / {
-        root /vue-fe;
-        index index.html;
-        try_files $uri $uri/ /index.html;
+        proxy_pass http://frontend;
+    }
+
+    location /api/v1 {
+        proxy_pass http://backend;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
     }
 
     # This block of code handles the displaying of a