reworked the docker setup to properly containerize frontend and backend

Author: Iain05

.project

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <projectDescription>
-	<name>project-meriadoc-gradmap</name>
+	<name>project-meriadoc-gradmap-UBCGradMap</name>
 	<comment>Project project-meriadoc-gradmap created by Buildship.</comment>
 	<projects>
 	</projects>

Dockerfile

@@ -12,18 +12,6 @@ RUN apt-get install -y wget unzip dos2unix
 # ENV GRADLE_HOME=/opt/gradle/gradle-8.11.1
 # ENV PATH=$PATH:$GRADLE_HOME/bin 
 
-RUN apt-get install -y nodejs npm
-
-WORKDIR /gradmap/frontend
-
-COPY frontend/package*.json ./
-
-RUN npm install
-
-# Install nginx
-RUN apt-get install -y nginx
-
-
 ENV PORT=5173
 EXPOSE 5173 8080 80
 
@@ -37,29 +25,14 @@ WORKDIR /gradmap/app
 WORKDIR /gradmap/frontend 
 
 # Quickly change the code to make it point to the proper endpoint
-RUN sed -i "s/dev_yes/dev_no/g" src/Course.tsx
-
-# Build the project
-RUN npm run build
-
-# Move it to the right place
-RUN rm -rf /var/www/html
-RUN mkdir /var/www/html
-RUN mv dist/* /var/www/html
-
-# Configure nginx
-RUN cp nginx.conf /etc/nginx/sites-available/server.conf
-RUN ln -s /etc/nginx/sites-available/server.conf /etc/nginx/sites-enabled/
-RUN unlink /etc/nginx/sites-enabled/default
+# RUN sed -i "s/dev_yes/dev_no/g" src/Course.tsx
 
 RUN alias scrape="./gradlew runScraperNoCache"
 
 WORKDIR /gradmap 
-RUN ./gradlew clean
-
-
-RUN chmod +x ./runner.sh
-RUN sed -i "s/^M$//" ./runner.sh
-RUN dos2unix runner.sh
-CMD ["./runner.sh"]
-# CMD nginx
+# RUN ./gradlew clean
+#
+# RUN chmod +x ./runner.sh
+# RUN sed -i "s/^M$//" ./runner.sh
+# RUN dos2unix runner.sh
+CMD ["./gradlew", "clean", "run"]

docker-compose.yml

@@ -1,7 +1,20 @@
-version: '3.8'
 services:
-  gradmap:
+  backend:
     build: ./
+    restart: always
+    networks:
+      - app-network
+  
+  frontend:
+    build: ./frontend
+    restart: always
     ports:
-      - 5173:80
+      - "80:80"
+    networks:
+      - app-network
+    depends_on:
+      - backend
 
+networks:
+  app-network:
+    driver: bridge

frontend/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:20-slim as build
+
+
+WORKDIR /usr/app
+
+COPY . /usr/app
+
+RUN npm i
+
+
+RUN npm run build
+
+FROM nginx:alpine3.18-slim
+
+EXPOSE 80
+
+COPY ./default.conf /etc/nginx/conf.d/default.conf
+
+COPY --from=build /usr/app/dist /usr/share/nginx/html

frontend/nginx.conf frontend/default.conffrontend/nginx.conf renamed to frontend/default.conf

@@ -4,15 +4,17 @@ server {
 
         server_name _;
 
-        location /api {
-            proxy_pass http://localhost:8080/api;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        location /api/ {
+            proxy_pass http://backend:8080/api/;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
             proxy_set_header X-Forwarded-Proto $scheme;
             proxy_set_header X-Forwarded-Port $server_port;
         }
 
         location / {
-                root   /var/www/html;
-                index  index.html;
+                try_files $uri $uri/ /index.html;
         }
 }

frontend/src/Course.tsx

@@ -32,7 +32,7 @@ export interface Position {
 }
 
 // The production build script changes this to dev_no
-export const DEVELOPMENT = "dev_yes";
+export const DEVELOPMENT = "dev_no";
 //export let API_ENDPOINT = import.meta.env.BASE_URL;
 export let API_ENDPOINT = "";
 

frontend/vite.config.ts

@@ -4,4 +4,14 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    port: 5173,
+    host: '0.0.0.0',
+    proxy: {
+      '/api': 'http://localhost:8080',
+    },
+    preview: {
+      port: 5173,
+    }
+  }
 })