Shopify Hydrogen Business Continuity

Hydrogen Business Continuity

Shopify Hydrogen React Remix SSR Business Continuity DR Failover Fallback Liquid Oxygen Vercel Checkout Monitoring Alert Production

DR Architecture

# === Hydrogen DR Architecture ===

from dataclasses import dataclass

@dataclass
class DRComponent:
    component: str
    primary: str
    failover: str
    switch_method: str
    switch_time: str

dr_arch = [
    DRComponent("Storefront (Hydrogen)",
        "Oxygen (Shopify) หรือ Vercel US",
        "Vercel EU / Cloudflare Workers Global",
        "DNS Failover (Cloudflare) หรือ Vercel Auto",
        "< 2 min (DNS TTL 60s)"),
    DRComponent("Storefront Fallback",
        "Hydrogen React App",
        "Shopify Liquid Theme (Basic)",
        "Cloudflare Worker Route Switch",
        "< 5 min (Manual trigger)"),
    DRComponent("Static Assets (CSS/JS/Images)",
        "CDN Edge (Vercel/Cloudflare)",
        "Shopify CDN (cdn.shopify.com)",
        "Automatic CDN Failover",
        "< 1 min"),
    DRComponent("Storefront API",
        "Shopify Storefront API (Primary)",
        "Cached Response (Stale-while-revalidate)",
        "Cache Fallback Header",
        "Instant (Cache Hit)"),
    DRComponent("Checkout",
        "Shopify Checkout (Managed)",
        "Shopify Checkout (Same - HA Built-in)",
        "N/A (Shopify manages)",
        "N/A"),
]

print("=== DR Architecture ===")
for d in dr_arch:
    print(f"  [{d.component}]")
    print(f"    Primary: {d.primary}")
    print(f"    Failover: {d.failover}")
    print(f"    Switch: {d.switch_method} ({d.switch_time})")

Monitoring Setup

# === E-commerce Monitoring ===

# Sentry for Hydrogen (remix.config.js)
# import * as Sentry from "@sentry/remix";
# Sentry.init({
#   dsn: "https://xxx@sentry.io/xxx",
#   tracesSampleRate: 0.1,
#   environment: process.env.NODE_ENV,
# });

# Synthetic Monitor (Better Uptime / Checkly)
# - Check homepage every 30s
# - Check product page every 60s
# - Check add-to-cart flow every 5 min
# - Check checkout redirect every 5 min

@dataclass
class MonitorCheck:
    check: str
    url: str
    interval: str
    expected: str
    alert_on_fail: str

monitors = [
    MonitorCheck("Homepage",
        "https://store.example.com/",
        "30 seconds",
        "Status 200 + keyword 'Shop'",
        "P1 Slack + PagerDuty after 2 fails"),
    MonitorCheck("Product Page",
        "https://store.example.com/products/best-seller",
        "60 seconds",
        "Status 200 + keyword 'Add to Cart'",
        "P1 Slack + PagerDuty after 2 fails"),
    MonitorCheck("Collection Page",
        "https://store.example.com/collections/all",
        "60 seconds",
        "Status 200 + product count > 0",
        "P2 Slack after 3 fails"),
    MonitorCheck("Cart API",
        "https://store.example.com/cart",
        "2 minutes",
        "Status 200 + valid JSON",
        "P1 PagerDuty after 1 fail"),
    MonitorCheck("Storefront API",
        "Shopify Storefront API GraphQL",
        "60 seconds",
        "Status 200 + data.products exists",
        "P1 PagerDuty (API down = store down)"),
]

print("=== Monitoring Checks ===")
for m in monitors:
    print(f"  [{m.check}] URL: {m.url}")
    print(f"    Interval: {m.interval}")
    print(f"    Expected: {m.expected}")
    print(f"    Alert: {m.alert_on_fail}")

Incident Response

# === Incident Response Playbook ===

@dataclass
class IncidentScenario:
    scenario: str
    detection: str
    immediate_action: str
    fallback: str
    resolution: str

scenarios = [
    IncidentScenario("Hydrogen App Crash",
        "Sentry Alert Error Spike + Uptime Monitor Fail",
        "ตรวจ Sentry Error Log ดู Stack Trace",
        "Switch DNS ไป Liquid Theme ถ้าแก้ไม่ได้ใน 15 min",
        "Fix Bug Deploy Hotfix Switch DNS กลับ"),
    IncidentScenario("Oxygen/Vercel Outage",
        "Uptime Monitor Fail + Vercel Status Page",
        "ตรวจ Vercel/Oxygen Status ยืนยัน Outage",
        "DNS Failover ไป Secondary Region หรือ Liquid Theme",
        "รอ Provider กู้คืน Switch DNS กลับ"),
    IncidentScenario("Storefront API Slow/Down",
        "API Response > 2s + Sentry Timeout Errors",
        "ตรวจ Shopify Status + API Response Time",
        "Serve Cached Data (stale-while-revalidate)",
        "รอ Shopify แก้ไข Clear Cache เมื่อกลับปกติ"),
    IncidentScenario("Checkout Failure",
        "Checkout Error Rate > 5% + Customer Complaints",
        "ตรวจ Shopify Status + Payment Provider Status",
        "ใช้ Shopify Checkout URL ตรง (bypass Hydrogen)",
        "ตรวจ Integration แก้ไข Test"),
    IncidentScenario("DDoS Attack",
        "Traffic Spike + WAF Alert + Slow Response",
        "เปิด Cloudflare Under Attack Mode",
        "Rate Limiting + Bot Protection + Cache Everything",
        "ตรวจ Attack Pattern ปรับ WAF Rules"),
]

print("=== Incident Scenarios ===")
for s in scenarios:
    print(f"\n  [{s.scenario}]")
    print(f"    Detect: {s.detection}")
    print(f"    Action: {s.immediate_action}")
    print(f"    Fallback: {s.fallback}")
    print(f"    Resolve: {s.resolution}")

เคล็ดลับ

• Fallback: เตรียม Liquid Theme เป็น Fallback เสมอ
• Cache: ใช้ stale-while-revalidate สำหรับ API Response
• Multi-region: Deploy หลาย Region ด้วย Vercel/Cloudflare
• Checkout: Shopify Checkout แยก ถึง Storefront ล่ม Checkout ยังทำงาน
• Test: ทดสอบ DR Drill ทุก Quarter สลับ Failover จริง

การนำความรู้ไปประยุกต์ใช้งานจริง

แหล่งเรียนรู้ที่แนะนำ ได้แก่ Official Documentation ที่อัพเดทล่าสุดเสมอ Online Course จาก Coursera Udemy edX ช่อง YouTube คุณภาพทั้งไทยและอังกฤษ และ Community อย่าง Discord Reddit Stack Overflow ที่ช่วยแลกเปลี่ยนประสบการณ์กับนักพัฒนาทั่วโลก

เปรียบเทียบข้อดีและข้อเสีย

จากตารางเปรียบเทียบจะเห็นว่าข้อดีมีมากกว่าข้อเสียอย่างชัดเจน โดยเฉพาะในแง่ของประสิทธิภาพและความสามารถในการ Scale สำหรับข้อเสียส่วนใหญ่สามารถแก้ไขได้ด้วยการเรียนรู้อย่างเป็นระบบและวางแผนทรัพยากรให้เหมาะสม

สรุป

Shopify Hydrogen Business Continuity DR Failover Fallback Liquid Multi-region Cache Monitoring Sentry Alert Incident Response Production