diff --git a/README.md b/README.md index 0fb31a2..cdb5c90 100644 --- a/README.md +++ b/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 diff --git a/client/Dockerfile.dev b/client/Dockerfile.dev new file mode 100644 index 0000000..123230c --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/devproxy/Dockerfile b/devproxy/Dockerfile new file mode 100644 index 0000000..3f73ccd --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/devproxy/devproxy.conf b/devproxy/devproxy.conf new file mode 100644 index 0000000..fa696b9 --- /dev/null +++ b/devproxy/devproxy.conf @@ -0,0 +1,18 @@ +# +# Simple Apache configuration to pretend to be Shibboleth. +# + +ServerName localhost:5050 + + + 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] + + \ No newline at end of file diff --git a/devproxy/env.client b/devproxy/env.client new file mode 100644 index 0000000..e9d1d67 --- /dev/null +++ b/devproxy/env.client @@ -0,0 +1,2 @@ +REACT_APP_BACKEND_URL="http://localhost:5050" +PORT=3001 \ No newline at end of file diff --git a/devproxy/env.server b/devproxy/env.server new file mode 100644 index 0000000..8eed5c9 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/devproxy/whitelist b/devproxy/whitelist new file mode 100644 index 0000000..9995e3b --- /dev/null +++ b/devproxy/whitelist @@ -0,0 +1 @@ +utorid \ No newline at end of file diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml new file mode 100644 index 0000000..de6b253 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/docker-compose.override.yml b/docker-compose.override.yml new file mode 100644 index 0000000..f7fc5f9 --- /dev/null +++ b/docker-compose.override.yml @@ -0,0 +1,7 @@ +services: + frontend: + env_file: + - ./client/.env + voteapi: + env_file: + - ./server/.env \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 5808cec..4b21084 100644 --- a/docker-compose.yml +++ b/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 diff --git a/nginx.conf b/nginx.conf index 117b324..3c0fa36 100644 --- a/nginx.conf +++ b/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/; } diff --git a/server/Dockerfile.dev b/server/Dockerfile.dev new file mode 100644 index 0000000..1518bca --- /dev/null +++ b/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"] +