Stencil.js Container Orchestration

Stencil.js Container

Stencil.js Container Orchestration Web Components Docker Kubernetes CI/CD Nginx Helm HPA Ingress TLS Design System Component Library

Docker Configuration

# === Stencil.js Docker Setup ===

# Dockerfile (Multi-stage Build)
# FROM node:20-alpine AS builder
# WORKDIR /app
# COPY package*.json ./
# RUN npm ci --no-audit
# COPY . .
# RUN npm run build
#
# FROM nginx:alpine
# COPY --from=builder /app/www /usr/share/nginx/html
# COPY nginx.conf /etc/nginx/conf.d/default.conf
# EXPOSE 80
# HEALTHCHECK --interval=30s --timeout=3s \
#   CMD wget -q --spider http://localhost/ || exit 1

# nginx.conf (SPA Routing)
# server {
#     listen 80;
#     root /usr/share/nginx/html;
#     index index.html;
#
#     location / {
#         try_files $uri $uri/ /index.html;
#     }
#
#     location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
#         expires 1y;
#         add_header Cache-Control "public, immutable";
#     }
#
#     gzip on;
#     gzip_types text/plain text/css application/json application/javascript;
# }

# docker-compose.yml (Development)
# version: '3.8'
# services:
#   stencil-app:
#     build: .
#     ports: ['8080:80']
#     volumes:
#       - ./www:/usr/share/nginx/html
#     healthcheck:
#       test: ['CMD', 'wget', '-q', '--spider', 'http://localhost/']

from dataclasses import dataclass

@dataclass
class DockerConfig:
    stage: str
    image: str
    purpose: str
    size: str

docker_stages = [
    DockerConfig("Builder",
        "node:20-alpine",
        "Install Dependencies + Build Stencil App",
        "~300MB (ไม่อยู่ใน Final Image)"),
    DockerConfig("Production",
        "nginx:alpine",
        "Serve Static Files + SPA Routing",
        "~20-30MB"),
]

print("=== Docker Stages ===")
for d in docker_stages:
    print(f"  [{d.stage}] {d.image}")
    print(f"    Purpose: {d.purpose}")
    print(f"    Size: {d.size}")

Kubernetes Deployment

# === Kubernetes Deployment Configuration ===

# apiVersion: apps/v1
# kind: Deployment
# metadata:
#   name: stencil-app
# spec:
#   replicas: 3
#   strategy:
#     type: RollingUpdate
#     rollingUpdate:
#       maxSurge: 1
#       maxUnavailable: 0
#   template:
#     spec:
#       containers:
#         - name: stencil-app
#           image: registry.example.com/stencil-app:v1.2.0
#           ports:
#             - containerPort: 80
#           resources:
#             requests:
#               cpu: 100m
#               memory: 128Mi
#             limits:
#               cpu: 500m
#               memory: 256Mi
#           livenessProbe:
#             httpGet:
#               path: /
#               port: 80
#             initialDelaySeconds: 5
#             periodSeconds: 10
#           readinessProbe:
#             httpGet:
#               path: /
#               port: 80
#             initialDelaySeconds: 3
#             periodSeconds: 5
# ---
# apiVersion: autoscaling/v2
# kind: HorizontalPodAutoscaler
# metadata:
#   name: stencil-app-hpa
# spec:
#   scaleTargetRef:
#     apiVersion: apps/v1
#     kind: Deployment
#     name: stencil-app
#   minReplicas: 2
#   maxReplicas: 10
#   metrics:
#     - type: Resource
#       resource:
#         name: cpu
#         target:
#           type: Utilization
#           averageUtilization: 70

@dataclass
class K8sResource:
    resource: str
    purpose: str
    key_config: str

k8s_resources = [
    K8sResource("Deployment",
        "จัดการ Pod Replicas Rolling Update",
        "replicas: 3, strategy: RollingUpdate, resources, probes"),
    K8sResource("Service (ClusterIP)",
        "Internal Load Balancing ระหว่าง Pods",
        "port: 80, targetPort: 80, selector: app=stencil-app"),
    K8sResource("Ingress",
        "External Access + TLS + Domain Routing",
        "host: app.example.com, tls: cert-manager, path: /"),
    K8sResource("HPA",
        "Auto-scale ตาม CPU Usage",
        "min: 2, max: 10, cpu: 70%"),
    K8sResource("PodDisruptionBudget",
        "ป้องกัน Downtime ตอน Node Maintenance",
        "minAvailable: 1"),
    K8sResource("ConfigMap",
        "Nginx Config + Environment Variables",
        "nginx.conf, API_URL, CDN_URL"),
]

print("=== K8s Resources ===")
for r in k8s_resources:
    print(f"  [{r.resource}] {r.purpose}")
    print(f"    Config: {r.key_config}")

CI/CD Pipeline

# === GitHub Actions CI/CD Pipeline ===

# .github/workflows/deploy.yml
# name: Build and Deploy
# on:
#   push:
#     branches: [main, develop]
#     tags: ['v*']
# jobs:
#   build:
#     runs-on: ubuntu-latest
#     steps:
#       - uses: actions/checkout@v4
#       - uses: actions/setup-node@v4
#         with: { node-version: 20 }
#       - run: npm ci
#       - run: npm run lint
#       - run: npm run test
#       - run: npm run build
#       - uses: docker/build-push-action@v5
#         with:
#           push: true
#           tags: registry.example.com/stencil-app:}
#   deploy:
#     needs: build
#     runs-on: ubuntu-latest
#     steps:
#       - uses: azure/k8s-set-context@v3
#       - run: |
#           helm upgrade --install stencil-app ./helm \
#             --set image.tag=} \
#             --namespace production

@dataclass
class PipelineStage:
    stage: str
    commands: str
    duration: str
    fail_action: str

pipeline = [
    PipelineStage("Install",
        "npm ci --no-audit",
        "30-60s",
        "Block: dependency issue"),
    PipelineStage("Lint",
        "npm run lint (ESLint + Prettier)",
        "10-20s",
        "Block: fix code style"),
    PipelineStage("Test",
        "npm run test (Jest + Stencil Testing)",
        "30-120s",
        "Block: fix failing tests"),
    PipelineStage("Build",
        "npm run build (Stencil Compiler)",
        "30-60s",
        "Block: fix build errors"),
    PipelineStage("Docker Build + Push",
        "docker build + push to registry",
        "60-120s",
        "Block: fix Dockerfile"),
    PipelineStage("Deploy (Helm)",
        "helm upgrade --install",
        "30-60s",
        "Auto-rollback on failure"),
]

print("=== CI/CD Pipeline ===")
for p in pipeline:
    print(f"  [{p.stage}] Duration: {p.duration}")
    print(f"    Commands: {p.commands}")
    print(f"    Fail: {p.fail_action}")

เคล็ดลับ

• Multi-stage: ใช้ Multi-stage Docker Build ลด Image Size 90%
• Cache: ตั้ง Cache Headers สำหรับ Static Assets 1 ปี
• HPA: ตั้ง HPA Min 2 สำหรับ HA ไม่ต้อง Scale-to-zero
• Helm: ใช้ Helm Chart จัดการ K8s Resources แยก Environment
• CDN: ใช้ CDN (CloudFlare Fastly) หน้า Ingress ลด Load

Stencil.js คืออะไร

Compiler Web Components TypeScript JSX Ionic Lazy Loading SSR Pre-rendering ใช้กับทุก Framework React Angular Vue Design System

สรุป

Stencil.js Container Orchestration Docker Nginx Kubernetes Deployment HPA Ingress Helm CI/CD GitHub Actions Web Components Production