Static Vite NGINX Dockerized

A production-ready Docker image for serving static sites built with Vite and deployed using NGINX.

---

📚 Table of Contents

• Overview
• Project Structure
• Features
• Usage
• Development & Local Testing
• Building the Image Locally
• Notes
• Useful Resources
• Docker Hub Image
• Get the Code
• License
• Author

---

📄 Overview

This project provides a lightweight, efficient, and secure solution for hosting static web applications.
It bundles a Vite-built frontend and serves it via NGINX inside a Docker container, ensuring quick load times and minimal resource usage.

Originally developed as part of a DevOps technical test, showcasing best practices for building, optimizing, and deploying containerized static sites.

---

🗂 Project Structure

├── nginx.conf             # Custom NGINX configuration for serving the app
├── Dockerfile
├── .dockerignore
├── .gitignore
├── public/                # Static public assets (custom location used in build)
│   └── index.html
├── src/                   # Vite source files
│   └── main.js
├── package.json
├── package-lock.json
├── vite.config.js         # Configures custom public directory and build settings
└── README.md

---

🔧 Features

• Vite Build Integration
  Serves optimized static assets generated by Vite.

• NGINX Web Server
  Fast and reliable delivery with caching support.

• Minimal Footprint
  Slim, production-grade base images reduce size and potential vulnerabilities.

• Cross-Environment Portability
  Runs identically across development, staging, and production environments.

• Easy to Extend
  Customize the NGINX configuration or use behind a reverse proxy/CDN.

• Multi-Stage Docker Build
  Vite build happens inside the container at build time, producing a lean final image.

---

🚀 Usage

Pull the Image

docker pull ilouckov/static-vite-nginx-dockerized

Run the Container

docker run -p 8080:80 ilouckov/static-vite-nginx-dockerized

Visit your site at: http://localhost:8080

Note: This is not an SPA (Single Page Application).
NGINX serves static files directly as individual pages or assets.
Deep linking or direct navigation to nested URLs requires corresponding files in the build output (dist/).

---

🧪 Development & Local Testing

If you want to test or modify the app without using Docker, follow these steps:

Install dependencies

npm install

Run the development server

npm run dev

Your app will be available at http://localhost:5173 or another port.

Tip: If port 5173 is already in use, Vite will automatically select another available port, or you can manually specify one using --port , for example:

npm run dev -- --port 3000

Build the production static files

npm run build

The build output will be placed in the dist/ folder.

Note: The dist/ folder is excluded from version control because Docker handles the production build internally.

Test the production build locally

npm run preview

Your app will be available at http://localhost:4173.

Note: The dist/ folder is excluded from version control because Docker handles the production build internally.

---

🏗 Building the Image Locally

docker build -t ilouckov/static-vite-nginx-dockerized .

---

📝 Notes

• This image is best suited for production-ready static sites.
• The project uses a custom public directory configuration in vite.config.js to manage static assets during build.
• Uses a multi-stage Docker build: the Vite app is built inside the container during the first stage (Node.js), and the final image only contains static assets served by NGINX.
• The app does not use client-side routing (SPA behavior) and expects direct static file serving.
• The nginx.conf can be customized to add gzip compression, custom headers, or SPA routing if the app is modified in the future to require it.
• Each URL maps to a static file generated at build time.
• Designed with simplicity and reliability in mind — suitable for DevOps test cases, personal projects, or real-world deployments.

---

🔗 Useful Resources

• How to use the official NGINX Docker image
  Explains how to configure and extend NGINX in Docker containers, including setting up custom nginx.conf files, using volume mounts, proxying, and advanced options. Useful for understanding how the nginx.conf in this project works and how to customize it for other setups.

---

🐳 Docker Hub Image

View on Docker Hub →

---

💾 Get the Code

If you want to clone the repo:

git clone https://github.com/ILXNAH/static-vite-nginx-dockerized

---

📄 License

This project is licensed under the MIT License.

---

👤 Author

Built by ILXNAH as part of a hands-on DevOps assessment.