UXDL Docs

Deployment

Docker build, CI pipeline, and production deployment flow.

This guide covers building and deploying Angular applications using Docker and the standard CI/CD pipeline.

Build for production

bash
ng build --configuration=production

Output is written to dist/admin-console/browser/. Verify bundle size:

bash
ls -lh dist/admin-console/browser/

Dockerfile

Multi-stage build for minimal production image:

dockerfile
# Stage 1: Build
FROM node:20-alpine AS builder
WORKDIR /app
RUN corepack enable
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm ng build --configuration=production
 
# Stage 2: Serve
FROM nginx:alpine
COPY --from=builder /app/dist/admin-console/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

nginx
server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;
 
  location / {
    try_files $uri $uri/ /index.html;
  }
 
  location /health {
    return 200 'ok';
    add_header Content-Type text/plain;
  }
}

CI pipeline

yaml
- name: Build Angular
  run: |
    pnpm install --frozen-lockfile
    pnpm ng lint
    pnpm ng test --watch=false --browsers=ChromeHeadless
    pnpm ng build --configuration=production
 
- name: Build & push Docker image
  run: |
    docker build -t $REGISTRY/admin-console:$TAG .
    docker push $REGISTRY/admin-console:$TAG

Deployment checklist

  1. Confirm environment.prod.ts has correct API URL and Cognito IDs.
  2. Build passes locally with production configuration.
  3. Docker image builds and health check responds.
  4. Deploy to staging and verify login + core workflows.
  5. Promote to production after code owner approval.