Dockerfile-reactjs-multiple-sources

# =========================================
# Stage 1: Build the React.js Application
# =========================================
ARG NODE_VERSION=22.14.0-alpine
ARG NGINX_VERSION=alpine3.21

# Use a lightweight Node.js Alpine image for building
FROM node:${NODE_VERSION} AS builder

# Install security updates and necessary packages
RUN apk update && apk upgrade && apk add --no-cache \
    dumb-init \
    && rm -rf /var/cache/apk/*

# Create a non-root user for building
RUN addgroup -g 1001 -S nodejs && \
    adduser -S react -u 1001 -G nodejs

# Set the working directory
WORKDIR /app

# Change ownership of the app directory to the non-root user
RUN chown -R react:nodejs /app
USER react

# Copy package files with proper ownership
COPY --chown=react:nodejs package*.json ./

# Install dependencies using npm ci for production builds
# Use cache mount to speed up builds
RUN --mount=type=cache,target=/home/react/.npm,uid=1001,gid=1001 \
    npm ci --only=production --omit=dev && \
    npm cache clean --force

# Copy source code
COPY --chown=react:nodejs . .

# Build the application
RUN npm run build

# =========================================
# Stage 2: Production Runtime with NGINX
# =========================================
FROM nginxinc/nginx-unprivileged:${NGINX_VERSION} AS runner

# Update packages for security
USER root
RUN apk update && apk upgrade && \
    apk add --no-cache \
    dumb-init \
    && rm -rf /var/cache/apk/*

# Switch back to nginx user for security
USER nginx

# Remove default nginx configuration
RUN rm -rf /etc/nginx/conf.d/default.conf

# Copy custom nginx configuration
COPY --chown=nginx:nginx nginx.conf /etc/nginx/nginx.conf

# Copy built React app from builder stage
COPY --chown=nginx:nginx --from=builder /app/dist /usr/share/nginx/html

# Create necessary directories with proper permissions
USER root
RUN mkdir -p /var/cache/nginx /var/log/nginx /var/run && \
    chown -R nginx:nginx /var/cache/nginx /var/log/nginx /var/run
USER nginx

# Add health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
    CMD curl -f http://localhost:8080/ || exit 1

# Expose port 8080 (non-privileged port)
EXPOSE 8080

# Use dumb-init to handle signals properly
ENTRYPOINT ["/usr/bin/dumb-init", "--"]

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