Stencil.js Container Orchestration — จัดการ Web

Stencil.js Container

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

Layer	Technology	Purpose	Config
Build	Stencil.js Compiler	Compile Web Components	stencil.config.ts
Container	Docker (Nginx)	Serve Static Files	Dockerfile + nginx.conf
Orchestration	Kubernetes	Deploy Scale HA	Deployment + Service + Ingress
CI/CD	GitHub Actions	Build Test Deploy	.github/workflows/deploy.yml
Monitoring	Prometheus + Grafana	Metrics Alerts	ServiceMonitor + Dashboard

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:

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:

spec:

scaleTargetRef:

apiVersion: apps/v1

kind: Deployment

minReplicas: 2

maxReplicas: 10

metrics:

type: Resource

resource:

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

อ่านเพิ่ม: CI/CD ขั้นสูง Multi-Environment, Canary Deploy, GitOps สำหรั · อ่านเพิ่ม: Elixir Ecto Zero Downtime Deployment — วิธีตั้งค่าและใช้งานจ · อ่านเพิ่ม: Kubernetes คืออะไร? สอน K8s Container Orchestration ตั้งแต่

Stencil.js Container Orchestration — จัดการ Web