[DevOps] Create Deployment Pipeline with Docker, Vercel Config, and Environment Management

[KarenZita01]

Description

The frontend has no deployment configuration. There are no Dockerfiles, no deployment scripts, no environment configuration for staging/production, and no infrastructure-as-code setup. For reliable deployments, a well-defined deployment pipeline is essential.

Deployment gaps:

• No Dockerfile for containerized deployment
• No docker-compose for local development with backend
• No Vercel configuration (vercel.json)
• No environment-specific .env files (staging, production)
• No deployment documentation
• No rollback procedure
• No blue/green deployment strategy
• No CDN configuration for static assets
• No domain and SSL configuration guidance
• No staging environment setup

Technical Context & Impact

• Affected Components/Files: Dockerfile (missing), .dockerignore (missing), vercel.json (missing)
• Impact: Cannot deploy reliably; no staging environment for testing

Step-by-Step Implementation Guide

1. Create Vercel configuration: vercel.json:
   • Framework preset: nextjs
   • Build and install commands
   • Environment variable integration
   • Preview deployments for PRs
   • Custom domain configuration with SSL
2. Create Dockerfile: Multi-stage build:
   • Stage 1: node:20-alpine for npm ci and npm run build
   • Stage 2: node:20-alpine slim for production with next start
   • Layer caching optimization (copy package.json before source)
   • Non-root user (node) for security
   • Health check: CMD curl -f http://localhost:3000/api/health
3. Create docker-compose.yml: For local development:
   • Frontend service with hot reload
   • Backend API service
   • Redis for caching (optional)
   • Network configuration for inter-service communication
4. Set up environment files:
   • .env.development - local development values
   • .env.staging - staging environment values
   • .env.production - production values
   • Validate vars before build with Zod schema
5. Create NGINX configuration: nginx.conf for reverse proxy with:
   • Static asset caching
   • Gzip compression
   • Security headers (redundant with Next.js middleware)
   • Rate limiting on API routes
6. Deployment documentation: docs/DEPLOYMENT.md with:
   • Prerequisites (Node version, environment variables)
   • Build steps
   • Deployment to Vercel (one-click)
   • Deployment to Docker (container)
   • Rollback procedure
   • Monitoring setup after deployment

Verification & Testing Steps

1. Run docker build -t equipchain-frontend . -> verify build succeeds
2. Run docker-compose up -> verify frontend accessible at localhost:3000
3. Deploy to Vercel preview -> verify all pages render correctly
4. Test environment-specific configuration: set NEXT_PUBLIC_ENV=staging -> verify staging API URL used
5. Test rollback: deploy v2 -> rollback to v1 -> verify v1 works
6. Verify NGINX config passes nginx -t

[pravin-justtry]

Architecture Proposal: Frontend Deployment Pipeline & Environment Management

1. Executive Summary

This proposal outlines the architectural strategy for implementing a reliable, highly available, and secure deployment pipeline for the EquipChain Frontend application. To balance development agility with enterprise-grade stability, we propose a Hybrid Hosting Architecture: Utilizing Vercel as the primary edge network for global delivery, complemented by a containerized Docker/NGINX framework for local development and self-hosted fallback environments.

---

2. Infrastructure Architecture Overview

The proposed design separates environments cleanly to ensure that configuration drift is eliminated and deployments are zero-downtime.

Deployment Targets & Environments

• Local Development: Orchestrated via docker-compose to ensure strict environmental alignment across developer machines without breaking hot-reload workflows.
• Staging Environment: Automated previews triggered by Pull Requests or merges into the staging branch, running on Vercel's global edge network.
• Production Environment: Production builds deployed automatically upon merging into the main branch, utilizing Next.js standalone performance optimizations.

---

3. Technical Implementation Components

A. Managed Global Deployment (Vercel Core)

For the live staging and production applications, Vercel will act as the native hosting engine.

• Framework-Aware Optimization: Fully leverages Next.js App Router caching, Server Components, and static asset optimization out of the box.
• Automated SSL & Custom Domains: Zero-maintenance, automated Let's Encrypt certificate issuance and renewal via Anycast routing configurations.
• Security Headers: Declarative header configurations embedded via vercel.json to enforce strict Content-Security-Policy, X-Frame-Options, and HSTS.

B. Isolated Container Architecture (Docker Core)

To ensure long-term cloud portability and identical local execution environments:

• Multi-Stage Build Pipeline: A 3-stage Dockerfile (deps → builder → runner) that filters out development tooling, reducing production image sizes by up to 80%.
• Standalone Node Execution: Leverages Next.js tracing optimization (output: 'standalone') to execute directly on a lightweight Alpine base image without requiring heavy global dependencies.
• Secured Non-Root Context: The runtime process runs entirely under an unprivileged nextjs system user rather than root to heavily reduce container breakout risks.

C. Environment & Runtime Security Management

• Zod-Based Validation: A structural validation schema executing during the initial build bundle phase. If critical environment parameters are missing or formatted incorrectly, the build terminates early to prevent broken live instances.
• Strict Variable Separation: Distinct runtime scopes split across .env.development, .env.staging, and .env.production contexts.

---

4. Continuous Integration & Rollback Strategy

Deployment Strategy	Mechanism	Downtime	Rollback Path
Vercel Cloud	Instant Alias Pointer Swap	0 Seconds	Single-click dashboard deployment reversion (instant)
Self-Hosted Docker	Blue/Green Container Switching via NGINX	0 Seconds	Upstream hot-reload to previous container tag (nginx -s reload)

---

5. Implementation Checklist / Next Steps

• Phase 1: Repository Alignment
• Migrate the asset public folder out of app/ to the project root.
• Add output: 'standalone' into next.config.ts.
• Create runtime Zod validation layer for environment variables.
• Phase 2: Containerization
• Deploy multi-stage Dockerfile and .dockerignore.
• Implement streamlined docker-compose.yml for active local development.
• Phase 3: Production Pipeline & Vercel Webhooks
• Implement vercel.json with secure production routing headers.
• Configure environment variables securely inside the Vercel dashboard.
• Hook up repository webhook pipeline for preview/production builds.

Assign the task

Regards,
Pravin
https://justtrytech.com/hire-devops-engineer