nignx INSIDE docker frontend (to serve static files)

[joseamtalavera]

Create a nginx.conf in the same directory than Dockerfile (frontend)

events { worker_connections 1024; }

http { server { listen 80;

    server_name 13.53.38.238;

    location / {
        root /usr/share/nginx/html;
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://backend:5010;
        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;
    }
}

}

Set up configuration in the Dockerfile (frontend)

Stage 1: Build the React app

FROM node:14-alpine AS build

WORKDIR /app

Set buiid-time environment variables

ARG REACT_APP_API_URL ENV REACT_APP_API_URL=${REACT_APP_API_URL}

COPY package*.json ./ RUN npm install

COPY . . RUN npm run build

Stage 2: Serve the app with Nginx

FROM nginx:alpine

Copy the build output to the Nginx HTML directory

COPY --from=build /app/build /usr/share/nginx/html

Copy the Nginx configuration file

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]