คำถามจากการแบ่งปันเรื่องการพัฒนาระบบงานด้วย Docker
หนึ่งในคำถามที่น่าสนใจจาก Frontenf developer คือ
ในการพัฒนาระบบด้วย Vite + ReactJS นั้น
จะทำให้ dev พัฒนาได้สะดวกอย่างไร
ยิ่งเรื่องของ Hot Reload ก็อยากให้ใช้ได้ด้วย
ดังนั้นจึงมีคำแนะนำดังนี้
ก่อนอื่นต้องเข้าใจก่อนว่า project ที่สร้างด้วย Vite นั้นจะ run ได้แค่ local
แสดงในการ run ดังนี้
[gist id="51055a0fbcf301be69f4d89d1a353402" file="1.txt"]ดังนั้นต้อง expose ออกมาก่อนด้วยการเพิ่ม option --host ใน package.json ดังนี้
[gist id="51055a0fbcf301be69f4d89d1a353402" file="package.json"]ผลการทำงานเป็นดังนี้
[gist id="51055a0fbcf301be69f4d89d1a353402" file="2.txt"]จากนั้นทำการสร้างไฟล์ Dockerfile สำหรับการ build image แบบง่าย ๆ ดังนี้
[gist id="51055a0fbcf301be69f4d89d1a353402" file="Dockerfile"]สำหรับ Docker compose watch ก็ให้สร้างไฟล์ docker-compose.yml ดังนี้
ซึ่งทำหน้าที่เหมือนกับ Hot reload นั่นเอง
[gist id="51055a0fbcf301be69f4d89d1a353402" file="docker-compose.yml"]คำอธิบาย
- ทำการ run ด้วยคำสั่ง docker compose watch
- ให้ทำการ watch ไฟล์ใน directory ./ ของเครื่อง host โดยที่ sync กับ directory /app ใน container
- ไม่สนใจ ditectory node_modules/
- ให้ทำการ rebuild image ใหม่ และสร้าง container ใหม่ เมื่อไฟล์ package.json มีการเปลี่ยนแปลง
เพียงเท่านี้ก็ใช้งานได้แล้ว
ซึ่งใช้งานเฉพาะ development mode เท่านั้นะครับ