Revamp dev setup to run entirely inside Docker

Author: embeddedt

README.md

@@ -141,86 +141,11 @@ docker-compose up --build -d
 
 ### Running the app (Locally/Debugging Purposes)
 
-#### Mongo and Redis Setup
+1. Run `yarn install` in the `client` and `server` directories.
+1. Run `docker compose -f docker-compose.yml -f docker-compose.dev.yml up -V --build` to start the development containers. The client will be running on http://localhost:5050 and the server will be listening on port 5001. Editing files should work as expected.
 
-1. Open the `docker-compose.yml` file and comment out all services except `caching` and `mongodb`
-
-2. Running Redis and Mongo
-
-```
-docker-compose up --build -d
-```
-
-#### Client Setup
-
-1. Setting up the client `.env` file (Placed in the root of your `client` folder)
-
-```
-REACT_APP_BACKEND_URL="http://localhost:3001"
-```
-
-2. Setting up `axios.ts`
-
-> Note: Since we're running poll voting app locally, we'll need to provide some extra information that normally Shibboleth would provide to us.
-
-> Your `axios.ts` file should look like the following:
-
-```
-export const instance = axios.create({
-  headers: { utorid: "utorid" },
-  baseURL: `${process.env.REACT_APP_BACKEND_URL}`,
-});
-```
-
-3. Setting up `socket.ts`
-
-> Note: Since we're running poll voting app locally, we'll need to provide some extra information that normally Shibboleth would provide to us.
-
-> Your `socket.ts` file should look like the following:
-
-```
-export const socket = io(`${process.env.REACT_APP_BACKEND_URL}`, {
-  withCredentials: true,
-  extraHeaders: { utorid: "utorid" }
-});
-```
-
-4. Running the client
-
-```
-yarn run start
-```
-
-#### Server Setup 
-
-1. Add instructor Utorid's to your whitelist file. It should be placed at the root of the `server` folder.
-
-> Your whitelist file should be named "whitelist" and should look like the following...
-
-```
-utorid1
-utorid2
-utorid3
-...
-```
-
-2. Setting up the server `.env` file (Placed in the root of your `server` folder)
-
-```
-PPORT=3001
-MONGODB_URL="mongodb://localhost:27018/quiz"
-FRONTEND_URL="http://localhost:3000"
-REDIS_URL="redis://default:password@localhost:6379"
-WHITELIST=../whitelist
-```
-
-3. Running the server
-
-```
-yarn run start
-```
-
-The client and server will be listening and serving on port `3000` and `3001` respectively.
+When the app runs in dev, all of the same containers used in production are used,
+plus an extra Apache container that simulates the production proxy running Shibboleth.
 
 ### Updating the App
 

client/Dockerfile.dev

@@ -0,0 +1,6 @@
+FROM node:16
+ARG REACT_APP_BACKEND_URL
+WORKDIR /frontend
+COPY ./package.json ./yarn.lock .
+RUN yarn install --ignore-scripts --frozen-lockfile
+CMD ["yarn", "run", "start"]

devproxy/Dockerfile

@@ -0,0 +1,6 @@
+FROM rockylinux:9
+
+RUN yum update -y && yum install -y httpd && yum clean all
+
+COPY devproxy.conf /etc/httpd/conf.d/
+ENTRYPOINT ["/usr/sbin/httpd", "-DFOREGROUND"]

devproxy/devproxy.conf

@@ -0,0 +1,18 @@
+#
+# Simple Apache configuration to pretend to be Shibboleth.
+#
+
+ServerName localhost:5050
+
+<VirtualHost *:80>
+  ProxyPass / http://nginx:80/
+  ProxyPassReverse / http://nginx:80/
+  Header add utorid "utorid"
+  RequestHeader set utorid "utorid"
+
+  # for websockets (needed in prod too)
+  RewriteEngine On
+  RewriteCond %{HTTP:Upgrade} =websocket [NC]
+  RewriteRule /(.*) ws://nginx:80/$1 [P,L] 
+
+</VirtualHost>

devproxy/env.client

@@ -0,0 +1,2 @@
+REACT_APP_BACKEND_URL="http://localhost:5050"
+PORT=3001

devproxy/env.server

@@ -0,0 +1,5 @@
+PORT=5001
+MONGODB_URL="mongodb://mongodb:27017/quiz"
+FRONTEND_URL="http://localhost:5050"
+REDIS_URL="redis://default:password@redis:6379"
+WHITELIST=../whitelist

devproxy/whitelist

@@ -0,0 +1 @@
+utorid

docker-compose.dev.yml

@@ -0,0 +1,36 @@
+
+services:
+  frontend:
+    volumes:
+      - ./client:/frontend
+      - /frontend/node_modules
+      - ./devproxy/env.client:/frontend/.env
+    build:
+      dockerfile: Dockerfile.dev
+    env_file:
+      - ./devproxy/env.client
+  voteapi:
+    volumes:
+      - ./server:/api
+      - /api/node_modules
+      - ./devproxy/env.server:/api/.env
+      - ./devproxy/whitelist:/api/whitelist
+    build:
+      dockerfile: Dockerfile.dev
+    env_file:
+      - ./devproxy/env.server
+  devproxy:
+    container_name: devproxy
+    build:
+      context: ./devproxy
+      dockerfile: Dockerfile
+    restart: unless-stopped
+    ports:
+      - "5050:80"
+    networks:
+      backend:
+        aliases:
+          - devproxy
+    depends_on:
+      - frontend
+      - voteapi

docker-compose.override.yml

@@ -0,0 +1,7 @@
+services:
+  frontend:
+    env_file:
+      - ./client/.env
+  voteapi:
+    env_file:
+      - ./server/.env

docker-compose.yml

@@ -44,8 +44,6 @@ services:
       - caching
     ports:
       - "5001:5001"
-    env_file:
-      - ./server/.env
     environment:
       - TZ=America/New_York
 
@@ -63,8 +61,6 @@ services:
           - frontend
     ports:
       - "3001:3001"
-    env_file:
-      - ./client/.env
 
   nginx-proxy:
     container_name: nginx

nginx.conf

@@ -6,6 +6,14 @@ http {
         location / {
             proxy_pass http://frontend:3001;
         }
+        location /sockjs-node {
+            proxy_pass http://frontend:3001;
+            proxy_redirect off;
+
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+        }
         location /api/ {
             proxy_pass http://voteapi:5001/;
         }

server/Dockerfile.dev

@@ -0,0 +1,6 @@
+FROM node:16
+WORKDIR /api
+COPY ./package.json ./yarn.lock .
+RUN yarn install --ignore-scripts --frozen-lockfile
+CMD ["yarn", "run", "start"]
+