การเริ่มต้นใช้งาน Docker สำหรับการพัฒนาระบบ Frontend ด้วย Vue.js

เมื่อวานทำการแบ่งปันความรู้เรื่องการใช้งาน Docker สำหรับการพัฒนา web application ด้วย Vue.js นิดหน่อย โดยแบ่งขั้นตอนการนำ Docker มาใช้งานดังนี้ 1. สรุปขั้นตอนการพัฒนา 2. สรุปเครื่องมือต่าง ๆ ที่ใช้ในการพัฒนา 3. ลงมือทำ เพื่อให้เห็นผล 4. เริ่มนำ Docker เข้ามาใช้งานหรือมาช่วย 5. รออะไรลงมือกันเลย

เริ่มต้นด้วยสรุปขั้นตอนการพัฒนาด้วย Vue.js

ซึ่งผมก็ไม่รู้หรอกว่าทำอย่างไร !! เลยให้ทำการสรุปมา รวมทั้งเครื่องมือที่ใช้งานด้วย มีดังนี้ 1. สร้างระบบงานด้วย Vue CLI 2. ทำการติดตั้ง dependency/library ด้วยคำสั่ง npm install 3. ทำการทดสอบบนเครื่องของ developer แต่ละคนด้วยคำสั่ง npm run dev 4. ทำการ build เพื่อแปลงเป็น HTML/JS/CSS สำหรับการ deploy บน production ด้วยคำสั่ง npm run build จะทำการสร้างใน directory ชื่อว่า dist มาให้ จากนั้นลงมือทำซะ สามารถสรุปขั้นตอนของการพัฒนาได้ดังนี้ [code] $vue init webpack hello $cd hello $npm install $npm run build [/code]

ต่อมาต้องคิดก่อนว่า จะนำ Docker มาใช้เพื่ออะไรบ้าง ?

สิ่งที่แนะนำไปมี 2 เรื่องคือ 1. สำหรับการพัฒนาของ developer ทุกคนในทีม 2. สำหรับการ deploy ระบบงาน สำหรับการพัฒนาของ developer ทุกคนในทีม เป้าหมายเพื่อแก้ไขปัญหาเรื่อง version ของเครื่องมือและ library ที่ใช้งาน ดังนั้นทุกคนในทีมควรใช้สิ่งเดียวกัน นั่นคือ เราจะทำการสร้าง Docker image เพื่อให้ developer ทุกคนใช้งาน ประกอบไปด้วย

• npm install
• npm run dev
• npm run build

ดังนั้นสร้าง Dockerfile เพื่อเอาไว้ใช้แบบขำ ๆ ดังนี้ [gist id="73e1fa2624781aa72c57927a86b4f330" file="Dockerfile_develop"] คำอธิบาย

• สิ่งสำคัญมาก ๆ คือการเลือก Based image ซึ่งเลือกใช้ NodeJS นั่นเอง
• ต้องกำหนด tag หรือ version ของ Docker image ด้วยเสมอ อย่าใช้ latest นะ
• ทำการกำหนด Working directory
• ทำการกำหนด Entry point default ให้เป็น npm
• ทำการกำหนดคำสั่ง default ให้เป็น install

ดังนั้นถ้าสร้าง container จาก image นี้จะทำการ npm install ให้ทันที แต่ถ้าต้องการ run คำสั่งอื่น ๆ เพียงใส่ run dev และ run build ไป ดังนี้ [code] $docker container run --rm -v $(pwd):/somkiat/src -t web:0.1 $docker container run --rm -v $(pwd):/somkiat/src -t web:0.1 run dev $docker container run --rm -v $(pwd):/somkiat/src -t web:0.1 run build [/code]

สำหรับการ deploy ระบบงาน

ซึ่งแน่นอนว่าต้องมีกระบวนการคล้าย ๆ กับการพัฒนามาก่อน แต่เพิ่มอีกขั้นตอนคือ การ deploy ไฟล์ต่าง ๆ จาก directory dist ไปยัง server ดังนั้น เพื่อความง่ายก็เลยเลือกใช้ nginx เป็น Web server และสามารถเขียน Dockerfile สำหรับการ deploy ได้แบบนี้ ใช้ความสามารถ Multi-stage build [gist id="73e1fa2624781aa72c57927a86b4f330" file="Dockerfile_deploy"] เพียงเท่านี้ก็จะได้ Docker image สำหรับการ deploy แล้ว นำไปใส่ในขั้นตอนของระบบ CI/CD ต่อไปได้เลย

ดังนั้นก่อนจะนำเครื่องมือใด ๆ มาใช้งานนั้น

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