Add incremental dockerfiles

04-building-container-images/sample-app/client-react/Dockerfile.0

@@ -0,0 +1,7 @@
+FROM node
+
+COPY . .
+
+RUN npm install
+
+CMD ["npm", "run", "dev"]

04-building-container-images/sample-app/client-react/Dockerfile.1

@@ -0,0 +1,7 @@
+FROM node:19.4-bullseye
+
+COPY . .
+
+RUN npm install
+
+CMD ["npm", "run", "dev"]

04-building-container-images/sample-app/client-react/Dockerfile.2

@@ -0,0 +1,14 @@
+FROM node:19.4-bullseye AS build
+
+# Specify working directory other than /
+WORKDIR /usr/src/app
+
+# Copy only files required to install
+# dependencies (better layer caching)
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+CMD ["npm", "run", "dev"]

04-building-container-images/sample-app/client-react/Dockerfile.3

@@ -0,0 +1,24 @@
+FROM node:19.4-bullseye AS build
+
+# Specify working directory other than /
+WORKDIR /usr/src/app
+
+# Copy only files required to install
+# dependencies (better layer caching)
+COPY package*.json ./
+
+# Use cache mount to speed up install of existing dependencies
+RUN --mount=type=cache,target=/usr/src/app/.npm \
+  npm set cache /usr/src/app/.npm && \
+  npm install
+
+COPY . .
+
+RUN npm run build
+
+# Use separate stage for deployable image
+FROM nginx:1.23-alpine
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+COPY --from=build usr/src/app/dist/ /usr/share/nginx/html

04-building-container-images/sample-app/client-react/nginx.conf

@@ -0,0 +1,24 @@
+server {
+  listen 80;
+  location /api/golang/ {
+        resolver 127.0.0.1;
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_set_header X-Forwarded-Server $host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_pass http://api-golang:8080/;
+  }
+  location /api/node/ {
+        resolver 127.0.0.1;
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_set_header X-Forwarded-Server $host;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_pass http://api-node:3000/;
+  }
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+  }
+  
+  include /etc/nginx/extra-conf.d/*.conf;
+}

04-building-container-images/sample-app/client-react/src/App.jsx

@@ -37,8 +37,8 @@ export function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <h1>Hey Team! 👋</h1>
-      <Example api="/api/golang"/>
-      <Example api="/api/node"/>
+      <Example api="/api/golang/"/>
+      <Example api="/api/node/"/>
     </QueryClientProvider>
   );
 }