nginx

Dockerfile.react-prod

@@ -0,0 +1,17 @@
+# stage1 - build react app first
+FROM node:20-alpine as build
+WORKDIR /app
+ENV PATH /app/node_modules/.bin:$PATH
+COPY react/app/package.json .
+COPY react/app/package-lock.json .
+RUN npm ci
+COPY react/app .
+RUN npm run build
+
+# stage 2 - build the final image and copy the react build files
+FROM nginx:1.25.0-alpine
+COPY --from=build /app/build /usr/share/nginx/html
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx-prod.conf /etc/nginx/conf.d
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

@@ -16,8 +16,8 @@ services:
             - "3000"
         environment:
             - REACT_APP_DOMAIN=ovz1.ollyhearn.gmzem.vps.myjino.ru
-        # volumes:
-        #     - ./react/app:/app:z
+        volumes:
+            - ./react/app:/app:z
             # - ./docker_cache/node_modules:/app/node_modules
     nginx:
         image: nginx:1.23.4

nginx-prod.conf

@@ -0,0 +1,35 @@
+server {
+    listen 80;
+    server_name 192.168.1.121;
+    location / {
+        proxy_hide_header 'Access-Control-Allow-Origin';
+        add_header 'Access-Control-Allow-Origin' '*' always;
+
+        proxy_hide_header 'Access-Control-Allow-Headers';
+        add_header 'Access-Control-Allow-Headers' '*' always;
+
+        proxy_hide_header 'Access-Control-Allow-Methods';
+        add_header 'Access-Control-Allow-Methods' '*' always;
+
+        root /usr/share/nginx/html;
+        index index.html index.htm;
+        try_files $uri /index.html;
+    }
+    location /api/ {
+        proxy_hide_header 'Access-Control-Allow-Origin';
+        add_header 'Access-Control-Allow-Origin' '*' always;
+
+        proxy_hide_header 'Access-Control-Allow-Headers';
+        add_header 'Access-Control-Allow-Headers' '*' always;
+
+        proxy_hide_header 'Access-Control-Allow-Methods';
+        add_header 'Access-Control-Allow-Methods' '*' always;
+
+        proxy_pass http://api:8000/api/;
+        proxy_set_header Host $host;
+        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_cache off;
+    }
+}

prod.yml

@@ -9,19 +9,13 @@ services:
             - POSTGRES_USER=postgres
             - POSTGRES_DB=flask
             - PYTHONBUFFERED=0
-    react:
+    nginx:
         build:
-            context: react
-            dockerfile: prod.Dockerfile
-        ports:
-            - "3000"
+            dockerfile: Dockerfile.react-prod
+        volumes:
+            - ./static:/static
         environment:
             - REACT_APP_DOMAIN=ovz1.ollyhearn.gmzem.vps.myjino.ru
-    nginx:
-        image: nginx:1.23.4
-        volumes:
-            - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
-            - ./static:/static
         depends_on:
             - api
         ports:

react/Dockerfile

@@ -1,13 +1,17 @@
-FROM node:20-alpine
-
-ENV CI=true
-ENV PORT=3000
-ENV HOST=0.0.0.0
-ENV WDS_SOCKET_PORT=0
-
+# stage1 - build react app first
+FROM node:20-alpine as build
 WORKDIR /app
+ENV PATH /app/node_modules/.bin:$PATH
+COPY ./app/package.json /app/
+COPY ./app/yarn.lock /app/
+RUN yarn
 COPY /app /app
+RUN yarn build
 
-RUN npm ci
-
-CMD [ "npm", "start" ]
+# stage 2 - build the final image and copy the react build files
+FROM nginx:1.25.0-alpine
+COPY --from=build /app/build /usr/share/nginx/html
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx/nginx.conf /etc/nginx/conf.d
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

react/prod.Dockerfile

@@ -1,14 +0,0 @@
-FROM node:20-alpine
-
-ENV PORT=3000
-ENV HOST=0.0.0.0
-ENV WDS_SOCKET_PORT=0
-
-WORKDIR /app
-COPY /app /app
-
-RUN npm ci
-
-RUN npm run build
-
-CMD [ "npm", "start" ]