การปรับใช้แอปพลิเคชัน React สู่ Production: การตั้งค่า Docker ฉบับสมบูรณ์พร้อม Traefik Reverse Proxy

การสร้างแอปพลิเคชัน React บนเครื่องท้องถิ่นนั้นตรงไปตรงมา แต่การปรับใช้บนเซิร์ฟเวอร์ production อย่างถูกต้อง? นั่นคือจุดที่นักพัฒนาส่วนใหญ่พบอุปสรรคที่ไม่คาดคิด คู่มือนี้บันทึกเซสชันการดีบักการปรับใช้จริงที่ทุกอย่างดูเหมือนกำหนดค่าถูกต้อง—container ทำงาน Traefik labels ตั้งค่าแล้ว DNS resolve ได้—แต่แอปพลิเคชันกลับแสดงข้อผิดพลาด 404 อย่างต่อเนื่อง

วันนี้เราจะพาคุณผ่านกระบวนการทั้งหมดของการสร้างแอปพลิเคชัน React บนเครื่องท้องถิ่นและปรับใช้บนเซิร์ฟเวอร์ Docker สำหรับ production ด้วยการกำหนดค่า reverse proxy ที่เหมาะสม SSL อัตโนมัติ และการกำหนดเส้นทางโดเมนระดับมืออาชีพ แนวทางนี้สร้างต่อยอดจากปรัชญาโซลูชัน self-hosted ของเรา—คล้ายกับที่เราแสดงให้เห็นว่าคุณสามารถโฮสต์ n8n ด้วยตัวเองสำหรับระบบอัตโนมัติเวิร์กโฟลว์ และ สร้าง development stack แบบ multi-tenant เพื่อการควบคุมการดำเนินงานอย่างสมบูรณ์

ปัญหาของการปรับใช้ React แบบดั้งเดิม

บทเรียนการปรับใช้ React ส่วนใหญ่ข้ามรายละเอียด production ที่สำคัญ คุณจะพบคู่มือที่แสดง npm run build และคัดลอกไฟล์ไปยัง nginx แต่แทบไม่เคยครอบคลุม:

ความขัดแย้งในการกำหนดค่า:

• HTTP routers แบบกำหนดเองที่แทนที่ global redirects
• ข้อผิดพลาด syntax ของ Traefik labels ที่ทำให้เกิดการล้มเหลวแบบเงียบ
• ปัญหาการ bind IPv6 กับ IPv4 ใน health checks
• การแมป service port ที่ขาดหายไปซึ่งทำให้เกิดข้อผิดพลาด 404

การจัดการทรัพยากร:

• ข้อผิดพลาดดิสก์เต็มที่ป้องกันการลงทะเบียน container
• Docker image ที่บวมจาก build artifacts ที่ไม่จำเป็น
• กลยุทธ์แคชที่ไม่มีประสิทธิภาพซึ่งทำให้การปรับใช้ช้าลง
• ข้อจำกัดหน่วยความจำที่ส่งผลต่อประสิทธิภาพการ build

ความพร้อมสำหรับ Production:

• ระบบอัตโนมัติใบรับรอง SSL ที่เหมาะสม
• กลยุทธ์การปรับใช้แบบไม่มี downtime
• การกำหนดค่า health check
• การบูรณาการ logging และ monitoring

ผลลัพธ์? เสียเวลาหลายชั่วโมงในการดีบักว่าทำไมแอปท้องถิ่นที่ทำงานได้สมบูรณ์แบบกลับแสดงข้อผิดพลาด 404 ลึกลับใน production แม้ว่า “ทุกอย่างดูถูกต้อง”

เครื่องมือที่เราใช้

มาทำความเข้าใจว่าแต่ละส่วนทำอะไรในสถาปัตยกรรมการปรับใช้ React ที่คล่องตัวของเรา:

Vite: เครื่องมือ Build สมัยใหม่

Vite ให้การพัฒนาที่รวดเร็วเป็นพิเศษและ production builds ที่เพิ่มประสิทธิภาพ ต่างจาก Create React App ตรงที่ Vite ใช้ประโยชน์จาก ES modules แบบเนทีฟระหว่างการพัฒนาและสร้าง bundles ที่เพิ่มประสิทธิภาพสูงสำหรับ production แอป React ของคุณ build ได้ในไม่กี่วินาทีแทนที่จะเป็นนาที

ข้อได้เปรียบที่สำคัญ? Vite จัดการ code splitting, tree shaking และ asset optimization โดยอัตโนมัติ คุณได้ builds ที่พร้อมสำหรับ production โดยไม่ต้องกำหนดค่า webpack ที่ซับซ้อน

Docker: Containerization เพื่อความสอดคล้อง

Docker รับประกันว่าแอป React ของคุณทำงานเหมือนกันในการพัฒนาและ production nginx container เดียวกันที่ให้บริการแอปของคุณบนเครื่องท้องถิ่นจะทำงานเหมือนกันทุกประการบนเซิร์ฟเวอร์ production ของคุณ—ขจัดปัญหา “ทำงานได้บนเครื่องของฉัน” แบบคลาสสิก

คิดว่า Docker เป็นการบรรจุสภาพแวดล้อมแอปพลิเคชันทั้งหมดของคุณ (ไฟล์ React build, การกำหนดค่า nginx และ runtime) ลงใน container แบบพกพาที่ทำงานได้ทุกที่

Traefik: Reverse Proxy อัจฉริยะ

Traefik ทำหน้าที่เป็นผู้กำกับทราฟฟิกอัจฉริยะ กำหนดเส้นทางคำขอไปยังแอปพลิเคชัน containerized ที่ถูกต้องโดยอัตโนมัติตามชื่อโดเมน แทนที่จะกำหนดค่ากฎ nginx หรือ Apache ที่ซับซ้อนด้วยตนเองสำหรับทุกแอปพลิเคชันใหม่ Traefik อ่าน labels จาก Docker containers ของคุณและตั้งค่าการกำหนดเส้นทางโดยอัตโนมัติ

ในการตั้งค่า Docker แบบ multi-tenant ของเรา เราได้แสดงพลังของ Traefik สำหรับการจัดการสภาพแวดล้อมลูกค้าหลายราย หลักการเดียวกันนี้ใช้ได้ที่นี่สำหรับการจัดการแอปพลิเคชัน React หลายตัวบนเซิร์ฟเวอร์เดียว

ความสวยงามคือ Traefik จัดการ SSL termination ผ่าน Let’s Encrypt โดยอัตโนมัติ ให้ automatic service discovery และเสนอ monitoring อย่างละเอียด—ทั้งหมดด้วยการกำหนดค่าน้อยที่สุด

nginx: เว็บเซิร์ฟเวอร์สำหรับ Production

nginx ให้บริการไฟล์ React build แบบ static ของคุณด้วยประสิทธิภาพที่ยอดเยี่ยม เป็นมาตรฐานโดยพฤตินัยสำหรับการให้บริการเนื้อหาแบบ static ใน production จัดการการเชื่อมต่อพร้อมกันหลายพันรายการอย่างมีประสิทธิภาพในขณะที่ใช้ทรัพยากรน้อยที่สุด

ทำความเข้าใจขั้นตอนการปรับใช้

นี่คือเส้นทางทั้งหมดจากการพัฒนาท้องถิ่นถึง production:

1. การพัฒนาท้องถิ่น: สร้างและทดสอบแอป React ด้วย npm run dev
2. Production Build: สร้างไฟล์ static ที่เพิ่มประสิทธิภาพด้วย npm run build
3. Containerization: บรรจุไฟล์ build ลงใน nginx Docker container
4. การปรับใช้บนเซิร์ฟเวอร์: อัปโหลดและเริ่ม container บนเซิร์ฟเวอร์ production
5. การลงทะเบียน Traefik: การกำหนดเส้นทางอัตโนมัติและการออกใบรับรอง SSL
6. การตรวจสอบสุขภาพ: Health checks อย่างต่อเนื่องเพื่อรับประกันความพร้อมใช้งาน

สิ่งที่ทำให้สิ่งนี้ทรงพลังคือระบบอัตโนมัติ เมื่อกำหนดค่าอย่างถูกต้องแล้ว คุณสามารถปรับใช้อัปเดตได้ภายใน 60 วินาทีด้วยคำสั่งเดียว

การตั้งค่าแอปพลิเคชัน React

โครงสร้างโปรเจกต์สำหรับ Production

จัดระเบียบโปรเจกต์ React ของคุณโดยคำนึงถึงการปรับใช้:

my-react-app/
├── src/                    # React source code
├── public/                 # Static assets
├── dist/                   # Build output (auto-generated)
├── package.json           # Dependencies
├── vite.config.ts         # Vite configuration
├── Dockerfile             # Container definition
├── nginx.conf             # nginx configuration
└── docker-compose.yml     # Deployment definition

การเพิ่มประสิทธิภาพการกำหนดค่า Vite

สร้าง vite.config.ts ด้วยการตั้งค่าที่เพิ่มประสิทธิภาพสำหรับ production:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    sourcemap: false, // Disable in production for security
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
  server: {
    port: 3000,
    host: true, // Enable network access
  },
})

การกำหนดค่านี้:

• แยก vendor libraries สำหรับการแคชที่ดีขึ้น
• ย่อโค้ดเพื่อขนาดไฟล์ที่เล็กลง
• ปิด source maps ใน production (ป้องกันการเปิดเผยโค้ด)
• เพิ่มประสิทธิภาพ chunk splitting สำหรับเวลาโหลดที่เร็วขึ้น

การ Build สำหรับ Production

สร้าง production bundle ที่เพิ่มประสิทธิภาพ:

# Install dependencies
npm install

# Create production build
npm run build

# Verify build output
ls -lh dist/

โฟลเดอร์ dist/ ของคุณควรมี:

• index.html – จุดเข้า
• assets/ – JS, CSS และรูปภาพที่ย่อแล้ว
• ไฟล์ static จาก public/

การสร้าง Container สำหรับ Production

การกำหนดค่า nginx สำหรับ React

แอปพลิเคชัน React ใช้ client-side routing ซึ่งต้องการการกำหนดค่า nginx พิเศษ สร้าง nginx.conf:

server {
    listen 80;
    server_name _;
    
    root /usr/share/nginx/html;
    index index.html;

    # Gzip compression for better performance
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript 
               application/x-javascript application/xml+rss 
               application/javascript application/json;

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    # SPA: Route all paths to index.html for client-side routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache static assets aggressively
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # No cache for HTML to ensure updates are immediate
    location ~* \.html$ {
        expires -1;
        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    }

    # Health check endpoint for monitoring
    location /health {
        access_log off;
        return 200 "healthy\n";
        add_header Content-Type text/plain;
    }
}

ส่วนสำคัญคือ try_files $uri $uri/ /index.html ซึ่งรับประกันว่า React Router ทำงานถูกต้องใน production—ทุกเส้นทางจะได้รับไฟล์ index.html หลัก

Dockerfile สำหรับ Production

สร้าง Dockerfile ที่เพิ่มประสิทธิภาพ:

FROM nginx:alpine

# Copy custom nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy production build files
COPY dist/ /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

ใช้ nginx:alpine สำหรับ production image ขนาดเล็ก (เพียง ~8MB) ที่มีทุกอย่างที่จำเป็นเพื่อให้บริการแอป React ของคุณ

การกำหนดค่า Docker Compose

สร้าง docker-compose.yml สำหรับการปรับใช้ที่ง่าย:

services:
  my-react-app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: my-react-app
    restart: unless-stopped
    networks:
      - proxy
    labels:
      # Enable Traefik
      - "traefik.enable=true"
      
      # Define routing rule
      - "traefik.http.routers.myapp.rule=Host(`app.yourdomain.com`)"
      - "traefik.http.routers.myapp.entrypoints=https"
      - "traefik.http.routers.myapp.tls=true"
      - "traefik.http.routers.myapp.tls.certresolver=letsencrypt"
      
      # Define service port
      - "traefik.http.services.myapp.loadbalancer.server.port=80"
      
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://127.0.0.1:80/health"]
      interval: 30s
      timeout: 3s
      retries: 3
      start_period: 5s

networks:
  proxy:
    external: true

หมายเหตุการกำหนดค่าที่สำคัญ:

ส่วน labels คือจุดที่การปรับใช้หลายครั้งล้มเหลว สังเกตสิ่งที่เราไม่ได้รวมไว้:

• ไม่มีการกำหนด HTTP router แยก
• ไม่มี redirect middleware แบบกำหนดเอง
• ไม่มีการกำหนดค่า HTTP entrypoint

ทำไม? เพราะการกำหนดค่า global ของ Traefik จัดการ HTTP→HTTPS redirects อยู่แล้ว การเพิ่ม HTTP routers แบบกำหนดเองจะแทนที่พฤติกรรมนี้และทำให้เกิดข้อผิดพลาด 404—ซึ่งเป็นปัญหาที่เราแก้ไขได้ในเซสชันดีบักของเรา

การปรับใช้บนเซิร์ฟเวอร์ Production

ข้อกำหนดเบื้องต้นบนเซิร์ฟเวอร์

เซิร์ฟเวอร์ production ของคุณต้องการ:

สภาพแวดล้อม Docker:

# Verify Docker is installed
docker --version
docker compose --version

# Verify Traefik is running
docker ps | grep traefik

# Verify proxy network exists
docker network ls | grep proxy

หาก Traefik ยังไม่ได้ตั้งค่า ดูคู่มือ Docker แบบ multi-tenant ของเราซึ่งครอบคลุมการตั้งค่า Traefik ที่ครอบคลุม

พื้นที่ดิสก์เพียงพอ:

# Check available space
df -h /

# You need at least 2-5GB free for Docker operations

การกำหนดค่า DNS:

• ชี้ app.yourdomain.com ไปยัง IP address ของเซิร์ฟเวอร์
• รอการกระจาย DNS (โดยปกติ 5-60 นาที)

การอัปโหลดแอปพลิเคชัน

ถ่ายโอนแอปพลิเคชันไปยังเซิร์ฟเวอร์:

# From your local machine
scp -r my-react-app/ user@your-server:/opt/

# Or use rsync for efficient updates
rsync -avz --exclude 'node_modules' \
  my-react-app/ user@your-server:/opt/my-react-app/

การ Build และเริ่ม Container

SSH เข้าสู่เซิร์ฟเวอร์และปรับใช้:

# Navigate to application directory
cd /opt/my-react-app

# Build the Docker image
docker compose build

# Start the container
docker compose up -d

# Verify it's running
docker compose ps

การตรวจสอบการปรับใช้

ตรวจสอบว่าทุกอย่างทำงาน:

# Test container health internally
docker compose exec my-react-app wget -q -O- http://127.0.0.1/health

# Check Traefik routing (wait 30 seconds for SSL)
curl -I https://app.yourdomain.com

# View container logs
docker compose logs -f

คุณควรเห็น HTTP/2 200 จากคำสั่ง curl ซึ่งบ่งชี้ความสำเร็จ

ความล้มเหลวในการปรับใช้ที่พบบ่อยและโซลูชัน

ข้อผิดพลาด 404 แม้จะกำหนดค่าถูกต้อง

อาการ: Traefik แสดง HTTP/2 404 แม้ว่า container ทำงานได้ภายใน

สาเหตุหลัก: การกำหนด router หลายตัวสำหรับบริการเดียวกันโดยไม่มีการแมป service port ที่เหมาะสม หรือ HTTP routers แบบกำหนดเองที่แทนที่ global redirects ของ Traefik

วิธีแก้ไข:

# Remove these labels if present:
# - "traefik.http.middlewares.myapp-redirect.redirectscheme.scheme=https"
# - "traefik.http.routers.myapp-http.rule=Host(`app.yourdomain.com`)"
# - "traefik.http.routers.myapp-http.entrypoints=http"
# - "traefik.http.routers.myapp-http.middlewares=myapp-redirect"

# Keep only HTTPS router:
labels:
  - "traefik.enable=true"
  - "traefik.http.routers.myapp.rule=Host(`app.yourdomain.com`)"
  - "traefik.http.routers.myapp.entrypoints=https"
  - "traefik.http.routers.myapp.tls.certresolver=letsencrypt"
  - "traefik.http.services.myapp.loadbalancer.server.port=80"

Global HTTP→HTTPS redirect ของ Traefik (กำหนดค่าใน traefik.yml) จัดการ HTTP traffic โดยอัตโนมัติ HTTP routers แบบกำหนดเองต่อบริการสร้างการขัดแย้ง

สถานะ Container ไม่สมบูรณ์

อาการ: docker compose ps แสดง container เป็น “unhealthy”

สาเหตุหลัก: Health check ใช้ localhost ซึ่ง resolve เป็น IPv6 [::1] แต่ nginx ฟังเฉพาะ IPv4

วิธีแก้ไข:

healthcheck:
  # Use explicit IPv4 address instead of localhost
  test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://127.0.0.1:80/health"]

Docker Build ล้มเหลวด้วย “No Space Left”

อาการ: Build ล้มเหลวด้วยข้อผิดพลาดพื้นที่ดิสก์

วิธีแก้ไข:

# Check disk usage
df -h /

# Clean Docker system
docker system prune -a -f

# Remove unused images
docker image prune -a -f

# Remove unused volumes
docker volume prune -f

หากดิสก์เต็มจริงๆ (>95%) คุณต้องเพิ่มพื้นที่หรือขยายที่เก็บข้อมูล การดำเนินการ Docker ต้องการพื้นที่ชั่วคราวสำหรับ layer caching และ building

ใบรับรอง SSL ไม่สร้าง

อาการ: Curl แสดงใบรับรอง self-signed หลัง 10+ นาที

สาเหตุทั่วไป:

1. DNS ไม่ได้ชี้ไปยังเซิร์ฟเวอร์อย่างถูกต้อง
2. พอร์ต 80/443 ไม่สามารถเข้าถึงจากอินเทอร์เน็ต
3. ถึงขีดจำกัดอัตรา Let’s Encrypt (5 ต่อโดเมนต่อสัปดาห์)

วิธีแก้ไข:

# Verify DNS resolution
dig app.yourdomain.com

# Test port accessibility
curl -I http://app.yourdomain.com

# Check Traefik logs for ACME errors
docker logs traefik | grep -i acme

# Restart Traefik if needed
docker restart traefik

ข้อผิดพลาด 404 ของ React Router เมื่อรีเฟรช

อาการ: แอปทำงานเมื่อโหลดครั้งแรกแต่แสดง 404 เมื่อรีเฟรชบนเส้นทางเช่น /about

สาเหตุหลัก: ขาด directive try_files ในการกำหนดค่า nginx

วิธีแก้ไข: ตรวจสอบว่า nginx.conf ของคุณมี:

location / {
    try_files $uri $uri/ /index.html;
}

สิ่งนี้บอก nginx ให้ให้บริการ index.html สำหรับทุกเส้นทาง ให้ React Router จัดการ routing ฝั่งไคลเอนต์

Container เริ่มต้นแต่ Traefik เข้าถึงไม่ได้

อาการ: Container ทำงานแต่ Traefik แสดง “Service Unavailable”

วิธีแก้ไข:

# Verify container is on correct network
docker network inspect proxy

# Check if container is listed
docker inspect my-react-app | grep -A 20 Networks

# Ensure proxy network exists
docker network create proxy

การเพิ่มประสิทธิภาพสำหรับ Production

การนำการปรับใช้แบบ Zero-Downtime มาใช้

อัปเดตแอปพลิเคชันโดยไม่มี downtime:

#!/bin/bash
# deploy-update.sh - Zero-downtime deployment

cd /opt/my-react-app

# Pull latest code (from git or updated files)
git pull origin main

# Build new production assets
npm install
npm run build

# Build new Docker image
docker compose build

# Start new container (old one still running)
docker compose up -d --no-deps --build my-react-app

# Traefik automatically routes to healthy container
# Old container is automatically stopped after new one is healthy

Health Checks ขั้นสูง

นำ health monitoring ที่ครอบคลุมมาใช้:

healthcheck:
  test: |
    wget --no-verbose --tries=1 --spider http://127.0.0.1:80/health &&
    wget --no-verbose --tries=1 --spider http://127.0.0.1:80/ 
  interval: 30s
  timeout: 5s
  retries: 3
  start_period: 10s

สิ่งนี้ตรวจสอบทั้ง health endpoint และเส้นทางแอปพลิเคชันหลัก ช่วยให้มั่นใจว่าแอปทั้งหมดตอบสนองอย่างถูกต้อง

การเพิ่มประสิทธิภาพ

ปรับแต่ง nginx เพื่อประสิทธิภาพที่ดีขึ้น:

# Add to nginx.conf
server {
    # ... existing config ...
    
    # Increase buffer sizes for large headers
    client_header_buffer_size 1k;
    large_client_header_buffers 4 8k;
    
    # Enable keep-alive connections
    keepalive_timeout 65;
    keepalive_requests 100;
    
    # Optimize file serving
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
}

ขีดจำกัดทรัพยากร

ป้องกันการใช้ทรัพยากรจนหมดด้วยขีดจำกัด container:

services:
  my-react-app:
    # ... existing config ...
    deploy:
      resources:
        limits:
          cpus: '0.5'
          memory: 512M
        reservations:
          cpus: '0.25'
          memory: 256M

nginx ที่ให้บริการไฟล์ React แบบ static ต้องการทรัพยากรน้อยมาก—หน่วยความจำ 512MB และ CPU core ครึ่งหนึ่งรองรับผู้ใช้พร้อมกันหลายพันราย

ทำไมการปรับใช้ Docker แบบ Self-Hosted จึงสำคัญ

การโฮสต์แอปพลิเคชัน React ด้วยตัวเองบนโครงสร้างพื้นฐาน Docker ให้คุณควบคุม deployment pipeline ได้อย่างสมบูรณ์โดยไม่ผูกติดกับผู้จำหน่าย คุณสามารถปรับใช้แอปพลิเคชันไม่จำกัดบนโครงสร้างพื้นฐานของคุณเอง ปรับแต่งทุกส่วนของกระบวนการปรับใช้ และบูรณาการอย่างราบรื่นกับบริการ self-hosted ที่มีอยู่

แนวทางนี้ทำงานได้ดีเป็นพิเศษเมื่อรวมกับสถาปัตยกรรม Docker แบบ multi-tenant ของเรา ซึ่งคุณสามารถโฮสต์แอปพลิเคชันลูกค้าหลายตัวบนโครงสร้างพื้นฐานเดียวกันด้วยการแยกจากกันอย่างสมบูรณ์

ระบบอัตโนมัติและการบูรณาการ CI/CD

การปรับใช้ด้วย GitHub Actions

ทำให้การปรับใช้เป็นอัตโนมัติทุกครั้งที่ push:

# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Build React app
        run: |
          npm ci
          npm run build
      
      - name: Deploy to server
        uses: appleboy/scp-action@v0.1.4
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: "dist/,Dockerfile,nginx.conf,docker-compose.yml"
          target: "/opt/my-react-app"
      
      - name: Restart container
        uses: appleboy/ssh-action@v0.1.10
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /opt/my-react-app
            docker compose up -d --build

GitLab CI/CD Pipeline

สำหรับผู้ใช้ GitLab:

# .gitlab-ci.yml
stages:
  - build
  - deploy

build:
  stage: build
  image: node:18
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - dist/
    expire_in: 1 hour

deploy:
  stage: deploy
  image: alpine:latest
  before_script:
    - apk add --no-cache openssh-client
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
  script:
    - scp -r dist/ Dockerfile nginx.conf docker-compose.yml $SERVER_USER@$SERVER_HOST:/opt/my-react-app/
    - ssh $SERVER_USER@$SERVER_HOST "cd /opt/my-react-app && docker compose up -d --build"
  only:
    - main

การตรวจสอบการปรับใช้ Production

กลยุทธ์ Logging

นำ logging ที่ครอบคลุมมาใช้:

# Add to docker-compose.yml
services:
  my-react-app:
    # ... existing config ...
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"

ดู logs อย่างมีประสิทธิภาพ:

# Real-time logs
docker compose logs -f my-react-app

# Last 100 lines
docker compose logs --tail=100 my-react-app

# Logs from specific time
docker compose logs --since=2h my-react-app

# Filter for errors only
docker compose logs my-react-app | grep -i error

ตัวชี้วัดและการแจ้งเตือน

ตรวจสอบสุขภาพ container:

#!/bin/bash
# health-check.sh - Regular health monitoring

CONTAINER="my-react-app"
WEBHOOK_URL="your-notification-webhook"

STATUS=$(docker inspect --format='{{.State.Health.Status}}' $CONTAINER)

if [ "$STATUS" != "healthy" ]; then
    curl -X POST $WEBHOOK_URL \
      -H 'Content-Type: application/json' \
      -d "{\"text\":\"Container $CONTAINER is $STATUS\"}"
fi

รันผ่าน cron ทุก 5 นาทีสำหรับ monitoring พื้นฐาน

การเชื่อมต่อ React กับโครงสร้างพื้นฐาน Backend

แอป React ของคุณน่าจะต้องสื่อสารกับบริการ backend สิ่งนี้บูรณาการกับโครงสร้างพื้นฐาน self-hosted ได้อย่างเป็นธรรมชาติ หากคุณรัน n8n สำหรับระบบอัตโนมัติเวิร์กโฟลว์ หรือ Windmill สำหรับเวิร์กโฟลว์ backend กำหนดค่า CORS และ API routing ที่เหมาะสมในการกำหนดค่า nginx ของคุณ:

# Add to nginx.conf for API proxying
location /api {
    proxy_pass http://your-backend-service:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

สิ่งนี้ทำงานได้อย่างราบรื่นเมื่อทุกบริการเป็นส่วนหนึ่งของ Docker network เดียวกัน ตามที่แสดงในคู่มือสถาปัตยกรรม multi-tenant ของเรา

Builds เฉพาะสภาพแวดล้อม

สภาพแวดล้อมที่แตกต่างกันมักต้องการการกำหนดค่าที่แตกต่างกัน:

// vite.config.ts
export default defineConfig(({ mode }) => ({
  plugins: [react()],
  define: {
    'import.meta.env.VITE_API_URL': JSON.stringify(
      mode === 'production' 
        ? 'https://api.yourdomain.com'
        : 'http://localhost:3000'
    ),
  },
  build: {
    outDir: 'dist',
    sourcemap: mode !== 'production',
  },
}))

Build สำหรับสภาพแวดล้อมที่แตกต่างกัน:

# Development build
npm run build -- --mode development

# Staging build  
npm run build -- --mode staging

# Production build
npm run build -- --mode production

คุณค่าที่แท้จริงของการเข้าใจการตั้งค่านี้

แนวทางการปรับใช้นี้มีความสำคัญหากคุณ:

จัดการหลายแอปพลิเคชัน:

• ปรับใช้แอป React ร่วมกับบริการ backend บนโครงสร้างพื้นฐานเดียวกัน
• ใช้กระบวนการปรับใช้ที่สอดคล้องกันข้ามทุกโปรเจกต์
• บูรณาการกับเครื่องมือ self-hosted เช่น n8n และ Windmill

สร้างสำหรับลูกค้า:

• โดเมนกำหนดเองที่ปลอดภัยด้วย SSL ระดับมืออาชีพ
• ควบคุมโครงสร้างพื้นฐานและการปรับใช้ได้อย่างสมบูรณ์
• ไม่มีข้อจำกัดของแพลตฟอร์มหรือการผูกติดกับผู้จำหน่าย

เรียนรู้โครงสร้างพื้นฐาน:

• เข้าใจพื้นฐาน Docker containerization
• เชี่ยวชาญการกำหนดค่า Traefik reverse proxy
• ดีบักปัญหาการปรับใช้ production อย่างเป็นระบบ

การตั้งค่าที่บันทึกไว้ที่นี่อิงจากเซสชันดีบักจริง—ปัญหาที่อธิบายเกิดขึ้นจริง และโซลูชันทำงานได้จริง สิ่งนี้ทำให้มีคุณค่ามากกว่าบทเรียนเชิงทฤษฎีเพราะคุณเห็นข้อผิดพลาดจริงและวิธีหลีกเลี่ยง

เมื่อรวมกับสถาปัตยกรรม Docker แบบ multi-tenant ของเรา สิ่งนี้เป็นรากฐานสำหรับการส่งมอบแอปพลิเคชัน self-hosted ที่ขยายขนาดได้ซึ่งคุณควบคุมได้อย่างเต็มที่

ทรัพยากรที่เกี่ยวข้อง

สำหรับคู่มือโครงสร้างพื้นฐาน self-hosted เพิ่มเติม ดูทรัพยากรเหล่านี้:

• การโฮสต์ n8n ด้วยตัวเองสำหรับระบบอัตโนมัติเวิร์กโฟลว์ – ทำให้การปรับใช้และงานโครงสร้างพื้นฐานเป็นอัตโนมัติ
• การโฮสต์ Windmill ด้วยตัวเองด้วย Docker – แพลตฟอร์มระบบอัตโนมัติเวิร์กโฟลว์ทางเลือก
• การสร้าง Docker stacks แบบ multi-tenant – การตั้งค่า Traefik ที่ครอบคลุมสำหรับหลายแอปพลิเคชัน
• tva Duplicate Pro – เครื่องมืออัตโนมัติ WordPress สำหรับเวิร์กโฟลว์เนื้อหา

คู่มือเหล่านี้แสดงแง่มุมต่างๆ ของการสร้างโครงสร้างพื้นฐาน self-hosted ที่ให้คุณควบคุมได้อย่างสมบูรณ์ในขณะที่รักษามาตรฐานระดับมืออาชีพ

รับการสนับสนุนจากผู้เชี่ยวชาญ

การตั้งค่าการปรับใช้ React ระดับ production เกี่ยวข้องกับข้อพิจารณาด้านโครงสร้างพื้นฐานหลายประการ แม้ว่าเราได้ให้เอกสารที่ครอบคลุม แต่ทุกโปรเจกต์มีข้อกำหนดเฉพาะ ข้อจำกัดโครงสร้างพื้นฐานที่มีอยู่ และความต้องการประสิทธิภาพเฉพาะ

หากคุณกำลังนำโครงสร้างพื้นฐานการปรับใช้ React มาใช้สำหรับ production หรือต้องการการปรับแต่งสำหรับความต้องการการส่งมอบลูกค้าเฉพาะของคุณ เราสามารถช่วยเหลือ:

• Deployment pipelines แบบกำหนดเองที่ปรับให้เหมาะกับเวิร์กโฟลว์ของคุณ
• การบูรณาการกับระบบ CI/CD ที่มีอยู่
• การเพิ่มประสิทธิภาพสำหรับแอปพลิเคชันที่มีทราฟฟิกสูง
• กลยุทธ์การปรับใช้หลายภูมิภาค
• การฝึกอบรมทีมเกี่ยวกับแนวปฏิบัติที่ดีที่สุดของ Docker และ Traefik
• การจัดการและตรวจสอบโครงสร้างพื้นฐานอย่างต่อเนื่อง

ติดต่อเราผ่าน tva.sg/contact เพื่อหารือเกี่ยวกับความต้องการการปรับใช้ React ของคุณและรับคำแนะนำจากผู้เชี่ยวชาญเกี่ยวกับการนำไปใช้

ไม่ว่าคุณจะกำลังขยายเอเจนซีที่มีอยู่ เปิดตัวผลิตภัณฑ์ SaaS ใหม่ หรือสร้างความสามารถในการส่งมอบลูกค้าระดับองค์กร เราพร้อมช่วยให้คุณประสบความสำเร็จกับการปรับใช้ React แบบ self-hosted, containerized ที่รักษาความเป็นอิสระของคุณในขณะที่ส่งมอบผลลัพธ์ระดับมืออาชีพ