🚀 Create Docker Image with Nginx for Aquarium Automation App Frontend

[RomeoIndiaJulietUniform]

Overview

We need to create a Docker image for the Aquarium Automation App Frontend that uses Nginx (preferably the Alpine variant) to serve the built React application. This setup will facilitate reverse proxying and make it easier to manage our application in production.

Requirements

1. Dockerfile:

   • Use the official Nginx (Alpine: recommended) image as the base.
   • Copy the build directory from the React app into the Nginx HTML directory.
   • Ensure Nginx is configured to serve the React app correctly, including handling routing for React Router.

2. Nginx Configuration:

   • Implement a basic Nginx configuration that serves the static files.
   • Set up reverse proxying for any necessary backend services.
   • Ensure that all requests are directed to index.html to allow React Router to handle routing.

3. Build Process:

   • Update the build process to create the production-ready files using npm run build.

4. Documentation:

   • Update the project documentation to include instructions on how to build and run the Docker image, including any relevant information about the reverse proxy configuration.

Acceptance Criteria

• [ ] A Dockerfile is created in the root of the repository using the Nginx (Alpine: recommended) image.
• [ ] A custom nginx.conf is created for serving the React app and handling reverse proxying.
• [ ] The build process is updated to create the production build.
• [ ] Documentation is updated with the Docker build and run instructions, including reverse proxy setup.

[Essogbe]

Hi @RomeoIndiaJulietUniform can you assign me this issue ? I can work on it