Dockerfile.frontend

#Build node 22 image under the build name
FROM node:22.10.0-slim AS build

#Set the working directory 
WORKDIR /app

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

#Install npm
RUN npm install

#Build the Vue App
RUN npm run build

#Build the Nginx image to serve static files
#As of 10/31/2024 this is the latest stable version of nginx
FROM nginx:1.26.2 

#Copy the custom nginx.conf
COPY nginx.conf  /etc/nginx/nginx.conf 

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

#Set the working directory 
WORKDIR /app 

# Set up necessary permissions
RUN chown -R nginx:nginx /usr/share/nginx/html && \ 
    chmod -R 755 /usr/share/nginx/html && \
    chown -R nginx:nginx /var/cache/nginx && \
    chown -R nginx:nginx /var/log/nginx && \
    chown -R nginx:nginx /etc/nginx/conf.d

# Ensure Nginx PID file exists and set permissions       
RUN touch /var/run/nginx.pid && \
        chown -R nginx:nginx /var/run/nginx.pid

# Switch to the nginx user
USER nginx

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