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.

Transcript

1. Different Ways of Deploying your Angular Application Angular Meetup Vienna - 16. November 2022
2. Aim is not to be an expert afterwards, but to get an overview and some understanding of the tools
3. Outline
4. Server Deployment
5. 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"
6. Demonstration
7. Docker Deployment
8. 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)
9. Docker Deployment Check out Repository Build Repository Reverse Proxy for SSL Termination
10. Demonstration
11. Firebase Deployment
12. Firebase Deployment
13. Firebase Deployment
14. Firebase Pricing
15. Docker Container Automatisation
16. Publish Image To Registry Conventional Commits Husky commitlint Release Please Sem Versioning Github Workflow Build & Push
17. Release Please
18. Publish Container
19. Kubernetes Deployment
20. 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
21. Kubernetes - Deployment Container Container Container Container POD labels: app: frontend POD labels: app: frontend Deployment replicas: 2 matchLabels: app: frontend
22. Kubernetes - Service Container Container Container Container POD labels: app: frontend POD labels: app: frontend Service type: NodePort selector: app: frontend Network Request
23. 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
24. Kubernetes - Summary https://medium.com/devops-mojo/24d7b47bb018
25. Kubernetes Automation
26. ArgoCD Tipps: Create Repository in Settings with Token as password (private repo) Sync is automatically possible - Webhook - Around 5min - Press Button manually
27. ArgoCD
28. Demonstration
29. • Webspace • Docker, Docker Compose & SSL Termination • Simple CI Pipeline • Firebase and co • Kubernetes & ArgoCD Summary
30. Thank you Questions? Contact Information: Markus Nissl markus@markusnissl.com www.markusnissl.com markusnissl nisslmarkus markus.nissl You can hire me