🚀 Workshop 4: Deployment (การนำไปใช้งานจริง)

หลังจากพัฒนาบนเครื่องตัวเอง (Localhost) เสร็จแล้ว ขั้นตอนสุดท้ายคือการนำเว็บไซต์ขึ้นสู่โลกออนไลน์ (Production)

ใน Workshop นี้เราจะใช้วิธีที่ง่ายที่สุดสำหรับโปรเจกต์ขนาดเล็ก คือ "นำ React ไปฝากไว้ใน Laravel" (Single Server)

---

🏗️ Step 1: Build React App

ปกติเราใช้ npm run dev เพื่อรันเซิร์ฟเวอร์จำลอง แต่สำหรับของจริง เราต้องแปลงโค้ด React ให้เป็นไฟล์ HTML/CSS/JS ธรรมดาที่ Browser เข้าใจได้

1. ไปที่ Terminal ฝั่ง React
2. รันคำสั่ง:

npm run build

3. เมื่อเสร็จแล้ว จะได้โฟลเดอร์ dist/ มาข้างในจะมี:
   • index.html
   • assets/ (เก็บไฟล์ .js และ .css)

---

🚚 Step 2: ย้ายไฟล์ไป Laravel

เราจะย้ายไฟล์จาก dist/ ของ React ไปไว้ใน public/ ของ Laravel

1. ก๊อปปี้ไฟล์ ทั้งหมด ใน frontend-shop/dist/
2. ไปวางทับใน my-store-api/public/

โครงสร้างจะเป็นแบบนี้:

my-store-api/
├── public/
│   ├── index.php (ของเดิม Laravel)
│   ├── index.html (ของใหม่จาก React)
│   ├── assets/    (ของใหม่จาก React)
│   └── ...

---

⚙️ Step 3: แก้ไข Laravel Route

ปกติ Laravel จะวิ่งไปหา routes/web.php ซึ่ง return view welcome เราต้องเปลี่ยนให้มัน return ไฟล์ index.html ของ React แทน

แก้ไข routes/web.php:

use Illuminate\Support\Facades\Route;

// ให้ทุก Route ที่ไม่ใช่ API วิ่งไปหา React App
Route::get('/{any}', function () {
    return file_get_contents(public_path('index.html'));
})->where('any', '.*');

---

🌐 Step 4: ทดสอบผลลัพธ์

1. ปิด Terminal ฝั่ง npm run dev (React) ได้เลย ไม่ต้องใช้แล้ว
2. ตรวจสอบว่า Laravel Server ยังรันอยู่ (php artisan serve)
3. เปิด Browser ไปที่ http://127.0.0.1:8000

🎉 ยินดีด้วย! ตอนนี้ Web Application ของคุณทำงานได้สมบูรณ์ใน Port เดียว (8000) ทั้ง Frontend และ Backend

---

📝 Next Steps (สิ่งที่ควรศึกษาต่อ)

หลักสูตรจบแล้ว แต่การเดินทางเพิ่งเริ่มต้น! นี่คือหัวข้อแนะนำสำหรับ Level ถัดไป:

• Authentication: ระบบ Login/Register แบบจริงจัง (Laravel Sanctum / Breeze)
• Deployment: การเช่า Cloud Server (DigitalOcean, AWS) และตั้งค่า Nginx/Apache
• State Management: การจัดการข้อมูลที่ซับซ้อนด้วย Redux หรือ Zustand
• Form Validation: การตรวจสอบข้อมูลฝั่ง Frontend ด้วย React Hook Form

ขอให้สนุกกับการเขียนโค้ด! 🚀