สร้าง Docker image Nuxt.js ลีนๆ ด้วย Multi-stage Builds

สร้าง Docker image Nuxt.js ลีนๆ ด้วยหลักการของ Multi-stage Builds

ทริคเล็กๆ กับ Multi-stage build ดัวย Docker

Multi-stage คือ อะไร ?

แต่เดิมการสร้าง Docker image นั้นหลังจากการ build แล้ว ตัว image จะมี compiler ที่ใช้สำหรับการ compile source code ชุดนั้นๆ ติดมาด้วยเพื่อให้ code ชุดนั้นสามารถนำไปใช้งานได้ ทำให้ตัว image ที่ได้มามีขนาดที่ใหญ่เกินความจำเป็นเพราะจะติดตัว compiler หรือ ตัว package ที่ใช้ในขั้นตอนการ build เท่านั้นติดมาด้วย ต่อมาแนวคิดของ software container จึงมีการนำรูปแบบของ Multi-stage ขึ้นมาช่วยแก้ปัญหานี้ นั่นก็คือรูปแบบของการสร้าง Docker image จะแบ่งออกเป็น stage หลายๆ อัน ยกตัวอย่าง stage แรกจะกำหนดค่า package environment ต่างๅ ที่ใช้สำหรับการทำงานในการ build จากนั้นจะผ่าน stage นั้นไปอีก 1 stage ที่เอาสิ่งต่างๆ อาทิ package ที่ไม่จำเป็นออก เพื่อให้ได้ขนาดของ Docker image ที่เล็กลง

สำหรับใครอยากเรียนรู้ในเรื่อง Docker เพิ่มเติมสามารถอ่านได้จากลิงค์ข้างล่างครับ

I GEAR GEEK เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ มีประสบการณ์จากการทำงานจากทั้งในและนอกประเทศอย่างโชกโชน…medium.com

หลังจากที่เรารู้จักหลักการของ Multi-Stage กันแล้ว เรามาลงมือทำกันเลย โดยในวันนี้ผมจะใช้ Nuxt.js framework เป็นตัวอย่างในการแบ่งปันครั้งนี้

• Nuxt.js ใน mode SPA (Single Page Application) เมื่อทำการ build scripts เราจะได้ files dist/ ที่สามารถใช้ในการ Deploy บน static hosting ได้

• ขั้นต่อมาเราจะให้ Dockerfile เป็นตัวทำการ build scripts แทนเรา ให้เป็น image ฝากไว้ใน Hub รอวันที่จะได้ใช้งาน

อธิบาย code ตาม step ทีละบรรทัด (Dockerfile) — ใช้งาน image node:12.14.1-alpine3.9 (ใช้ version อื่นก็ได้) จาก DockerHub เก็บ step นี้ไว้ใน dependencies — สร้าง folder /usr/app — กำหนด WORKDIR เป็น /usr/app — กำหนด argument ภายใน Docker เพื่อรอรับค่าจาก env — copy package*.json และ install — copy code และ build — จบ step แรก — ใช้งาน image nginx:1.17.2-alpine (ใช้ version อื่นก็ได้) — กำหนด WORKDIR — copy config nginx — จาก dependencies step แรก เอา folder dist/ ที่ build แล้วมา — ให้ใช้งานใน port 80

สรุป

— การทำงาน Dockerfile คล้ายๆ กับการ command ทีละบรรทัดที่เราสร้าง แต่ต่างกันที่รวมทั้งหมดเเละ run พร้อมกันทีเดียว — ลำดับคำสั่งมีผลต่อขนาด และเวลาในการ build เลือกลำดับให้ดี — Multistage ทำให้ image มีขนาดที่เล็กลง

อ้างอิง

• https://nuxtjs.org/guide/commands#single-page-application-deployment-spa