Files
conference-room-booking-system/Dockerfile-frontend
2025-10-09 12:12:52 -04:00

66 lines
1.8 KiB
Plaintext

# Dockerfile for building and serving a React application using TypeScript
# This Dockerfile uses a multi-stage build to keep the final image size small.
# It builds the application in a Node.js environment and serves it using a lightweight server.
# The User ID can be passed as a build argument to run the container as a non-root user.
ARG USER_ID=$(id -u)
# The Node.js version can be passed as a build argument.
ARG NODE_VERSION=24.6.0
# Build stage
FROM node:${NODE_VERSION} AS builder
# Set the User ID for non-root user
USER ${USER_ID}
# Setting working directory for build
WORKDIR /app
# Copying package.json and package-lock.json to leverage Docker cache
COPY frontend/package*.json ./
# Copying TypeScript configuration
COPY frontend/tsconfig.json ./
# Copying yarn configuration files
COPY frontend/yarn.lock ./
COPY frontend/.yarnrc.yml ./
COPY frontend/.yarn/ ./.yarn/
# Copying config-overrides.js
COPY frontend/config-overrides.js ./
# Update to Yarn 4 (Berry) and enable Corepack
RUN corepack enable && corepack prepare yarn@4.10.3 --activate
# Installing dependencies
RUN yarn install --frozen-lockfile
# Copying the rest of the application code
COPY frontend/ .
# Copy .env for build-time environment variables
COPY .env ./
# Set build-time ARG for log level (optional, for CI/CD)
ARG REACT_APP_FRONTEND_LOG_LEVEL=info
ENV REACT_APP_FRONTEND_LOG_LEVEL=$REACT_APP_FRONTEND_LOG_LEVEL
# Building the TypeScript React app for production
RUN yarn run build
# Production stage
# Production stage: use Nginx to serve the static build
FROM nginx:alpine AS production
# Copy custom Nginx config from project root
COPY nginx.conf /etc/nginx/conf.d/default.conf
# Copy build output from builder
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]