Containerized frontend with Nginx

backend/.Dockerignore

@@ -0,0 +1,4 @@
+node_modules
+*.log
+.git
+.env

backend/Dockerfile

@@ -0,0 +1,20 @@
+# base image
+FROM node:20-alpine
+
+# set working directory
+WORKDIR /app-lp-backend
+
+# copy package.json and package-lock.json
+COPY package*.json ./
+
+# install dependencies
+RUN npm install 
+
+# copy other files
+COPY . .
+
+# expose the port the app runs 
+EXPOSE 5000
+
+# start the application
+CMD ["npm", "start"]

backend/server.js

@@ -17,7 +17,7 @@ const app = express();
 app.use(express.json());
 app.use(
   cors({
-    origin: ["http://localhost:3000", "https://legian-pastry-5nli.vercel.app"],
+    origin: { origin: "*" },
     credentials: true,
     optionsSuccessStatus: 200,
   })

docker-compose.yml

@@ -0,0 +1,23 @@
+version: "3.9"
+services:
+  server:
+    build: ./backend
+    container_name: server_container
+    ports:
+      - "5000:5000"
+    volumes:
+      - ./backend/uploads:/app/uploads
+      - ./backend/node_modules:/app/node_modules
+      - ./backend:/app
+    environment:
+      CONNECTION_STRING: mongodb+srv://cshehani44:0Z2pS23vimyo7xEc@cluster-legianpastry.rk8d9cu.mongodb.net/<databaseName>?retryWrites=true&w=majority
+      JWT_SECRET: hahufahiuhajshdkja1a45
+      PORT: 5000
+
+  client:
+    build: ./frontend
+    container_name: client_nginx
+    ports:
+      - "80:80"
+    depends_on:
+      - server

frontend/.Dockerignore

@@ -0,0 +1,4 @@
+node_modules
+*.log
+.git
+.env

frontend/Dockerfile

@@ -0,0 +1,14 @@
+# Step 1: build React
+FROM node:20-alpine as build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Step 2: serve with Nginx
+FROM nginx:alpine
+COPY --from=build /app/build /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,21 @@
+server {
+    listen 80;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Serve React app
+    location / {
+        try_files $uri /index.html;
+    }
+
+    # Forward API requests to backend
+    location /api/ {
+        proxy_pass http://server:5000/;   
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}