Kindly added nginx with the help of Klim

nulzo · Oct 30, 2023 · 8f488e8 · 8f488e8
1 parent a013620
commit 8f488e8
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 20 deletions.
diff --git a/compose.yml b/compose.yml
@@ -13,3 +13,23 @@ services:
     restart: always
     ports:
       - 4200:4200
+  server:
+    container_name: nginx
+    build: ./nginx
+    depends_on:
+      - frontend
+    restart: always
+    ports:
+      - 80:80
+  # ngrok:
+  #   image: ngrok/ngrok:latest
+  #   restart: unless-stopped
+  #   command:
+  #     - "start"
+  #     - "--all"
+  #     - "--config"
+  #     - "/etc/ngrok.yml"
+  #   volumes:
+  #     - ./ngrok.yml:/etc/ngrok.yml
+  #   ports:
+  #     - 4040:4040
diff --git a/frontend-ts/src/API/courses/useFetchCourse.tsx b/frontend-ts/src/API/courses/useFetchCourse.tsx
@@ -3,7 +3,7 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
 export default function useFetchCourse() {
   async function getCourse() {
-    const { data } = await axios.get("http://localhost:6969/api/courses/");
+    const { data } = await axios.get("/api/courses/");
     return data;
   }
   const data = useQuery({

diff --git a/frontend-ts/src/API/issues/useFetchIssue.tsx b/frontend-ts/src/API/issues/useFetchIssue.tsx
@@ -3,7 +3,7 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
 export default function useFetchIssue() {
   async function getIssue() {
-    const { data } = await axios.get("http://localhost:6969/api/issues/");
+    const { data } = await axios.get("/api/issues/");
     return data;
   }
   const data = useQuery({

diff --git a/frontend-ts/src/API/professors/useFetchProfessor.tsx b/frontend-ts/src/API/professors/useFetchProfessor.tsx
@@ -3,7 +3,7 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
 export default function useFetchProfessor() {
   async function getProfessors() {
-    const { data } = await axios.get("http://localhost:6969/api/professors/");
+    const { data } = await axios.get("/api/professors/");
     return data;
   }
   const data = useQuery({

diff --git a/frontend-ts/src/API/sections/useFetchSection.tsx b/frontend-ts/src/API/sections/useFetchSection.tsx
@@ -3,7 +3,7 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
 export default function useFetchSection() {
   async function getSection() {
-    const { data } = await axios.get("http://localhost:6969/api/sections/");
+    const { data } = await axios.get("/api/sections/");
     return data;
   }
   const data = useQuery({

diff --git a/frontend-ts/src/API/tickets/useFetchTicket.tsx b/frontend-ts/src/API/tickets/useFetchTicket.tsx
@@ -3,7 +3,7 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
 export default function useFetchTicket() {
   async function getTicket() {
-    const { data } = await axios.get("http://localhost:6969/api/tickets/");
+    const { data } = await axios.get("/api/tickets/");
     return data;
   }
   const data = useQuery({

diff --git a/frontend-ts/src/API/tutors/useFetchTutor.tsx b/frontend-ts/src/API/tutors/useFetchTutor.tsx
@@ -3,7 +3,7 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 
 export default function useFetchTutor() {
   async function getTutors() {
-    const { data } = await axios.get("http://localhost:6969/api/tutors/");
+    const { data } = await axios.get("/api/tutors/");
     return data;
   }
   const data = useQuery({

diff --git a/frontend-ts/src/components/forms/TicketForm.tsx b/frontend-ts/src/components/forms/TicketForm.tsx
@@ -295,7 +295,6 @@ export default function TicketForm() {
                             />
                             <CommandEmpty>no courses found...</CommandEmpty>
                             <CommandGroup key="course_command_group">
-
                               <ScrollArea className="h-72 rounded-md border">
                                 {courses?.data.map((course: any) => (
                                   <CommandItem

diff --git a/frontend-ts/src/views/MessageView.tsx b/frontend-ts/src/views/MessageView.tsx
@@ -1,6 +1,6 @@
 import Header from "@/components/typography/Header";
 import { AxeIcon } from "lucide-react";
-import { Avatar, Badge, Button, Carousel, Hero, Indicator } from "react-daisyui";
+import { Avatar, Badge, Carousel, Hero, Indicator } from "react-daisyui";
 
 export default function MessageView() {
   return (

diff --git a/nginx/nginx.conf b/nginx/nginx.conf
@@ -2,18 +2,22 @@
 # By default, $SERVER_NAME will be replaced with FLASK_SERVER_NAME specified in the .env file
 
 server {
-    listen *:443 ssl;
-    server_name $SERVER_NAME;
+    listen *:80;
+    server_name localhost;
 
     # TODO: Need to configure SSL and HTTPS for secure connections
-    ssl_certificate /etc/nginx/$SERVER_NAME.crt;
-    ssl_certificate_key /etc/nginx/$SERVER_NAME.key;
+    # ssl_certificate /etc/nginx/$SERVER_NAME.crt;
+    # ssl_certificate_key /etc/nginx/$SERVER_NAME.key;
 
     # TODO: Probably want to generate dh group for production
     # ssl_dhparam /etc/nginx/$SERVER_NAME-dhparams.pem;
 
+    location /api/ {
+        proxy_pass http://backend:6969;
+    }
+
     location / {
-        proxy_pass http://portal:8000;
+        proxy_pass http://frontend:4200;
         proxy_set_header Host $host;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
@@ -23,11 +27,11 @@ server {
 # NOTE: For production-ready deployment, sign SSL certificate
 #       and redirect all HTTP traffic through HTTPS:
 
-server {
-    listen *:80;
-    server_name $SERVER_NAME;
+# server {
+#     listen *:80;
+#     server_name $SERVER_NAME;
 
-    location / {
-        return 301 https://$host$request_uri;
-    }
-}
+#     location / {
+#         return 301 https://$host$request_uri;
+#     }
+# }