Fullstack Containerized Deployment with Azure ACR
Fullstack ACR Deployment is a learning-focused project that demonstrates how to build, tag, push, and deploy containerized frontend and backend applications to Microsoft Azure using GitHub Actions and Azure Container Registry (ACR).
The project showcases a real-world container-based CI/CD workflow where Docker images are built automatically, pushed to a private registry, and deployed to Azure Web Apps without manual intervention.
What This Project Demonstrates
• Multi-stage Docker builds for frontend and backend services.
• Containerized Vite + React frontend served via Nginx.
• Containerized NestJS backend running compiled production output.
• CI/CD pipelines using GitHub Actions.
• Automated image tagging and pushing to Azure Container Registry.
• Azure Web App deployments using ACR-hosted images.
Architecture Overview
Frontend
The frontend is built with Vite + React using a multi-stage Dockerfile. Application assets are compiled during the build stage and served via Nginx in the final image. Backend API URLs are injected at build time using environment variables.
Backend
The backend is a NestJS application packaged into a production-ready Docker image.
The Dockerfile builds the application and runs the compiled dist output,
ensuring a lightweight and efficient runtime container.
CI/CD Workflow
The CI pipeline detects changes under client/ or server/, builds the
corresponding Docker images, tags them with both the commit SHA and latest, and pushes
them to Azure Container Registry.
The CD pipeline triggers automatically after CI completion and updates Azure Web Apps to use the
newly pushed container images via az webapp config container set.
Azure Integration
• Azure Container Registry (ACR) for private image storage.
• Linux-based Azure App Services for frontend and backend containers.
• Secure authentication using Azure Service Principals.
• Environment configuration handled via GitHub Secrets.
Local Development & Docker
The application can be run locally using Node.js or fully containerized using Docker. Developers can build and run frontend and backend images locally to mirror the production setup.
Learning Focus
This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to focus purely on containerization, CI/CD automation, and Azure deployments.
Source Code
View the complete repository on GitHub:
https://github.com/lochana0513/fullstack-acr-deployment
Related Projects
View all projects →
Azure Fullstack CI/CD Pipeline (GitHub Actions)
Fullstack ACR Deployment is a learning-focused project that demonstrates how to build, tag, push, and deploy containerized frontend and backend applications to Microsoft Azure using GitHub Actions and Azure Container Registry (ACR). The project showcases a real-world container-based CI/CD workflow where Docker images are built automatically, pushed to a private registry, and deployed to Azure Web Apps without manual intervention. What This Project Demonstrates • Multi-stage Docker builds for frontend and backend services. • Containerized Vite + React frontend served via Nginx. • Containerized NestJS backend running compiled production output. • CI/CD pipelines using GitHub Actions. • Automated image tagging and pushing to Azure Container Registry. • Azure Web App deployments using ACR-hosted images. Architecture Overview Frontend The frontend is built with Vite + React using a multi-stage Dockerfile. Application assets are compiled during the build stage and served via Nginx in the final image. Backend API URLs are injected at build time using environment variables. Backend The backend is a NestJS application packaged into a production-ready Docker image. The Dockerfile builds the application and runs the compiled dist output, ensuring a lightweight and efficient runtime container. CI/CD Workflow The CI pipeline detects changes under client/ or server/, builds the corresponding Docker images, tags them with both the commit SHA and latest, and pushes them to Azure Container Registry. The CD pipeline triggers automatically after CI completion and updates Azure Web Apps to use the newly pushed container images via az webapp config container set. Azure Integration • Azure Container Registry (ACR) for private image storage. • Linux-based Azure App Services for frontend and backend containers. • Secure authentication using Azure Service Principals. • Environment configuration handled via GitHub Secrets. Local Development & Docker The application can be run locally using Node.js or fully containerized using Docker. Developers can build and run frontend and backend images locally to mirror the production setup. Learning Focus This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to focus purely on containerization, CI/CD automation, and Azure deployments. Source Code View the complete repository on GitHub: https://github.com/lochana0513/fullstack-acr-deployment
Hotel Booking Application (State Management - Redux Toolkit)
Fullstack ACR Deployment is a learning-focused project that demonstrates how to build, tag, push, and deploy containerized frontend and backend applications to Microsoft Azure using GitHub Actions and Azure Container Registry (ACR). The project showcases a real-world container-based CI/CD workflow where Docker images are built automatically, pushed to a private registry, and deployed to Azure Web Apps without manual intervention. What This Project Demonstrates • Multi-stage Docker builds for frontend and backend services. • Containerized Vite + React frontend served via Nginx. • Containerized NestJS backend running compiled production output. • CI/CD pipelines using GitHub Actions. • Automated image tagging and pushing to Azure Container Registry. • Azure Web App deployments using ACR-hosted images. Architecture Overview Frontend The frontend is built with Vite + React using a multi-stage Dockerfile. Application assets are compiled during the build stage and served via Nginx in the final image. Backend API URLs are injected at build time using environment variables. Backend The backend is a NestJS application packaged into a production-ready Docker image. The Dockerfile builds the application and runs the compiled dist output, ensuring a lightweight and efficient runtime container. CI/CD Workflow The CI pipeline detects changes under client/ or server/, builds the corresponding Docker images, tags them with both the commit SHA and latest, and pushes them to Azure Container Registry. The CD pipeline triggers automatically after CI completion and updates Azure Web Apps to use the newly pushed container images via az webapp config container set. Azure Integration • Azure Container Registry (ACR) for private image storage. • Linux-based Azure App Services for frontend and backend containers. • Secure authentication using Azure Service Principals. • Environment configuration handled via GitHub Secrets. Local Development & Docker The application can be run locally using Node.js or fully containerized using Docker. Developers can build and run frontend and backend images locally to mirror the production setup. Learning Focus This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to focus purely on containerization, CI/CD automation, and Azure deployments. Source Code View the complete repository on GitHub: https://github.com/lochana0513/fullstack-acr-deployment
Real-Time Dashboard with WebSockets (NestJS + React)
Fullstack ACR Deployment is a learning-focused project that demonstrates how to build, tag, push, and deploy containerized frontend and backend applications to Microsoft Azure using GitHub Actions and Azure Container Registry (ACR). The project showcases a real-world container-based CI/CD workflow where Docker images are built automatically, pushed to a private registry, and deployed to Azure Web Apps without manual intervention. What This Project Demonstrates • Multi-stage Docker builds for frontend and backend services. • Containerized Vite + React frontend served via Nginx. • Containerized NestJS backend running compiled production output. • CI/CD pipelines using GitHub Actions. • Automated image tagging and pushing to Azure Container Registry. • Azure Web App deployments using ACR-hosted images. Architecture Overview Frontend The frontend is built with Vite + React using a multi-stage Dockerfile. Application assets are compiled during the build stage and served via Nginx in the final image. Backend API URLs are injected at build time using environment variables. Backend The backend is a NestJS application packaged into a production-ready Docker image. The Dockerfile builds the application and runs the compiled dist output, ensuring a lightweight and efficient runtime container. CI/CD Workflow The CI pipeline detects changes under client/ or server/, builds the corresponding Docker images, tags them with both the commit SHA and latest, and pushes them to Azure Container Registry. The CD pipeline triggers automatically after CI completion and updates Azure Web Apps to use the newly pushed container images via az webapp config container set. Azure Integration • Azure Container Registry (ACR) for private image storage. • Linux-based Azure App Services for frontend and backend containers. • Secure authentication using Azure Service Principals. • Environment configuration handled via GitHub Secrets. Local Development & Docker The application can be run locally using Node.js or fully containerized using Docker. Developers can build and run frontend and backend images locally to mirror the production setup. Learning Focus This repository is intentionally minimal and not production-ready. It avoids authentication, authorization, and real business data to focus purely on containerization, CI/CD automation, and Azure deployments. Source Code View the complete repository on GitHub: https://github.com/lochana0513/fullstack-acr-deployment