Final working Azure Docker deployment

.envexample

@@ -1,4 +1,5 @@
-NODE_ENV = development
-PORT = 5000
-MONGO_URI = mongodb+srv://YOURMONGOURI
-JWT_SECRET = abc123
+NODE_ENV=development
+PORT=5000
+MONGO_URI=your_mongodb_uri
+JWT_SECRET=your_secret
+

backend/.dockerignore

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

backend/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY backend ./backend
+
+WORKDIR /app/backend
+
+EXPOSE 5000
+
+CMD ["node", "server.js"]

backend/docker/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:18-alpine
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci --production --silent
+
+COPY . .
+
+ENV PORT=5000
+EXPOSE 5000
+
+CMD ["node", "backend/server.js"]

backend/docker/README.md

@@ -0,0 +1,13 @@
+Build and run the backend image
+
+Build:
+```sh
+docker build -t notes-backend:latest -f docker/Dockerfile .
+```
+
+Run (example with envs):
+```sh
+docker run -e MONGO_URI="mongodb+srv://username:password@notesapp-cluster.mongodb.net/?appName=notesapp-cluster" -e JWT_SECRET="abc123" -p 5000:5000 notes-backend:latest
+```
+
+If you use Docker Compose, set the `MONGO_URI` env in the service or rely on a linked mongo service.

backend/server.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const express = require('express');
 const colors = require('colors');
-const dotenv = require('dotenv').config();
+const dotenv = require('dotenv').config({ path: path.resolve(__dirname, '../.env') });
 const { errorHandler } = require('./middleware/errorMiddleware');
 const connectDB = require('./config/db');
 const port = process.env.PORT || 5000;
@@ -18,15 +18,9 @@ app.use('/api/users', require('./routes/userRoutes'));
 
 // Serve frontend
 if (process.env.NODE_ENV === 'production') {
-  app.use(express.static(path.join(__dirname, '../frontend/build')));
-
-  app.get('*', (req, res) =>
-    res.sendFile(
-      path.resolve(__dirname, '../', 'frontend', 'build', 'index.html')
-    )
-  );
-} else {
-  app.get('/', (req, res) => res.send('Please set to production'));
+  app.get('/', (req, res) => {
+    res.send('API is running...')
+  })
 }
 
 app.use(errorHandler);

frontend/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+build
+.git

frontend/.env.example

@@ -0,0 +1 @@
+REACT_APP_API_URL=http://localhost:5000

frontend/Dockerfile

@@ -0,0 +1,35 @@
+# FROM node:18-alpine AS build
+# WORKDIR /app
+# COPY package*.json ./
+# RUN npm install
+# COPY . .
+# RUN npm run build
+# FROM nginx:alpine
+# COPY --from=build /app/build /usr/share/nginx/html
+# COPY nginx.conf /etc/nginx/conf.d/default.conf
+# COPY docker/entrypoint.sh /entrypoint.sh
+# RUN chmod +x /entrypoint.sh
+# EXPOSE 80
+# ENTRYPOINT ["/entrypoint.sh"]
+# CMD ["nginx", "-g", "daemon off;"]
+FROM node:18-alpine AS build
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+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/docker/README.md

@@ -0,0 +1,17 @@
+Runtime env injection for frontend Docker image
+
+Usage (build):
+
+```sh
+docker build -t my-frontend:latest --build-arg REACT_APP_API_URL=http://api:5000 -f docker/Dockerfile .
+```
+
+Runtime (override value without rebuilding):
+
+```sh
+docker run -e REACT_APP_API_URL=http://api:5000 -p 80:80 my-frontend:latest
+```
+
+Notes:
+- `entrypoint.sh` writes `/env.js` into the served files so the app can read `window._env_.REACT_APP_API_URL` at runtime.
+- The frontend will prefer the runtime `window._env_.REACT_APP_API_URL` over the build-time `process.env.REACT_APP_API_URL`.

frontend/nginx.conf

@@ -0,0 +1,19 @@
+server {
+    listen 80;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/ {
+        proxy_pass https://notes-backend-app.azurewebsites.net;
+        proxy_http_version 1.1;
+        proxy_set_header Host notes-backend-app.azurewebsites.net;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_ssl_server_name on;
+    }
+}