Merge pull request #35 from CS3219-AY2425S1/PEER-254-Dockerize-Frontend

PEER-254 Dockerize Frontend with Nginx

Author: cyiting

.env.local

@@ -10,14 +10,20 @@ COLLAB_EXPRESS_DB_PORT=5434
 MATCHING_PGDATA="/data/collab-db"
 MATCHING_EXPRESS_DB_PORT=5434
 
+USER_SERVICE_NAME=user-express
 USER_EXPRESS_ENV=compose
 USER_EXPRESS_PORT=9001
 
+QUESTION_SERVICE_NAME=question-express
 QUESTION_EXPRESS_ENV=compose
 QUESTION_EXPRESS_PORT=9002
 
+COLLAB_CONTAINER_NAME=collab-express
 COLLAB_EXPRESS_ENV=compose
 COLLAB_EXPRESS_PORT=9003
 
 MATCHING_EXPRESS_ENV=compose
-MATCHING_EXPRESS_PORT=9003
+MATCHING_EXPRESS_PORT=9004
+
+FRONTEND_ENV=compose
+FRONTEND_PORT=3000

docker-compose.yaml

@@ -2,82 +2,81 @@
 
 services:
   # Databases
-
   user-db:
-    hostname: "user-db"
+    hostname: 'user-db'
     image: postgres:16.4
-    container_name: "user-db"
+    container_name: 'user-db'
     build:
       context: ./backend/user/src/lib/db
     env_file:
       - ./backend/user/.env.local
     volumes:
-      - "user-db-docker:${USER_PGDATA}"
+      - 'user-db-docker:${USER_PGDATA}'
     restart: unless-stopped
     networks:
       - user-db-network
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U peerprep-user-express -d user"]
+      test: ['CMD-SHELL', 'pg_isready -U peerprep-user-express -d user']
       interval: 10s
       retries: 5
       start_period: 30s
       timeout: 10s
 
   collab-db:
-    hostname: "collab-db"
-    image: "postgres:16.4"
-    container_name: "collab-db"
+    hostname: 'collab-db'
+    image: 'postgres:16.4'
+    container_name: 'collab-db'
     build:
       context: ./backend/collaboration/src/lib/db
     env_file:
       - ./backend/collaboration/.env.local
     volumes:
-      - "collab-db-docker:/${COLLAB_PGDATA}"
+      - 'collab-db-docker:/${COLLAB_PGDATA}'
     restart: unless-stopped
     networks:
       - collab-db-network
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U peerprep-collab-express -d collab"]
+      test: ['CMD-SHELL', 'pg_isready -U peerprep-collab-express -d collab']
       interval: 10s
       retries: 5
       start_period: 30s
       timeout: 10s
 
   question-db:
-    hostname: "question-db"
+    hostname: 'question-db'
     image: postgres:16.4
-    container_name: "question-db"
+    container_name: 'question-db'
     build:
       context: ./backend/question/src/lib/db
     env_file:
       - ./backend/question/.env.local
     volumes:
-      - "question-db-docker:${QUESTION_PGDATA}"
+      - 'question-db-docker:${QUESTION_PGDATA}'
     restart: unless-stopped
     networks:
       - question-db-network
+    ports:
+      - 5433:5432
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U peerprep-qn-express -d question"]
+      test: ['CMD-SHELL', 'pg_isready -U peerprep-qn-express -d question']
       interval: 10s
       retries: 5
       start_period: 30s
       timeout: 10s
 
   # Services
-
   user-service:
-    image: "user-express"
-    container_name: "user-express"
+    image: 'user-express'
+    container_name: '${USER_SERVICE_NAME}'
     build:
       context: ./backend/user
       dockerfile: express.Dockerfile
       target: production
-      args: 
+      args:
         # For building with the correct env vars
-        - env=${USER_EXPRESS_ENV}
         - port=${USER_EXPRESS_PORT}
     ports:
-      - "9001:${USER_EXPRESS_PORT}"
+      - '9001:${USER_EXPRESS_PORT}'
     env_file:
       - ./backend/user/.env.compose
     environment:
@@ -93,11 +92,39 @@ services:
       - user-api-network
     healthcheck:
       test: wget --no-verbose --tries=1 --spider http://localhost:9001/health || exit 1
-      interval: 30s 
-      timeout: 10s   
-      retries: 5       
+      interval: 30s
+      timeout: 10s
+      retries: 5
       start_period: 5s
 
+  # Frontend
+
+  frontend:
+    container_name: 'frontend'
+    build:
+      context: ./frontend
+      dockerfile: ./frontend.Dockerfile
+      target: production
+      args:
+        - FRONTEND_PORT=${FRONTEND_PORT}
+    ports:
+      - '3000:${FRONTEND_PORT}'
+    env_file:
+      - ./frontend/.env.compose
+    environment:
+      - VITE_USER_SERVICE=http://${USER_SERVICE_NAME}:${USER_EXPRESS_PORT}
+      ##to remove localhost once integrating question
+      - VITE_QUESTION_SERVICE=http://host.docker.internal:${QUESTION_EXPRESS_PORT}
+      - FRONTEND_PORT=${FRONTEND_PORT}
+    depends_on:
+      user-service:
+        condition: service_healthy
+        restart: true
+    networks:
+      - user-api-network
+      - question-api-network
+      - collab-api-network
+
 volumes:
   # Persistent Volumes for Databases
   user-db-docker:
@@ -107,7 +134,6 @@ volumes:
   question-db-docker:
     external: true
 
-
 networks:
   # Isolated API Server Networks
   user-db-network:

frontend/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+frontend.*Dockerfile
+.dockerignore

frontend/.env.compose

@@ -0,0 +1 @@
+FRONTEND_ENV=compose

frontend/.env.docker

@@ -0,0 +1,5 @@
+FRONTEND_ENV=local
+
+VITE_USER_SERVICE=http://host.docker.internal:9001
+VITE_QUESTION_SERVICE=http://host.docker.internal:9002
+FRONTEND_PORT=3000

frontend/.env.local

@@ -1,2 +1,4 @@
-VITE_USER_SERVICE="http://localhost:9001"
-VITE_QUESTION_SERVICE="http://localhost:9002"
+FRONTEND_ENV=local
+
+VITE_USER_SERVICE=http://localhost:9001
+VITE_QUESTION_SERVICE=http://localhost:9002

frontend/README.md

@@ -1,11 +1,33 @@
-# React + TypeScript + Vite
+# Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Running with Docker (Standalone)
 
-Currently, two official plugins are available:
+1. Run this command to build:
+   ```sh
+   docker build \
+      --build-arg VITE_USER_SERVICE=http://host.docker.internal:9001 \
+      --build-arg VITE_QUESTION_SERVICE=http://host.docker.internal:9002 \
+      --build-arg FRONTEND_PORT=3000 \
+      -t frontend-app -f frontend.Dockerfile .
+   ```
+2. Run this command, from the root folder:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+   ```sh
+   make db-up
+   ```
+
+3. Run the necessary migrate and seed commands, if you haven't yet.
+
+4. Run this command to expose the container:
+   ```sh
+   docker run -p 3000:3000 --env-file ./.env.docker frontend-app
+   ```
+
+## Running with Docker-Compose (Main config)
+
+Edit the variables in the `.env.compose` file and run `make up` from the root folder.
+
+Any startup instructions will be run from `entrypoint.sh` instead.
 
 ## Expanding the ESLint configuration
 
@@ -22,7 +44,7 @@ export default tseslint.config({
       tsconfigRootDir: import.meta.dirname,
     },
   },
-})
+});
 ```
 
 - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
@@ -31,7 +53,7 @@ export default tseslint.config({
 
 ```js
 // eslint.config.js
-import react from 'eslint-plugin-react'
+import react from 'eslint-plugin-react';
 
 export default tseslint.config({
   // Set the react version
@@ -46,5 +68,5 @@ export default tseslint.config({
     ...react.configs.recommended.rules,
     ...react.configs['jsx-runtime'].rules,
   },
-})
+});
 ```

frontend/entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+envsubst '${FRONTEND_PORT} ${VITE_USER_SERVICE} ${VITE_QUESTION_SERVICE}' < /etc/nginx/nginx.conf.template > /etc/nginx/conf.d/default.conf
+
+nginx -g 'daemon off;'

frontend/frontend.Dockerfile

@@ -0,0 +1,21 @@
+FROM node:20-alpine AS build
+
+WORKDIR /app
+COPY ./package*.json ./
+RUN npm install
+COPY ./ ./
+
+RUN npm run build
+
+FROM nginx:stable-alpine AS production
+
+COPY --from=build /app/build /usr/share/nginx/html
+
+COPY ./nginx.conf.template /etc/nginx/nginx.conf.template
+COPY entrypoint.sh /usr/local/bin/
+RUN chmod +x /usr/local/bin/entrypoint.sh
+
+ARG FRONTEND_PORT
+EXPOSE ${FRONTEND_PORT}
+
+ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]

frontend/frontend.dev.Dockerfile

@@ -0,0 +1,11 @@
+FROM node:20-alpine
+
+WORKDIR /app/
+COPY ./frontend/package*.json ./
+RUN npm install
+COPY ./frontend/ ./
+
+ARG port
+EXPOSE ${port}
+
+CMD ["npm", "run", "dev", "--", "--host"]