Add Dockerfiles and development Docker Compose script

Author: tymzd

client/.dockerignore

@@ -0,0 +1 @@
+node_modules

client/Dockerfile

@@ -0,0 +1,22 @@
+# ---------------------------------------------------------------------------- #
+#                                Stage 1 (Build)                               #
+# ---------------------------------------------------------------------------- #
+FROM node:18-alpine AS builder
+
+WORKDIR /app
+
+COPY package.json .
+RUN yarn install
+
+COPY . .
+
+RUN ["yarn", "build-docker-compose"]
+
+# ---------------------------------------------------------------------------- #
+#                                Stage 2 (Serve)                               #
+# ---------------------------------------------------------------------------- #
+
+FROM nginx:1.23-alpine
+
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY --from=builder /app/build /app/build

client/nginx.conf

@@ -0,0 +1,17 @@
+# It's necessary to have an `events` directive, even if it's just empty.
+# Source: https://stackoverflow.com/questions/54481423/nginx-startup-prompt-emerg-no-events-section-in-configuration.
+events {}
+http {
+    server {
+        root /app/build;
+        index index.html;
+
+        location / {
+            # This `include` directive is necessary for correctly loading CSS
+            # files.
+            # Source: https://stackoverflow.com/questions/10075304/nginx-fails-to-load-css-files.
+            include /etc/nginx/mime.types;
+            try_files $uri /index.html;    
+        }
+    }
+}

client/package.json

@@ -45,8 +45,9 @@
     "socket.io-client": "^2.3.0"
   },
   "scripts": {
-    "start": "NODE_ENV=development react-scripts start",
-    "build": "NODE_ENV=production react-scripts build",
+    "start": "REACT_APP_ENVIRONMENT=development react-scripts start",
+    "build": "REACT_APP_ENVIRONMENT=production react-scripts build",
+    "build-docker-compose": "REACT_APP_ENVIRONMENT=docker react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

client/src/.env

@@ -3,14 +3,15 @@ export const PORT = 5000;
 // Change back to "/api" on deployment. Change IP address between
 // http://localhost:5000/api and https://techsuite.dev/api on dev/deployment
 // export const BASE_URL = "https://techsuite.dev/api";
-export const BASE_URL = process.env.NODE_ENV === 'production' ? "https://techsuite.dev/api" : `http://localhost:${PORT}/api`;
+// export const BASE_URL = `http://localhost:${PORT}/api`;
+export const BASE_URL = process.env.REACT_APP_ENVIRONMENT === 'production' ? "https://techsuite.dev/api" : `http://localhost:${PORT}/api`;
 
 export const GLOBAL_SOCKET_NAMESPACE = "/ts-socket";
 export const PORT_EXT = `:${PORT}`;   // Change back to empty string on deployment
 
 // Change from: http:// window.location.hostname + PORT_EXT + GLOBAL_SOCKET_NAMESPACE
 //        to:   https://techsuite.dev` + GLOBAL_SOCKET_NAMESPACE
 // export const SOCKET_URI = `http://` + window.location.hostname + PORT_EXT + GLOBAL_SOCKET_NAMESPACE;
-export const SOCKET_URI = process.env.NODE_ENV === 'production' ?
-    `https://techsuite.dev` + GLOBAL_SOCKET_NAMESPACE
+export const SOCKET_URI = process.env.REACT_APP_ENVIRONMENT === 'production'
+    ? `https://techsuite.dev` + GLOBAL_SOCKET_NAMESPACE
     : `http://` + window.location.hostname + PORT_EXT + GLOBAL_SOCKET_NAMESPACE;

client/src/constants/api-routes.js

@@ -0,0 +1,42 @@
+# This docker-compose file is meant to be run for development and serves as a
+# guideline for a production deployment.
+version: '3.8'
+
+# Techsuite consists of 3 services:
+#  1. React client at port 3000.
+#  2. Flask REST API and websocket server at port 5000.
+#  3. PostgreSQL database server at port 4000.
+services:
+    client:
+        build:
+            context: client
+            dockerfile: Dockerfile
+        ports:
+            - 3000:80
+    db:
+        build:
+            context: server
+            dockerfile: Dockerfile.db
+        environment:
+            # These credentials are used for creating the db superuser. They're not
+            # the credentials we use from the API side.
+            POSTGRES_PASSWORD: 1989
+            POSTGRES_USER: admin
+        ports:
+            - 5432:5432
+        volumes:
+            - db-data:/var/lib/postgres/data
+    api:
+        build:
+            context: server
+            dockerfile: Dockerfile.api
+        depends_on:
+            - db
+        environment:
+            PORT: 5000
+            DATABASE_URI: postgresql://tim:1989@db:5432/techsuite
+            BASE_URI: http://localhost:5000/api
+        ports:
+            - 5000:5000
+volumes:
+    db-data:

docker-compose.yml

@@ -0,0 +1 @@
+venv

server/.dockerignore

@@ -0,0 +1,30 @@
+# ----------------------------------- Setup ---------------------------------- #
+FROM python:3.10-alpine
+
+WORKDIR /api
+
+COPY requirements.txt .
+
+# There are issues with installing psycopg2 on Alpine Linux (and other Linux
+# distributions).
+# See a good discussion of dependency issues: https://github.com/psycopg/psycopg2/issues/684.
+RUN apk update \
+    && apk add postgresql-dev gcc python3-dev musl-dev \
+    && pip install psycopg2 \
+    && pip install gunicorn \
+    && pip install -r requirements.txt
+
+COPY . .
+
+# -------------------------------- Production -------------------------------- #
+# Create all tables
+RUN echo "create_all()" | python3 -i src/db_manage.py 2> /dev/null
+
+# Using Gunicorn and gevent-websocket server.
+# See: 
+#  - https://flask.palletsprojects.com/en/2.2.x/deploying/gunicorn/.
+#  - https://stackoverflow.com/questions/9444405/gunicorn-and-websockets.
+WORKDIR /api/src
+
+
+CMD gunicorn -k "geventwebsocket.gunicorn.workers.GeventWebSocketWorker" -b 0.0.0.0:5000 server:app

server/Dockerfile.api

@@ -0,0 +1,13 @@
+FROM postgres:14-alpine
+
+EXPOSE 4000
+
+WORKDIR /
+
+COPY db-init.sh /docker-entrypoint-initdb.d
+
+# Create all the tables and initialise the database with a set of existing 
+# channels, users, connections, messages, etc.
+# COPY ./seeds/full-2.sql /docker-entrypoint-initdb.d
+
+# No need to override the default postgres CMD in this Dockerfile.