Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Five Ways to Deploy Your Angular Application

Five Ways to Deploy Your Angular Application

The slide deck of my Angular Vienna Talk on November 22, 2022, where I discussed different ways of deploying an Angular applications and why it is important to understand basic DevOps principle as a developer.

Markus Nissl

November 22, 2022

More Decks by Markus Nissl

Other Decks in Technology


  1. Aim is not to be an expert afterwards, but to

    get an overview and some understanding of the tools
  2. Server Deployment Webserver (Nginx) • Install (apt install nginx) &

    Configure – or buy webspace • Copy dist folder to webspace folder (scp -r dist/* demo.markusnissl.com:/var/www/html) ng build --prod -> dist folder New in Angular 14 (experimental): "builder": "@angular-devkit/build-angular:browser-esbuild"
  3. Docker Deployment Docker-compose.yml (Optional) Image Information Build Information App Information

    (Ports, Volumes) Dockerfile (Multi-Stage) Node Image for Building Nginx Image for Hosting Tipps: • use .dockerignore • Optimize cache usage • Special Attention in CI Tools which CMD is really executed Publish image to registry (optional)
  4. Kubernetes Deployment 1. Prepare Private Repository Secret kubectl create secret

    docker-registry myregistry --docker-server=https://ghcr.io --docker-username=USER --docker-password=TOKEN --docker-email=EMAIL 2. Create Deployment 3. Create Service 4. Create Ingress
  5. Kubernetes - Deployment Container Container Container Container POD labels: app:

    frontend POD labels: app: frontend Deployment replicas: 2 matchLabels: app: frontend
  6. Kubernetes - Service Container Container Container Container POD labels: app:

    frontend POD labels: app: frontend Service type: NodePort selector: app: frontend Network Request
  7. Kubernetes - Ingress Service (Frontend) type: ClusterIP selector: app: frontend

    Service (Backend) type: ClusterIP selector: app: backend Ingress paths: - path: /frontend backend: serviceName: frontend-service servicePort: 3000 - path: /backend backend: serviceName: backend-service servicePort: 3000 Network Request
  8. ArgoCD Tipps: Create Repository in Settings with Token as password

    (private repo) Sync is automatically possible - Webhook - Around 5min - Press Button manually
  9. • Webspace • Docker, Docker Compose & SSL Termination •

    Simple CI Pipeline • Firebase and co • Kubernetes & ArgoCD Summary