Tweet
Tweet

Slide 1

Slide 1 text

Different Ways of Deploying your Angular Application Angular Meetup Vienna - 16. November 2022

Slide 2

Slide 2 text

Aim is not to be an expert afterwards, but to get an overview and some understanding of the tools

Slide 3

Slide 3 text

Outline

Slide 4

Slide 4 text

Server Deployment

Slide 5

Slide 5 text

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"

Slide 6

Slide 6 text

Demonstration

Slide 7

Slide 7 text

Docker Deployment

Slide 8

Slide 8 text

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)

Slide 9

Slide 9 text

Docker Deployment Check out Repository Build Repository Reverse Proxy for SSL Termination

Slide 10

Slide 10 text

Demonstration

Slide 11

Slide 11 text

Firebase Deployment

Slide 12

Slide 12 text

Firebase Deployment

Slide 13

Slide 13 text

Firebase Deployment

Slide 14

Slide 14 text

Firebase Pricing

Slide 15

Slide 15 text

Docker Container Automatisation

Slide 16

Slide 16 text

Publish Image To Registry Conventional Commits Husky commitlint Release Please Sem Versioning Github Workflow Build & Push

Slide 17

Slide 17 text

Release Please

Slide 18

Slide 18 text

Publish Container

Slide 19

Slide 19 text

Kubernetes Deployment

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Kubernetes - Service Container Container Container Container POD labels: app: frontend POD labels: app: frontend Service type: NodePort selector: app: frontend Network Request

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Kubernetes - Summary https://medium.com/devops-mojo/24d7b47bb018

Slide 25

Slide 25 text

Kubernetes Automation

Slide 26

Slide 26 text

ArgoCD Tipps: Create Repository in Settings with Token as password (private repo) Sync is automatically possible - Webhook - Around 5min - Press Button manually

Slide 27

Slide 27 text

ArgoCD

Slide 28

Slide 28 text

Demonstration

Slide 29

Slide 29 text

● Webspace ● Docker, Docker Compose & SSL Termination ● Simple CI Pipeline ● Firebase and co ● Kubernetes & ArgoCD Summary

Slide 30

Slide 30 text

Thank you Questions? Contact Information: Markus Nissl markus@markusnissl.com www.markusnissl.com markusnissl nisslmarkus markus.nissl You can hire me