พัฒนาเว็บไซต์ · WDC-93

React and NodeJS with Docker Workshop

หลักสูตร React and NodeJS with Docker Workshop เป็นการอบรมแบบ Workshop สร้างเว็บ Full Stack ด้วย React บน Vite คู่กับ Strapi 5 บน Node.js รันทั้งระบบบน Docker ตั้งแต่ระบบ Login และ CRUD ผ่าน API จนถึง Deploy ด้วย Docker Compose เหมาะกับนักพัฒนาและ IT Manager ที่มีพื้นฐาน HTML, CSS, JavaScript และ Docker

อัปเดตล่าสุด 8 ต.ค. 2569

ราคาเริ่มต้น 8,550 บาท / ท่าน 9,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา18 ชั่วโมง · 3 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

การพัฒนาเว็บแบบ Full Stack ในปัจจุบันนิยมแยก Frontend กับ Backend ออกจากกันแล้วสื่อสารผ่าน API และใช้ Docker ทำให้ทุกคนในทีมรันระบบได้เหมือนกันตั้งแต่เครื่องนักพัฒนาจนถึง Server จริง React คู่กับ Vite เป็นตัวเลือกยอดนิยมฝั่ง Frontend ส่วน Strapi เป็น Headless CMS บน Node.js ที่สร้าง REST API และหน้าจัดการข้อมูลให้พร้อมใช้ ช่วยให้ทีมเล็กสร้างระบบหลังบ้านได้เร็วโดยไม่ต้องเขียน API เองทุกตัว

หลักสูตรนี้เป็นการเรียนผ่าน Workshop จริงตลอด 3 วัน สร้างระบบคลังสินค้าอย่างง่ายด้วย React 19 และ TypeScript บน Vite 8 ออกแบบ UI ด้วย Material UI ฝั่งหลังบ้านใช้ Strapi 5 คู่กับ PostgreSQL ทั้งหมดรันอยู่บน Docker Container ตั้งแต่ขั้นพัฒนาที่มี Hot Reload ทำระบบ Login ด้วย JWT, Protected Route และ CRUD ผ่าน API ด้วย TanStack Query จนถึงการ Build และ Deploy ทั้งระบบด้วย Docker Compose ผู้เรียนจะเห็นภาพรวมของระบบ Full Stack และนำไปต่อยอดกับงานของตนเองได้ (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Intermediate)

สิ่งที่คุณจะได้รับ

ตั้งค่าสภาพแวดล้อมพัฒนา React และ Node.js บน Docker ให้ทำงานได้เหมือนกันทุกเครื่อง
สร้างโปรเจกต์ React 19 กับ TypeScript ด้วย Vite 8 พร้อม Hot Reload ใน Container
ออกแบบหน้าจอด้วย Material UI และจัดเส้นทางหน้าเว็บด้วย React Router
สร้าง REST API และหน้าจัดการข้อมูลด้วย Strapi 5 คู่กับ PostgreSQL
ทำระบบ Login ด้วย JWT และป้องกันหน้าด้วย Protected Route
ดึงและแก้ไขข้อมูลผ่าน API แบบ CRUD ด้วย TanStack Query
Build และ Deploy ทั้ง Frontend และ Backend ด้วย Docker Compose

หลักสูตรนี้เหมาะสำหรับ

นักพัฒนาที่ต้องการสร้างเว็บแอปพลิเคชันแบบ Full Stack ด้วย JavaScript และ TypeScript
Frontend Developer ที่ต้องการเข้าใจฝั่ง Backend และการใช้ Docker
IT Manager และหัวหน้าทีมที่ต้องการเห็นภาพรวมของระบบเว็บยุคใหม่
นักศึกษาและผู้สนใจที่มีพื้นฐาน HTML, CSS และ JavaScript

พื้นฐานของผู้เข้าอบรม

มีพื้นฐาน HTML และ CSS
เขียน JavaScript รุ่นใหม่ได้ เช่น let, const, Arrow Function, Module และ async/await
รู้จัก Docker เบื้องต้น เช่น Image, Container และคำสั่งพื้นฐาน
โน้ตบุ๊กที่ติดตั้ง Docker Desktop, Node.js 24 LTS, Git และ VS Code ได้ พร้อมสิทธิ์ติดตั้งโปรแกรม

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ที่มาแทนหลักสูตร React and NodeJS with Docker Workshop รุ่นเดิมซึ่งสอนบน React 18 และ Strapi 4 อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบ Workshop สร้างระบบคลังสินค้าชุดเดียวตั้งแต่ต้นจนจบ ระดับ Intermediate ใช้ React 19 กับ TypeScript บน Vite 8, React Router รุ่นปัจจุบัน, Material UI และ Strapi 5 คู่กับ PostgreSQL บน Docker Compose ปรับการเรียก API ให้ตรงกับรูปแบบ Response ใหม่ของ Strapi 5 ที่ใช้ documentId เพิ่ม TanStack Query, ฟอร์มพร้อม Validation และการ Deploy ด้วย Docker แบบ Multi-stage ผู้เรียนได้ Lab Guide ซอร์สโค้ดครบทุก Lab และไฟล์ Docker สำหรับนำไปใช้งานต่อ

Day 1 เตรียมเครื่องมือและ Frontend ด้วย React บน Docker

Section 1: Lab: ติดตั้งเครื่องมือพัฒนา

ภาพรวมสถาปัตยกรรม Frontend, Backend, ฐานข้อมูล และ Container ของ Workshop
ติดตั้ง Docker Desktop บน Windows (WSL 2) หรือ macOS และทดสอบการทำงาน
ติดตั้ง Node.js 24 LTS, Git และ VS Code พร้อม Extension ที่จำเป็น
ติดตั้ง React Developer Tools บนเบราว์เซอร์
Lab: รัน Container แรกและตรวจสอบเวอร์ชันของเครื่องมือทั้งหมด

Section 2: Lab: โปรเจกต์ React กับ Vite บน Docker

สร้างโปรเจกต์ React กับ TypeScript ด้วย Vite 8
เขียน Dockerfile และ docker-compose.yml สำหรับขั้นพัฒนา
ตั้งค่า Vite ให้ Hot Reload ทำงานใน Container และ Mount โฟลเดอร์โค้ด
ติดตั้ง npm Package ผ่าน Container และจัดการ node_modules
Lab: รันและแก้โค้ดแล้วเห็นผลทันทีในเบราว์เซอร์

Section 3: React ที่ใช้ในงานจริง

Component, Props และการกำหนด Type ด้วย TypeScript
useState, useEffect และการแยก Logic ด้วย Custom Hook
แสดงรายการ, เงื่อนไข และจัดการ Event
Context สำหรับข้อมูลที่ใช้ร่วมกันทั้งแอป เช่น ผู้ใช้ที่ล็อกอิน
Lab: Component รายการสินค้าจากข้อมูลตัวอย่าง

Section 4: Lab: จัดหน้าด้วย React Router

ติดตั้ง React Router รุ่นปัจจุบันด้วยแพ็กเกจ react-router
BrowserRouter, Routes, Route และ Nested Route กับ Layout
Link, NavLink และ Route Parameter
หน้า Not Found และการ Redirect
Lab: โครงหน้า Dashboard, รายการสินค้า และรายละเอียดสินค้า

Section 5: Lab: ออกแบบ UI ด้วย Material UI

ติดตั้งและตั้งค่า Material UI ในโปรเจกต์
จัด Layout ด้วย Grid, Box, Container, AppBar, Toolbar และ Drawer
ใช้ Icon และ Component ฟอร์ม เช่น TextField, Select, Checkbox และ Button
ปรับ Theme สี ฟอนต์ และ Dark Mode
Lab: หน้า Dashboard ของระบบคลังสินค้าแบบ Responsive

Day 2 Backend ด้วย Strapi 5 และระบบ Login

Section 6: Lab: Strapi 5 คู่ PostgreSQL บน Docker

Headless CMS คืออะไร และ Strapi ช่วยสร้าง Backend ได้อย่างไร
สร้างโปรเจกต์ Strapi 5 และเชื่อมฐานข้อมูล PostgreSQL
รัน Strapi และ PostgreSQL ร่วมกันด้วย Docker Compose
เก็บค่าลับในไฟล์ .env และ Volume สำหรับข้อมูล
Lab: เปิดหน้า Admin และสร้างผู้ดูแลระบบคนแรก

Section 7: ออกแบบ Content Type และความสัมพันธ์

Collection Type และ Single Type และชนิดของ Field
ความสัมพันธ์ระหว่างสินค้า หมวดหมู่ และผู้จำหน่าย
Draft and Publish และการจัดการรูปภาพใน Media Library
Component และ Dynamic Zone สำหรับข้อมูลที่ยืดหยุ่น
Lab: Content Type ของระบบคลังสินค้าพร้อมข้อมูลตัวอย่าง

Section 8: Lab: REST API, สิทธิ์ และ JWT

REST API ของ Strapi 5: รูปแบบ Response ใหม่และ documentId
Filter, Sort, Pagination และ populate ข้อมูลที่สัมพันธ์กัน
Role ของ Users and Permissions และการเปิดสิทธิ์ทีละ Endpoint
สมัครสมาชิกและ Login ผ่าน /api/auth/local เพื่อรับ JWT
Lab: ทดสอบ API ทั้งแบบสาธารณะและแบบต้อง Login ด้วย Postman

Section 9: เรียก API จาก React

จัดการ URL ของ API ด้วย Environment Variable ของ Vite
เขียน API Client ด้วย fetch พร้อม Type ของข้อมูล
TanStack Query: useQuery, useMutation และการ Refresh ข้อมูล
แสดงสถานะกำลังโหลดและ Error อย่างเป็นระบบ
Lab: หน้ารายการสินค้าที่ดึงข้อมูลจริงจาก Strapi

Section 10: Lab: Login และ Protected Route

หน้า Register และ Login ที่เรียก API ของ Strapi
เก็บ Token อย่างระมัดระวัง: localStorage เทียบกับ Cookie และความเสี่ยง XSS
Auth Context และการแนบ Token ไปกับทุก Request
Protected Route ด้วย React Router และการ Logout
Lab: กันไม่ให้ผู้ที่ยังไม่ Login เข้าหน้าจัดการสินค้า

Day 3 Workshop CRUD และ Deploy ด้วย Docker

Section 11: Lab: Workshop CRUD ระบบคลังสินค้า

เขียน Service สำหรับเรียก ดู เพิ่ม แก้ไข และลบข้อมูลสินค้า
แสดงข้อมูลในตารางของ Material UI พร้อมค้นหาและแบ่งหน้า
จัดรูปแบบสกุลเงิน วันที่ และเวลาด้วย Intl
Refresh ข้อมูลหลังแก้ไขด้วย TanStack Query
Lab: ระบบจัดการสินค้าที่ใช้งานได้ครบ

Section 12: ฟอร์ม Validation และอัปโหลดรูป

จัดการฟอร์มด้วย React Hook Form
ตรวจข้อมูลด้วย Zod และแสดง Error ทีละช่อง
อัปโหลดรูปสินค้าไปยัง Media Library ของ Strapi
Dialog ยืนยันก่อนลบ และ Snackbar แจ้งผล
Lab: ฟอร์มเพิ่มสินค้าพร้อมรูปภาพ

Section 13: Lab: Build แบบ Multi-stage

เตรียมโปรเจกต์ React ก่อน Build และตรวจ Type
Dockerfile แบบ Multi-stage: Build ด้วย Node แล้วเสิร์ฟไฟล์ด้วย Nginx
Build Strapi สำหรับ Production และแยก Dependency ที่ไม่จำเป็น
ลดขนาด Image และใช้ .dockerignore
Lab: สร้าง Image ของ Frontend และ Backend

Section 14: Deploy ทั้งระบบด้วย Docker Compose

docker-compose สำหรับ Production: Frontend, Strapi และ PostgreSQL
Nginx เป็น Reverse Proxy รวม Frontend กับ API ไว้ใน Domain เดียว
ตั้งค่า CORS, Environment Variable และ Health Check
สำรองฐานข้อมูลและไฟล์อัปโหลด
ปัญหาที่พบบ่อยเมื่อขึ้นระบบจริงและวิธีแก้

Section 15: Workshop: ต่อยอดระบบด้วยตนเอง

โจทย์: เพิ่มระบบรับเข้าและเบิกออกสินค้าพร้อมรายงานสรุป
ออกแบบ Content Type และหน้าจอใหม่ แล้วลงมือสร้างทั้ง Frontend และ Backend
Deploy เวอร์ชันใหม่ด้วย Docker Compose
นำเสนอผลงาน ใช้ AI Assistant ช่วยเขียนโค้ดอย่างมีการตรวจทาน และสรุปแนวทางต่อยอด

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

รันโปรเจกต์ React กับ Vite บน Docker ให้ Hot Reload ได้ทำอย่างไร

เขียน Dockerfile สำหรับขั้นพัฒนาที่ใช้ Node.js รุ่น LTS แล้วใช้ docker-compose Mount โฟลเดอร์โค้ดเข้า Container โดยแยก node_modules ไว้ใน Container ตั้งค่า Vite ให้ฟังทุก Network Interface ด้วย server.host และเปิด Port ให้ตรงกัน หากใช้ Windows และไฟล์ไม่ถูกตรวจจับการเปลี่ยนแปลง ให้เปิด usePolling ในส่วน server.watch หรือเก็บโค้ดไว้ในระบบไฟล์ของ WSL 2 เมื่อแก้โค้ดหน้าเว็บจะอัปเดตทันที

Strapi คืออะไร ใช้สร้าง REST API อย่างไร

Strapi เป็น Headless CMS แบบ Open Source บน Node.js เมื่อออกแบบ Content Type ผ่านหน้า Admin ระบบจะสร้าง REST API สำหรับอ่าน เพิ่ม แก้ไข และลบข้อมูลให้อัตโนมัติ พร้อมระบบสิทธิ์ผู้ใช้และ JWT ใน Strapi 5 ข้อมูลที่ตอบกลับไม่มี attributes ซ้อนแล้ว และใช้ documentId เป็นตัวระบุเอกสาร รองรับการกรอง เรียงลำดับ แบ่งหน้า และดึงข้อมูลที่สัมพันธ์กันด้วย populate

ทำ Protected Route ใน React ด้วย React Router ทำอย่างไร

เก็บสถานะผู้ใช้ที่ล็อกอินไว้ใน Auth Context แล้วสร้าง Component ครอบเส้นทางที่ต้องป้องกัน ถ้ายังไม่มีผู้ใช้ให้ Redirect ไปหน้า Login ด้วย Navigate ถ้ามีแล้วจึงแสดงหน้าย่อยผ่าน Outlet ใน React Router รุ่นปัจจุบันให้ Import จากแพ็กเกจ react-router และควรจำไว้ว่าการป้องกันฝั่ง Frontend เป็นเพียงด่านแรก API ฝั่ง Strapi ต้องตรวจสิทธิ์ด้วยเสมอ

หลักสูตร React and NodeJS with Docker Workshop เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักพัฒนาที่ต้องการสร้างเว็บแบบ Full Stack, Frontend Developer ที่อยากเข้าใจฝั่ง Backend และ Docker, IT Manager ที่ต้องการเห็นภาพรวมของระบบ รวมถึงนักศึกษา ควรมีพื้นฐาน HTML, CSS และ JavaScript รุ่นใหม่ และรู้จัก Docker เบื้องต้น ส่วน TypeScript จะอธิบายเท่าที่ใช้ใน Workshop

เรียนจบหลักสูตร React and NodeJS with Docker Workshop แล้วทำอะไรได้บ้าง

ตั้งค่าสภาพแวดล้อมพัฒนาบน Docker ที่มี Hot Reload สร้าง Frontend ด้วย React, TypeScript, React Router และ Material UI สร้าง Backend ด้วย Strapi 5 คู่กับ PostgreSQL ทำระบบ Login ด้วย JWT และ Protected Route จัดการข้อมูลแบบ CRUD ผ่าน API และ Deploy ทั้งระบบด้วย Docker Compose ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

เรียนหลักสูตร React and NodeJS with Docker Workshop ใช้เครื่องมืออะไรบ้าง

ใช้ Docker Desktop และ Docker Compose, Node.js 24 LTS, VS Code, Git และ Postman ฝั่ง Frontend ใช้ React 19, TypeScript, Vite 8, React Router, Material UI, TanStack Query, React Hook Form และ Zod ฝั่ง Backend ใช้ Strapi 5 คู่กับ PostgreSQL ทุกเครื่องมือเป็น Open Source หรือใช้ได้ฟรี ผู้เรียนเตรียมโน้ตบุ๊กที่ติดตั้ง Docker Desktop ได้