Dockerfile.frontend

# Stage 1: Build the Vue application
FROM node:18 AS builder

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json files
COPY package*.json ./

# Log the contents of the working directory
RUN echo "Contents of /app after copying package.json:" && ls -la /app

# Install the dependencies
RUN npm install --loglevel verbose

# Log the contents of the node_modules directory
RUN echo "Contents of /app/node_modules after npm install:" && ls -la /app/node_modules

# Copy the rest of the application files
COPY . ./

# Log the contents of the working directory
RUN echo "Contents of /app after copying frontend files:" && ls -la /app

# Set environment variable via build argument
ARG VITE_APP_API_URL=http://localhost:8001
ENV VITE_APP_API_URL=$VITE_APP_API_URL

# Build the application using the specified config
RUN npx vite build

# Log the contents of the dist directory
RUN echo "Contents of /app/dist after vite build:" && ls -la /app/dist

# Stage 2: Serve the application with Nginx
FROM nginx:alpine as frontend-prod

# Copy the built files from the previous stage
COPY --from=builder /app/dist /usr/share/nginx/html

# Log the contents of the nginx html directory
RUN echo "Contents of /usr/share/nginx/html after copying built files:" && ls -la /usr/share/nginx/html

# Copy the Nginx configuration file
COPY nginx-frontend.conf /etc/nginx/nginx.conf

# Log the contents of the nginx config directory
RUN echo "Contents of /etc/nginx after copying nginx.conf:" && ls -la /etc/nginx

# Expose port 80
EXPOSE 80

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