From 6237982d5ce6aecd126998f7c79b94b927621793 Mon Sep 17 00:00:00 2001 From: Benjamin Loh Date: Mon, 30 Oct 2023 22:49:47 +0800 Subject: [PATCH] updated yaml files with nginx updated yaml files with nginx --- safeshare/K8s/frontend_deployment.yaml | 10 +++---- safeshare/K8s/frontend_deployment_backup.yaml | 30 +++++++++++++++++++ safeshare/K8s/frontend_service.yaml | 6 ++-- safeshare/K8s/frontend_service_backup.yaml | 15 ++++++++++ safeshare/safeshare-frontend/Dockerfile | 18 +++++++++-- .../safeshare-frontend/Dockerfile_backup | 11 +++++++ .../src/pages/downloadFile.js | 2 +- .../safeshare-frontend/src/pages/shareFile.js | 4 +-- 8 files changed, 82 insertions(+), 14 deletions(-) create mode 100644 safeshare/K8s/frontend_deployment_backup.yaml create mode 100644 safeshare/K8s/frontend_service_backup.yaml create mode 100644 safeshare/safeshare-frontend/Dockerfile_backup diff --git a/safeshare/K8s/frontend_deployment.yaml b/safeshare/K8s/frontend_deployment.yaml index f520c87..b0059f0 100644 --- a/safeshare/K8s/frontend_deployment.yaml +++ b/safeshare/K8s/frontend_deployment.yaml @@ -19,12 +19,12 @@ spec: spec: containers: - name: safeshare-frontend - image: amusement3004/safeshare-frontend + image: itsmexrando/safeshare-frontend:latest imagePullPolicy: IfNotPresent - env: # Add these environment variables + env: - name: REACT_APP_API_HOST - value: safeshare-backend-service # The name of the backend service + value: safeshare-backend-service - name: REACT_APP_API_PORT - value: "80" # The port the backend service listens on + value: "80" ports: - - containerPort: 3000 \ No newline at end of file + - containerPort: 80 diff --git a/safeshare/K8s/frontend_deployment_backup.yaml b/safeshare/K8s/frontend_deployment_backup.yaml new file mode 100644 index 0000000..f520c87 --- /dev/null +++ b/safeshare/K8s/frontend_deployment_backup.yaml @@ -0,0 +1,30 @@ +apiVersion: apps/v1 +kind: Deployment +metadata: + name: safeshare-frontend + labels: + app: safeshare + tier: frontend +spec: + replicas: 1 + selector: + matchLabels: + app: safeshare + tier: frontend + template: + metadata: + labels: + app: safeshare + tier: frontend + spec: + containers: + - name: safeshare-frontend + image: amusement3004/safeshare-frontend + imagePullPolicy: IfNotPresent + env: # Add these environment variables + - name: REACT_APP_API_HOST + value: safeshare-backend-service # The name of the backend service + - name: REACT_APP_API_PORT + value: "80" # The port the backend service listens on + ports: + - containerPort: 3000 \ No newline at end of file diff --git a/safeshare/K8s/frontend_service.yaml b/safeshare/K8s/frontend_service.yaml index ee2df37..137c537 100644 --- a/safeshare/K8s/frontend_service.yaml +++ b/safeshare/K8s/frontend_service.yaml @@ -8,8 +8,8 @@ metadata: spec: type: NodePort ports: - - port: 3000 - nodePort: 32000 # Optional: This is an example. Kubernetes will assign an available port if you don't specify this. + - port: 80 + nodePort: 32001 # Changed this to a different NodePort to avoid potential conflicts. selector: app: safeshare - tier: frontend \ No newline at end of file + tier: frontend diff --git a/safeshare/K8s/frontend_service_backup.yaml b/safeshare/K8s/frontend_service_backup.yaml new file mode 100644 index 0000000..ee2df37 --- /dev/null +++ b/safeshare/K8s/frontend_service_backup.yaml @@ -0,0 +1,15 @@ +apiVersion: v1 +kind: Service +metadata: + name: safeshare-frontend-service + labels: + app: safeshare + tier: frontend +spec: + type: NodePort + ports: + - port: 3000 + nodePort: 32000 # Optional: This is an example. Kubernetes will assign an available port if you don't specify this. + selector: + app: safeshare + tier: frontend \ No newline at end of file diff --git a/safeshare/safeshare-frontend/Dockerfile b/safeshare/safeshare-frontend/Dockerfile index 47b6719..5b8b6ea 100644 --- a/safeshare/safeshare-frontend/Dockerfile +++ b/safeshare/safeshare-frontend/Dockerfile @@ -1,11 +1,23 @@ -FROM node +# ---- Build Stage ---- +FROM node:latest AS build-stage WORKDIR /frontend COPY . . RUN npm install +RUN npm run build -EXPOSE 3000 +# ---- Production Stage ---- +FROM nginx:alpine AS production-stage -CMD ["npm", "start"] +# Copy the built app from the build stage +COPY --from=build-stage /frontend/build /usr/share/nginx/html + +# Use a custom nginx.conf (optional but can be useful) +# COPY nginx.conf /etc/nginx/conf.d/default.conf + +# Expose port 80 +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"] diff --git a/safeshare/safeshare-frontend/Dockerfile_backup b/safeshare/safeshare-frontend/Dockerfile_backup new file mode 100644 index 0000000..47b6719 --- /dev/null +++ b/safeshare/safeshare-frontend/Dockerfile_backup @@ -0,0 +1,11 @@ +FROM node + +WORKDIR /frontend + +COPY . . + +RUN npm install + +EXPOSE 3000 + +CMD ["npm", "start"] diff --git a/safeshare/safeshare-frontend/src/pages/downloadFile.js b/safeshare/safeshare-frontend/src/pages/downloadFile.js index 3fcbcfe..6f6731c 100644 --- a/safeshare/safeshare-frontend/src/pages/downloadFile.js +++ b/safeshare/safeshare-frontend/src/pages/downloadFile.js @@ -44,7 +44,7 @@ function DownloadFile() { const handleDownloadFile = () => { if (passcode) { - axios.get(`http://${apiUrl}/api/files/${passcode}/`, {responseType: 'blob'}) + axios.get(`${apiUrl}/api/files/${passcode}/`, {responseType: 'blob'}) .then(response => { let filename = 'downloaded_file'; // Default filename let mimeType = 'application/octet-stream'; // Default MIME type diff --git a/safeshare/safeshare-frontend/src/pages/shareFile.js b/safeshare/safeshare-frontend/src/pages/shareFile.js index e99838b..b39a737 100644 --- a/safeshare/safeshare-frontend/src/pages/shareFile.js +++ b/safeshare/safeshare-frontend/src/pages/shareFile.js @@ -53,7 +53,7 @@ function ShareFile() { // Send POST request to the backend API using Axios axios - .post(`http://${apiUrl}/api/files/`, formData) + .post(`${apiUrl}/api/files/`, formData) .then((response) => { // Handle a successful response from the server, set passcode to "key" in the response body const data = response.data; @@ -61,7 +61,7 @@ function ShareFile() { // If data is an array, take the first item if (Array.isArray(data)) { const passcode = data[0].key; - const baseUrl = 'http://' + apiUrl + '/api/files/'; + const baseUrl = apiUrl + '/api/files/'; setPasscode(passcode); setShareableLink(baseUrl + passcode);