นำแอป React ขึ้นใช้งานจริง: ตั้งค่า Docker พร้อม Traefik Reverse Proxy

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

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

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

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

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

ตัวกำหนดเส้นทาง HTTP แบบกำหนดเองที่ขัดแย้งกับการเปลี่ยนเส้นทางส่วนกลาง
ไวยากรณ์ป้ายกำกับ Traefik ที่ผิดที่ทำให้เกิดการล้มเหลวแบบเงียบ
ปัญหาการรับการเชื่อมต่อ IPv6 กับ IPv4 ในการตรวจสถานะระบบ
การแมปพอร์ตบริการที่ขาดหายไปซึ่งทำให้เกิดข้อผิดพลาด 404

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

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

ความพร้อมสำหรับสภาพแวดล้อมใช้งานจริง:

การจัดการใบรับรอง SSL อัตโนมัติ ที่เหมาะสม
กลยุทธ์การนำระบบขึ้นใช้งานแบบไม่มีช่วงที่ระบบหยุดให้บริการ
การกำหนดค่าการตรวจสถานะระบบ
การเชื่อมต่อระบบการบันทึกล็อกและการเฝ้าติดตามระบบ

ผลคือเสียเวลาหลายชั่วโมงหาสาเหตุที่แอปในเครื่องทำงานดี แต่กลับคืนข้อผิดพลาด 404 ในสภาพแวดล้อมใช้งานจริง แม้ “ทุกอย่างดูถูกต้อง”

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

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

Vite: เครื่องมือสร้างแอปสมัยใหม่

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

ข้อได้เปรียบหลักคือ Vite แบ่งโค้ดเป็นส่วน ตัดโค้ดที่ไม่ได้ใช้ และปรับไฟล์ประกอบให้อัตโนมัติ จึงได้ชุดไฟล์พร้อมใช้งานจริงโดยไม่ต้องตั้งค่า webpack ซับซ้อน

Docker: การบรรจุแอปในคอนเทนเนอร์เพื่อความสอดคล้อง

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

Docker บรรจุสภาพแวดล้อมทั้งหมด ทั้งไฟล์ React ที่สร้างแล้ว การกำหนดค่า nginx และสภาพแวดล้อมรันโปรแกรม ไว้ในคอนเทนเนอร์ที่ย้ายไปใช้ได้ทุกที่

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

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

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

Traefik จัดการจุดสิ้นสุดการเชื่อมต่อ SSL ผ่าน Let’s Encrypt ค้นพบบริการอัตโนมัติ และเฝ้าติดตามระบบอย่างละเอียดได้ด้วยการกำหนดค่าเพียงเล็กน้อย

nginx: เว็บเซิร์ฟเวอร์สำหรับสภาพแวดล้อมใช้งานจริง

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

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

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

การพัฒนาในเครื่อง: รันและทดสอบแอป React ในเครื่องด้วย npm run dev
การสร้างชุดไฟล์สำหรับใช้งานจริง: สร้างไฟล์คงที่ที่เพิ่มประสิทธิภาพด้วย npm run build
การบรรจุแอปในคอนเทนเนอร์: บรรจุไฟล์ที่สร้างแล้วลงใน nginx คอนเทนเนอร์ Docker
การนำระบบขึ้นใช้งานบนเซิร์ฟเวอร์: อัปโหลดและเริ่มคอนเทนเนอร์บนเซิร์ฟเวอร์สำหรับใช้งานจริง
การลงทะเบียน Traefik: การกำหนดเส้นทางอัตโนมัติและการออกใบรับรอง SSL
การเฝ้าติดตามสถานะ: การตรวจสถานะระบบอย่างต่อเนื่องเพื่อรับประกันความพร้อมใช้งาน

จุดเด่นคือการทำงานอัตโนมัติ เมื่อตั้งค่าถูกต้องแล้ว คุณนำเวอร์ชันใหม่ขึ้นใช้งานได้ในเวลาไม่ถึง 60 วินาทีด้วยคำสั่งเดียว

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

โครงสร้างโครงการสำหรับสภาพแวดล้อมใช้งานจริง

จัดระเบียบโครงการ 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 ด้วยการตั้งค่าที่เพิ่มประสิทธิภาพสำหรับสภาพแวดล้อมใช้งานจริง:

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
  },
})

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

แยกไลบรารีภายนอกสำหรับการแคชที่ดีขึ้น
ย่อโค้ดเพื่อขนาดไฟล์ที่เล็กลง
ปิดแผนผังเชื่อมโค้ดที่สร้างกับโค้ดต้นฉบับในสภาพแวดล้อมใช้งานจริง (หลีกเลี่ยงการเผยแพร่ซอร์สโค้ดต้นฉบับที่ยังไม่ได้ย่อขนาด)
เพิ่มประสิทธิภาพการแบ่งไฟล์เป็นส่วนสำหรับเวลาโหลดที่เร็วขึ้น

การสร้างชุดไฟล์สำหรับสภาพแวดล้อมใช้งานจริง

สร้างชุดไฟล์สำหรับใช้งานจริงที่เพิ่มประสิทธิภาพ:

# Install dependencies
npm install

# Create production build
npm run build

# Verify build output
ls -lh dist/

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

index.html – ไฟล์เริ่มต้น
assets/ – JS, CSS และรูปภาพที่ย่อแล้ว
ไฟล์คงที่จาก public/

การสร้างคอนเทนเนอร์สำหรับสภาพแวดล้อมใช้งานจริง

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

แอปพลิเคชัน React ใช้การกำหนดเส้นทางฝั่งไคลเอนต์ซึ่งต้องการการกำหนดค่า 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 ทำงานถูกต้องในสภาพแวดล้อมใช้งานจริง—ทุกเส้นทางจะได้รับไฟล์ index.html หลัก

Dockerfile สำหรับสภาพแวดล้อมใช้งานจริง

สร้าง 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 เพื่อให้อิมเมจสำหรับใช้งานจริงมีขนาดเล็ก (ขนาดบีบอัดบน Docker Hub ประมาณ 29 MB ณ เดือนตุลาคม 2026) และมีทุกอย่างที่จำเป็นในการให้บริการแอป 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

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

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

ไม่มีการกำหนดตัวกำหนดเส้นทาง HTTP แยก
ไม่มีมิดเดิลแวร์เปลี่ยนเส้นทางแบบกำหนดเอง
ไม่มีการกำหนดค่าจุดรับคำขอ HTTP

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

การนำระบบขึ้นใช้งานบนเซิร์ฟเวอร์สำหรับใช้งานจริง

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

เซิร์ฟเวอร์สำหรับใช้งานจริงต้องมีสิ่งต่อไปนี้:

สภาพแวดล้อม 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 แบบหลายผู้เช่า ของเราซึ่งครอบคลุมรายละเอียดการตั้งค่า Traefik

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

# Check available space
df -h /

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

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

ชี้ app.yourdomain.com ไปยังที่อยู่ IP ของเซิร์ฟเวอร์
รอการกระจาย 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/

การสร้างชุดไฟล์และเริ่มคอนเทนเนอร์

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 แม้ว่าคอนเทนเนอร์ทำงานได้ภายใน

สาเหตุหลัก: กำหนดตัวกำหนดเส้นทางหลายตัวสำหรับบริการเดียวโดยไม่ได้ระบุพอร์ตบริการให้ถูกต้อง หรือกำหนดเส้นทาง HTTP เฉพาะแอปจนทับการเปลี่ยนเส้นทางส่วนกลางของ 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"

การเปลี่ยนเส้นทาง HTTP→HTTPS ส่วนกลางของ Traefik ซึ่งกำหนดใน traefik.yml จัดการคำขอ HTTP ให้อัตโนมัติ ในการตั้งค่าของเรา ตัวกำหนดเส้นทาง HTTP แบบกำหนดเองแยกตามบริการทำให้เกิดความขัดแย้ง

คอนเทนเนอร์มีสถานะ unhealthy

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

สาเหตุหลัก: การตรวจสถานะใช้ localhost ซึ่งแปลงเป็นที่อยู่ 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 สร้างชุดไฟล์ล้มเหลวด้วย “No Space Left”

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

วิธีแก้ไข:

# 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 ต้องการพื้นที่ชั่วคราวสำหรับการแคชชั้นอิมเมจและการสร้างอิมเมจ

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

อาการ: Curl แสดงใบรับรองที่ลงนามด้วยตนเองหลัง 10+ นาที

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

DNS ไม่ได้ชี้ไปยังเซิร์ฟเวอร์อย่างถูกต้อง
พอร์ต 80/443 ไม่สามารถเข้าถึงจากอินเทอร์เน็ต
ถึงขีดจำกัดอัตรา Let’s Encrypt (ใบรับรองซ้ำสำหรับชุดชื่อโฮสต์เดียวกัน 5 ใบ หรือใบรับรอง 50 ใบต่อโดเมนที่จดทะเบียน ต่อ 7 วัน)

วิธีแก้ไข:

# 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

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

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

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

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

คอนเทนเนอร์เริ่มต้นแต่ Traefik เข้าถึงไม่ได้

อาการ: คอนเทนเนอร์ทำงานแต่ 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

การเพิ่มประสิทธิภาพสำหรับสภาพแวดล้อมใช้งานจริง

การนำระบบขึ้นใช้งานโดยหยุดให้บริการช่วงสั้น ๆ

อัปเดตแอปพลิเคชันโดยหยุดให้บริการเพียงช่วงสั้น ๆ:

#!/bin/bash
# deploy-update.sh - Low-downtime deployment
set -e

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 the new image while the old container keeps serving
docker compose build my-react-app

# Replace the container: Compose stops the old one, then starts the new one
docker compose up -d --no-deps my-react-app

# Traefik routes to the new container once its health check passes

ตามที่ความคิดเห็นในสคริปต์ระบุไว้ docker compose up จะหยุดคอนเทนเนอร์เดิมก่อนเริ่มคอนเทนเนอร์ใหม่ และบริการที่กำหนด container_name แบบตายตัวไม่สามารถรันสองอินสแตนซ์คู่กันได้ จึงควรคาดว่าจะมีช่วงหยุดให้บริการสั้น ๆ ขณะ nginx เริ่มทำงาน การอัปเดตโดยไม่หยุดให้บริการจริง ๆ ต้องมีเรพลิกาที่สองหรือการตั้งค่าแบบ blue-green หลัง Traefik

การตรวจสถานะระบบขั้นสูง

นำการเฝ้าติดตามสถานะระบบที่ครอบคลุมมาใช้:

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

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

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

ปรับแต่ง 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;
}

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

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

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

nginx ที่ให้บริการไฟล์คงที่ของ React ใช้ทรัพยากรน้อย หน่วยความจำ 512 MB และ CPU ครึ่งคอร์จึงเป็นจุดเริ่มต้นที่เหมาะสมสำหรับหลายเว็บไซต์ แต่ควรทดสอบโหลดก่อนพึ่งพาทรัพยากรเหล่านี้เพื่อรองรับทราฟฟิกสูง

ทำไมการนำระบบขึ้นใช้งาน Docker แบบที่ติดตั้งและดูแลเองจึงสำคัญ

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

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

ระบบอัตโนมัติและการเชื่อมต่อระบบ 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/[email protected]
        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/[email protected]
        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 ไปป์ไลน์

สำหรับผู้ใช้ 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

การตรวจสอบหลังนำระบบขึ้นใช้งานสภาพแวดล้อมใช้งานจริง

กลยุทธ์การบันทึกล็อก

นำการบันทึกล็อกที่ครอบคลุมมาใช้:

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

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

# 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

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

ตรวจสถานะคอนเทนเนอร์:

#!/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 นาทีสำหรับการเฝ้าติดตามระบบพื้นฐาน

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

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

# 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 เดียวกัน ตามที่แสดงในคู่มือสถาปัตยกรรม multi-tenant ของเรา

ชุดไฟล์ที่สร้างเฉพาะสภาพแวดล้อม

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

// 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',
  },
}))

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

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

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

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

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

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

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

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

พัฒนางานให้ลูกค้า:

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

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

เข้าใจพื้นฐาน Docker การบรรจุแอปในคอนเทนเนอร์
เชี่ยวชาญการกำหนดค่า Traefik reverse proxy
ดีบักปัญหาการนำระบบขึ้นใช้งานสภาพแวดล้อมใช้งานจริงอย่างเป็นระบบ

แนวทางนี้มาจากการแก้ปัญหาจริง ปัญหาที่อธิบายเกิดขึ้นแล้วและวิธีแก้ใช้ได้จริง จึงแสดงข้อผิดพลาดที่อาจเจอและวิธีหลีกเลี่ยงได้ชัดกว่าบทเรียนเชิงทฤษฎี

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

แหล่งข้อมูลที่เกี่ยวข้อง

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

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

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

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

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

หากกำลังสร้างโครงสร้างพื้นฐานเพื่อนำ React ขึ้นใช้งานจริง หรือต้องปรับให้เหมาะกับการส่งมอบงานลูกค้า เราช่วยได้ในเรื่องต่อไปนี้:

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

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

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

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

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

Vite: เครื่องมือสร้างแอปสมัยใหม่

Docker: การบรรจุแอปในคอนเทนเนอร์เพื่อความสอดคล้อง

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

nginx: เว็บเซิร์ฟเวอร์สำหรับสภาพแวดล้อมใช้งานจริง

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

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

โครงสร้างโครงการสำหรับสภาพแวดล้อมใช้งานจริง

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

การสร้างชุดไฟล์สำหรับสภาพแวดล้อมใช้งานจริง

การสร้างคอนเทนเนอร์สำหรับสภาพแวดล้อมใช้งานจริง

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

Dockerfile สำหรับสภาพแวดล้อมใช้งานจริง

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

การนำระบบขึ้นใช้งานบนเซิร์ฟเวอร์สำหรับใช้งานจริง

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

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

การสร้างชุดไฟล์และเริ่มคอนเทนเนอร์

การตรวจสอบหลังนำระบบขึ้นใช้งาน

ปัญหาที่พบบ่อยในการนำระบบขึ้นใช้งานและวิธีแก้

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

คอนเทนเนอร์มีสถานะ unhealthy

Docker สร้างชุดไฟล์ล้มเหลวด้วย “No Space Left”

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

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

คอนเทนเนอร์เริ่มต้นแต่ Traefik เข้าถึงไม่ได้

การเพิ่มประสิทธิภาพสำหรับสภาพแวดล้อมใช้งานจริง

การนำระบบขึ้นใช้งานโดยหยุดให้บริการช่วงสั้น ๆ

การตรวจสถานะระบบขั้นสูง

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

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

ทำไมการนำระบบขึ้นใช้งาน Docker แบบที่ติดตั้งและดูแลเองจึงสำคัญ

ระบบอัตโนมัติและการเชื่อมต่อระบบ CI/CD

การนำระบบขึ้นใช้งานด้วย GitHub Actions

GitLab CI/CD ไปป์ไลน์

การตรวจสอบหลังนำระบบขึ้นใช้งานสภาพแวดล้อมใช้งานจริง

กลยุทธ์การบันทึกล็อก

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

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

ชุดไฟล์ที่สร้างเฉพาะสภาพแวดล้อม

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

แหล่งข้อมูลที่เกี่ยวข้อง

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

บทความที่เกี่ยวข้อง