Angular OpenShift Application

Un'applicazione Angular pronta per il deployment su OpenShift utilizzando immagini container certificate Red Hat.

🚀 Caratteristiche

• Angular 17+ con TypeScript e architettura standalone
• Container multi-stage con immagini Red Hat UBI9 certificate
• Nginx ottimizzato per applicazioni SPA (configurazione in nginx/)
• Configurazioni OpenShift complete (Deployment, Service, Route, BuildConfig)
• Security best practices con utente non-root e security context
• Health checks configurati per liveness e readiness probe
• TLS termination configurata per traffico HTTPS

🏗️ Architettura

Container Images

• Build Stage: registry.access.redhat.com/ubi9/nodejs-20 (pinnare la patch versione)
• Runtime Stage: registry.access.redhat.com/ubi9/nginx-124 (pinnare la patch versione)

Componenti OpenShift

• Deployment: Gestione dei pod con 2 repliche
• Service: Esposizione interna sulla porta 8080
• Route: Esposizione esterna con TLS edge termination
• BuildConfig: Build automatico da repository Git
• ImageStream: Gestione delle immagini container

🛠️ Setup e Sviluppo

Prerequisiti

• Node.js 18+
• npm o yarn
• Docker (per build locale)
• OpenShift CLI (oc)

Installazione

# Installa le dipendenze
npm install

# Avvia il server di sviluppo
npm start

# Build per produzione
npm run build:prod

Build Docker

# Build dell'immagine
npm run docker:build

# Run locale del container
npm run docker:run

🚢 Deployment su OpenShift

1. Login ad OpenShift

oc login <your-openshift-cluster>
oc new-project angular-app

2. Crea le risorse OpenShift

# Applica tutte le configurazioni
oc apply -f openshift/

# Verifica la creazione delle risorse
oc get all -l app=angular-openshift-app

3. Configura il BuildConfig

Aggiorna il BuildConfig con il tuo repository Git:

oc patch bc/angular-openshift-app-build -p '{"spec":{"source":{"git":{"uri":"https://github.com/your-username/your-repo.git"}}}}'

4. Avvia il build

# Build manuale
oc start-build angular-openshift-app-build --follow

# Webhook per build automatico
oc describe bc/angular-openshift-app-build | grep -A5 webhook

5. Verifica il deployment

# Controlla i pod
oc get pods -l app=angular-openshift-app

# Verifica i log
oc logs -l app=angular-openshift-app -f

# Ottieni l'URL dell'applicazione
oc get route angular-openshift-app-route

📁 Struttura del Progetto

├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── home/
│   │   │   └── about/
│   │   ├── app.component.ts
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── assets/
│   ├── index.html
│   ├── main.ts
│   └── styles.scss
├── openshift/
│   ├── deployment.yaml
│   ├── service.yaml
│   ├── route.yaml
│   ├── buildconfig.yaml
│   └── imagestream.yaml
├── Dockerfile
├── nginx.conf
├── package.json
└── angular.json

🔧 Configurazione

Nginx

I file di configurazione Nginx sono presenti nella cartella nginx/ e sono ottimizzati per:

• Serving di applicazioni SPA
• Compressione gzip
• Security headers
• Cache delle risorse statiche
• Health check endpoint

In particolare:

• nginx/nginx.conf contiene la configurazione principale (log JSON per stdout/stderr)
• nginx/default.conf contiene il server block (routing SPA, /health, caching)
• nginx/generate-config.sh crea dinamicamente /opt/app-root/src/assets/config.json al runtime usando le environment variables fornite dal pod

Esempio di runtime config generation:

# alla partenza del container lo script `generate-config.sh` legge le env e scrive
/opt/app-root/src/assets/config.json

OpenShift Security

• Container eseguito come utente non-root (UID 1001)
• Security context configurato
• Capabilities ridotte al minimo
• Network policies compatibili

Resource Limits

resources:
  limits:
    cpu: 500m
    memory: 512Mi
  requests:
    cpu: 100m
    memory: 128Mi

🔍 Health Checks

L'applicazione espone un endpoint di health check:

• URL: /health
• Response: 200 OK con body healthy
• Uso: Liveness e readiness probe di OpenShift

🔒 Sicurezza

Container Security

• Immagini Red Hat certificate e supportate
• Scansione vulnerabilità automatica
• Utente non privilegiato
• Filesystem read-only quando possibile

Network Security

• TLS termination a livello di route
• Security headers configurati
• CORS policies per API esterne

📊 Monitoring

Logs

# Logs applicazione
oc logs -l app=angular-openshift-app -f

# Logs specifico pod
oc logs <pod-name> -f

Metrics

OpenShift fornisce automaticamente:

• CPU e memoria usage
• Network traffic
• Response times
• Error rates

🚀 Scaling

Scaling manuale

# Scale a 3 repliche
oc scale deployment/angular-openshift-app --replicas=3

Horizontal Pod Autoscaler

apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: angular-openshift-app-hpa
spec:
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: angular-openshift-app
  minReplicas: 2
  maxReplicas: 10
  metrics:
  - type: Resource
    resource:
      name: cpu
      target:
        type: Utilization
        averageUtilization: 70

🔄 CI/CD

Il BuildConfig è configurato per trigger automatici su:

• Push al repository Git
• Webhook GitHub/GitLab
• Cambiamenti alla base image

Pipeline Example

# Setup webhook
oc set triggers bc/angular-openshift-app-build --from-github

# Deploy pipeline
oc create -f pipeline/tekton-pipeline.yaml

📚 Risorse Utili

• OpenShift Documentation
• Red Hat Container Catalog
• Angular Documentation
• Container Security Best Practices

🤝 Contributi

1. Fork del progetto
2. Crea un feature branch (git checkout -b feature/amazing-feature)
3. Commit delle modifiche (git commit -m 'Add amazing feature')
4. Push al branch (git push origin feature/amazing-feature)
5. Apri una Pull Request

📄 Licenza

Questo progetto è sotto licenza MIT. Vedi il file LICENSE per i dettagli.