prepare production dockerfiles and env

ReactTool/backend/Dockerfile

@@ -6,10 +6,10 @@ COPY Pipfile Pipfile.lock ./
 
 RUN pip install pipenv && \
     pipenv install --system --deploy && \
-    pip install flask-cors
+    pip install flask-cors tinydb
 
-# Create necessary directories for data storage
-RUN mkdir -p /app/surveys/quiz
+# Create directory for database
+RUN mkdir -p /app/data
 
 COPY . .
 

ReactTool/backend/app.py

@@ -14,12 +14,17 @@ import pandas as pd
 import db_conf
 from flask import send_file
 from flask_cors import CORS
+from tinydb import TinyDB
 #from flask_mail import Mail, Message
 #import firebase_admin
 #from firebase_admin import credentials, firestore, initialize_app, firebase
 
 app = Flask(__name__, static_folder='../frontend/build', static_url_path='/')
 CORS(app)  # Add this line
+
+db = TinyDB('/app/data/responses.json')
+responses_table = db.table('responses')
+
 app.config['MYSQL_DATABASE_HOST'] = db_conf.host
 app.config['MYSQL_DATABASE_USER'] = db_conf.user
 app.config['MYSQL_DATABASE_PASSWORD'] = db_conf.password
@@ -105,10 +110,11 @@ def record_responses_to_db():
     # msg = Message("Quiz Response for " + str(session_id),sender='minivlat@gmail.com', recipients=['minivlat@gmail.com'])
     # msg.body = data_send
     # mail.send(msg)
-    fname = str(session_id)+'.txt'
-    fname = './surveys/quiz/' + fname
-    with open(fname, 'w+') as test:
-        test.write(json.dumps(data) + "\n")
+    # fname = str(session_id)+'.txt'
+    # fname = './surveys/quiz/' + fname
+    responses_table.insert(data)
+    # with open(fname, 'w+') as test:
+    #     test.write(json.dumps(data) + "\n")
 
     print('TODO: Record quiz responses into a file or DB')
     print('Collected quiz data: ', data)

ReactTool/frontend/.env

@@ -0,0 +1 @@
+REACT_APP_API_URL=http://localhost:8000

ReactTool/frontend/.env.production

@@ -0,0 +1 @@
+REACT_APP_API_URL=https://mini-vlat-ua.duckdns.org/api

ReactTool/frontend/Dockerfile.prod

@@ -0,0 +1,14 @@
+# ReactTool/frontend/Dockerfile.prod
+FROM node:16 as build
+
+WORKDIR /app
+COPY package*.json ./
+COPY yarn.lock ./
+
+RUN yarn install
+
+COPY . .
+RUN yarn build
+
+FROM nginx:alpine
+COPY --from=build /app/build /usr/share/nginx/html

ReactTool/frontend/src/pages/tutorial.js

@@ -31,7 +31,7 @@ class Tutorial extends Component {
 
     componentDidMount() {
 
-        fetch('http://localhost:8000/new_session_id', {
+        fetch(`${process.env.REACT_APP_API_URL}/new_session_id`, {
             headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
             method: 'POST',
             body: JSON.stringify({

ReactTool/frontend/src/pages/visualization_quiz.js

@@ -178,7 +178,7 @@ class VisQuiz extends Component {
 
     on_survey_click() {
 
-        fetch('http://localhost:8000/record_responses_to_db', {
+        fetch(`${process.env.REACT_APP_API_URL}//record_responses_to_db`, {
             headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
             method: 'POST',
             body: JSON.stringify({

docker-compose.prod.yml

@@ -0,0 +1,61 @@
+# docker-compose.prod.yml
+version: '3.8'
+
+services:
+  traefik:
+    image: traefik:v2.10
+    command:
+      - "--api.insecure=false"
+      - "--providers.docker=true"
+      - "--providers.docker.exposedbydefault=false"
+      - "--entrypoints.web.address=:80"
+      - "--entrypoints.websecure.address=:443"
+      - "--certificatesresolvers.myresolver.acme.tlschallenge=true"
+      - "--certificatesresolvers.myresolver.acme.email=ptrvtch@protonmail.com"
+      - "--certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json"
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock:ro"
+      - "./letsencrypt:/letsencrypt"
+    networks:
+      - web
+
+  frontend:
+    build:
+      context: ./ReactTool/frontend
+      args:
+        - NODE_ENV=production
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.frontend.rule=Host(`mini-vlat-ua.duckdns.org`)"
+      - "traefik.http.routers.frontend.entrypoints=websecure"
+      - "traefik.http.routers.frontend.tls.certresolver=myresolver"
+      - "traefik.http.services.frontend.loadbalancer.server.port=80"
+    networks:
+      - web
+    depends_on:
+      - backend
+
+  backend:
+    build:
+      context: ./ReactTool/backend
+    volumes:
+      - ./data/db:/app/data
+    environment:
+      - FLASK_ENV=production
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.backend.rule=Host(`mini-vlat-ua.duckdns.org`) && PathPrefix(`/api`)"
+      - "traefik.http.routers.backend.entrypoints=websecure"
+      - "traefik.http.routers.backend.tls.certresolver=myresolver"
+      - "traefik.http.services.backend.loadbalancer.server.port=5000"
+      - "traefik.http.middlewares.backend-strip.stripprefix.prefixes=/api"
+      - "traefik.http.routers.backend.middlewares=backend-strip@docker"
+    networks:
+      - web
+
+networks:
+  web:
+    driver: bridge

docker-compose.yml

@@ -1,20 +1,20 @@
+# docker-compose.yml (development)
 version: '3.8'
-
 services:
   frontend:
     build: 
       context: ./ReactTool/frontend
+      args:
+        - NODE_ENV=development
     ports:
       - "3000:3000"
     volumes:
       - ./ReactTool/frontend:/app
       - /app/node_modules
     environment:
-      - REACT_APP_BACKEND_URL=http://localhost:8000
+      - NODE_ENV=development
     depends_on:
       - backend
-    networks:
-      - app-network
 
   backend:
     build:
@@ -23,14 +23,6 @@ services:
       - "8000:5000"
     volumes:
       - ./ReactTool/backend:/app
-      - ./data/surveys/quiz:/app/surveys/quiz
+      - ./data/db:/app/data
     environment:
-      - FLASK_APP=app.py
       - FLASK_ENV=development
-      - PYTHONUNBUFFERED=1
-    networks:
-      - app-network
-
-networks:
-  app-network:
-    driver: bridge