Modern frontend applications don’t stop at development — deployment is where real engineering begins.
In this guide, we walk through a complete end-to-end workflow to build a Vite frontend app, containerize it using Docker, and deploy it on an AWS EC2 instance.

This project demonstrates a practical Frontend + DevOps setup that closely mirrors real-world workflows.

Tech Stack Used

• Frontend: Vite + React

• Containerization: Docker

• Cloud Provider: Amazon Web Services

• Compute Service: Amazon EC2

• OS: Amazon Linux

• Version Control: GitHub

Step 1: Create a Vite Application

1. Scaffold a Vite frontend application

2. Fetch data from a public dummy API (e.g., JSONPlaceholder)

3. Verify the app locally:

npm run dev

✔️ Running locally first ensures the application is stable before Dockerization.

Step 2: Create a Dockerfile (Development Mode)

Create a Dockerfile in the root of the project:

FROM node:20

WORKDIR /aws-ec2-frontend

COPY . .

RUN npm install

EXPOSE 5173

CMD ["npm", "run", "dev", "--", "--host"]

Dockerfile Breakdown

• FROM node:20 → Uses Node.js 20 (required by modern Vite)

• WORKDIR → Defines the working directory inside the container

• COPY . . → Copies project files into the image

• RUN npm install → Installs dependencies

• EXPOSE 5173 → Exposes Vite’s dev server port

• --host → Required to access the app via EC2’s public IP

Step 3: Create a .dockerignore File

node_modules
dist
.git
.gitignore
Dockerfile

This reduces image size and speeds up Docker builds by excluding unnecessary files.

Step 4: Push Code to GitHub

1. Create a new GitHub repository

2. Push:

   • Vite source code

   • Dockerfile

   • .dockerignore

This enables easy cloning directly on the EC2 instance.

Step 5: Create an EC2 Instance

Create an EC2 instance with the following configuration:

• Instance Type: t3.micro

• OS: Amazon Linux

• Key Pair: Any existing key

• Security Group: Allow required ports

Connect via SSH or AWS CLI.

Step 6: Install Git and Docker on EC2

Run the following commands on the EC2 instance:

sudo yum update -y
sudo yum install git -y
git --version

sudo yum install docker -y
sudo systemctl start docker
sudo systemctl enable docker
docker --version

• Git → Clone the repository

• Docker → Build and run containers

Step 7: Clone Repository & Build Docker Image

Clone the Repository

git clone https://github.com/your-username/vite-app.git
cd vite-app

Verify Files

ls

Expected output:

Dockerfile
package.json
src/

Build Docker Image

docker build -t vite-app .

Run the Container

docker run -d -p 5173:5173 --name vite-container vite-app

Command Explanation

• -d → Runs container in detached mode

• -p 5173:5173 → Maps EC2 port to container port

• --name → Assigns a readable container name

Step 8: Configure EC2 Security Group

Add an inbound rule:

• Type: Custom TCP

• Port: 5173

• Source: 0.0.0.0/0

This allows public access to the application.

Step 9: Access the Application

Open your browser:

http://<EC2_PUBLIC_IP>:5173

🎉 Your Vite frontend application is now live on AWS EC2!

Key Interview Takeaways

• Docker ensures environment consistency across systems

• .dockerignore improves build performance

• --host is required for external access in Vite

• EC2 Security Groups act as virtual firewalls

• Port mapping connects containers to host networking

• Demonstrates a real-world frontend DevOps workflow

Conclusion

This project demonstrates:

• Frontend development using Vite

• Docker-based containerization

• Cloud deployment with AWS EC2

• A practical DevOps deployment pipeline

With minor enhancements such as Nginx, production builds, and CI/CD pipelines, this setup can be made production-ready.

Final Note

Feel free to fork, clone, and experiment with this project.
It’s an excellent hands-on example for interviews and real-world learning.