build

Author: Nikita Filonov

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+build
+.git
+.gitignore
+Dockerfile*
+docker-compose*
+npm-debug.log
+pnpm-lock.yaml
+.vscode
+.DS_Store

.github/workflows/docker-publish.yml

@@ -0,0 +1,32 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: |
+            ${{ secrets.DOCKER_USERNAME }}/load-testing-hub-panel:latest
+            ${{ secrets.DOCKER_USERNAME }}/load-testing-hub-panel:${{ github.ref_name }}

Dockerfile

@@ -1,11 +1,53 @@
-FROM node:20-alpine
+# ===== Stage 1: Build React application =====
+FROM node:20-alpine AS build
 
+# Set working directory inside the container
 WORKDIR /app
 
+# Enable corepack (to manage Yarn versions)
+RUN corepack enable
+
+# Copy dependency files
 COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile
+
+# Install dependencies (frozen lockfile to ensure reproducible builds)
+RUN yarn install --frozen-lockfile --non-interactive
+
+# Copy the rest of the application source code
 COPY . .
+
+# Build-time arguments with default values (can be overridden via --build-arg)
+ARG SERVER_URL="http://localhost:8000"
+ARG API_VERSION="/api/v1"
+ARG DURATION_FORMAT="m[m]s[s]"
+ARG API_DATE_FORMAT="YYYY-MM-DD"
+ARG API_TIME_FORMAT="HH:mm:ss"
+ARG PICKER_DATE_FORMAT="dd.MM.yyyy"
+ARG PICKER_TIME_FORMAT="HH:mm"
+
+# Set environment variables for CRA build
+ENV REACT_APP_SERVER_URL=${SERVER_URL}
+ENV REACT_APP_API_VERSION=${API_VERSION}
+ENV REACT_APP_DURATION_FORMAT=${DURATION_FORMAT}
+ENV REACT_APP_API_DATE_FORMAT=${API_DATE_FORMAT}
+ENV REACT_APP_API_TIME_FORMAT=${API_TIME_FORMAT}
+ENV REACT_APP_PICKER_DATE_FORMAT=${PICKER_DATE_FORMAT}
+ENV REACT_APP_PICKER_TIME_FORMAT=${PICKER_TIME_FORMAT}
+
+# Build the production version of the React app
 RUN yarn build
-RUN yarn add express express-favicon
 
-EXPOSE 13100
+# ===== Stage 2: Serve static files with Nginx =====
+FROM nginx:alpine
+
+# Copy custom nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy the build output from the previous stage
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Expose port 80 for HTTP traffic
+EXPOSE 80
+
+# Default command to run Nginx in the foreground
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,22 @@
+server {
+    listen 80;
+    server_name _;
+
+    # Root directory for static files
+    root /usr/share/nginx/html;
+
+    # Handle SPA (Single Page Application) routing
+    location / {
+        try_files $uri /index.html;
+    }
+
+    # Static assets: JS, CSS, images, fonts
+    location ~* \.(?:js|css|png|jpg|jpeg|gif|svg|ico|ttf|woff|woff2)$ {
+        try_files $uri =404;
+        access_log off;
+
+        # Cache for 1 year, immutable means "content will never change"
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}