Aesthetic study notes about Dockerizing Vue 3 on an iPad screen

1. 🎯 ตอนที่ 40: จบปัญหา “รันในเครื่องพี่ได้นะ” ด้วยเวทมนตร์แห่ง Docker

2. 📖 เปิดฉาก (The Hook)

“แต่น้อง… ในเครื่องพี่มันก็รันได้ปกตินะ ทำไมขึ้น Server แล้วพังล่ะ?”

น้องๆ เคยได้ยินประโยคคลาสสิกนี้จากเพื่อนร่วมทีม หรือแม้กระทั่งพูดออกมาเองไหมครับ? ปัญหาโลกแตกของการทำเว็บคือ สภาพแวดล้อม (Environment) ในเครื่องของนักพัฒนาแต่ละคนไม่เหมือนกัน บางคนใช้ Node.js เวอร์ชัน 14 บางคนใช้ 16 บางคนใช้ Windows บางคนใช้ Mac พอถึงเวลาเอาแอปพลิเคชัน Vue.js ของเราขึ้น Production (Deploy) ก็มักจะเจอบั๊กประหลาดๆ ที่หาต้นตอไม่เจอ

เพื่อยุติฝันร้ายนี้ ในวงการวิศวกรรมซอฟต์แวร์ระดับ Enterprise เราจึงใช้เทคโนโลยีที่เรียกว่า Docker ครับ เปรียบเสมือนการเอาตู้คอนเทนเนอร์เหล็กมาบรรจุแอปพลิเคชันของเรา พร้อมด้วยเครื่องมือและสภาพแวดล้อมทุกอย่างที่แอปต้องใช้ (Dependencies & Libraries) ล็อกกุญแจปิดตาย แล้วย้ายไปวางที่ไหนบนโลกก็รันได้หน้าตาเหมือนกันเป๊ะ!

วันนี้พี่จะพามาเปิดคัมภีร์จากหนังสือ “Architecting Vue.js 3” เพื่อดูสถาปัตยกรรมการเขียน Dockerfile แบบ Multi-stage Build ที่จะแพ็กแอป Vue 3 ของเราไปเสิร์ฟบน Nginx แบบเบาหวิวและเร็วปานจรวด จิบกาแฟให้พร้อม แล้วมาแปลงร่างเป็น DevOps กันครับ!

3. 🧠 แก่นวิชา (Core Concepts)

ก่อนจะไปเขียนโค้ด เรามาทำความเข้าใจท่าไม้ตายที่ชื่อว่า Multi-stage Build กันก่อนครับ ทำไมเราถึงไม่ยัดทุกอย่างลงไปในกล่องเดียว?

🏗️ Stage 1: The Builder (ห้องครัว)

เวลาเราเขียน Vue 3 เราต้องใช้ Node.js และแพ็กเกจ (node_modules) นับพันตัวในการ Compile โค้ด (ผ่าน Vite หรือ Webpack) ให้กลายเป็นไฟล์ HTML, CSS, JS ก้อนเล็กๆ (โฟลเดอร์ dist) ปัญหาก็คือ ไฟล์ Node.js และ node_modules พวกนี้มัน “หนักมาก” ครับ! และเราไม่จำเป็นต้องใช้มันเลยตอนรันเว็บจริง ดังนั้นใน Stage 1 เราจะสร้างคอนเทนเนอร์ที่เป็นเหมือน “ห้องครัว” เอาไว้ทำอาหาร (Build) พอทำเสร็จ เราก็จะหยิบแค่อาหารออกมา

🚀 Stage 2: The Production Server (พนักงานเสิร์ฟ Nginx)

เมื่อเราได้ไฟล์ dist มาแล้ว เราจะเริ่ม Stage 2 โดยการสร้างคอนเทนเนอร์ตัวใหม่ที่สะอาดเอี่ยมและเบาหวิว โดยใช้ Nginx (Web Server ยอดฮิตที่เกิดมาเพื่อเสิร์ฟไฟล์ Static อย่างรวดเร็ว) จากนั้นเราจะก๊อปปี้ “อาหาร” จากห้องครัวใน Stage 1 มาส่งให้ Nginx แล้วระเบิดห้องครัวทิ้งไปเลย! วิธีนี้จะทำให้ Docker Image ของเรามีขนาดเล็กสุดๆ (จากหลัก 1GB อาจจะเหลือแค่สิบกว่า MB) โหลดไว และปลอดภัยขึ้นมหาศาลครับ

Diagram showing Multi-stage Docker build for Vue 3 passing dist folder to Nginx Web Server

4. 💻 ร่ายมนต์โค้ด (Show me the Code)

ให้สร้างไฟล์ชื่อว่า Dockerfile (ไม่มีนามสกุล) ไว้ที่ตำแหน่งนอกสุด (Root) ของโปรเจกต์ Vue 3 ของน้องๆ ครับ จากนั้นใส่โค้ดตามนี้ลงไป:

# ==========================================
# 🏗️ Stage 1: Build Stage (ห้องครัว)
# ==========================================
# 1. เลือก Node.js เวอร์ชันเสถียร (Alpine คือเวอร์ชันลีนๆ เบาๆ) มาเป็นสภาพแวดล้อมตั้งต้น
FROM node:fermium-alpine3.14 AS builder

# 2. กำหนดโฟลเดอร์ทำงานภายในคอนเทนเนอร์
WORKDIR /app

# 3. 🌟 ท่าไม้ตาย Caching: ก๊อปปี้แค่ไฟล์ package.json มาก่อน
COPY package*.json ./

# 4. สั่งติดตั้ง Dependencies (node_modules)
RUN npm install

# 5. ก๊อปปี้ Source code ทั้งหมดของเราตามเข้าไป
COPY . .

# 6. สั่ง Build โค้ด Vue 3 ของเราให้กลายเป็นไฟล์ Static (จะไปอยู่ในโฟลเดอร์ /app/dist)
RUN npm run build


# ==========================================
# 🚀 Stage 2: Production Stage (พนักงานเสิร์ฟ)
# ==========================================
# 7. เลือก Nginx เวอร์ชันเสถียรมาเป็นคอนเทนเนอร์ตัวใหม่
FROM nginx:stable-alpine as production-stage

# 8. 🌟 เวทมนตร์: ก๊อปปี้โฟลเดอร์ /app/dist จาก "builder" (Stage 1) มาใส่ในโฟลเดอร์ของ Nginx
COPY --from=builder /app/dist /usr/share/nginx/html

# 9. เจาะช่องพอร์ต 80 เพื่อให้คนภายนอกเข้ามาดูเว็บได้
EXPOSE 80

# 10. สั่งให้ Nginx ทำงานแบบ Background (Daemon) ทันทีที่คอนเทนเนอร์ถูกรัน
CMD ["nginx", "-g", "daemon off;"]

(อ้างอิงโค้ดจากคัมภีร์ Architecting Vue.js 3)

วิธีนำไปใช้งาน: เมื่อเขียนไฟล์เสร็จแล้ว เปิด Terminal ขึ้นมาแล้วรันคำสั่ง:

  1. docker build -t my-vue-app . (สั่งให้ Docker สร้าง Image ตามใบสั่งใน Dockerfile)
  2. docker run -d -p 8080:80 my-vue-app (สั่งรัน Image ขึ้นมาเป็น Container โดยผูกพอร์ต 8080 ของเครื่องเรา เข้ากับพอร์ต 80 ของ Nginx) เสร็จแล้ว! เข้าไปดูผลงานที่ http://localhost:8080 ได้เลยครับ

5. 🛡️ เคล็ดลับจากคัมภีร์ลับ (Under the Hood / Pro-Tips)

เพื่อให้การทำ Docker ของน้องๆ สมบูรณ์แบบระดับ Senior นี่คือข้อควรระวังครับ:

💡 1. ทำไมต้อง COPY package.json แยกกันกับ Source Code? สังเกตสเตปที่ 3 และ 5 ไหมครับ? ทำไมเราไม่ COPY . . รวดเดียวเลย? เหตุผลคือ Docker มีระบบ Layer Caching ครับ ทุกครั้งที่เราแก้โค้ด Vue ในไฟล์ .vue หรือ .js ไฟล์ package.json มักจะไม่ได้ถูกแก้ด้วย การทำแบบนี้จะทำให้ Docker ข้ามคำสั่ง npm install (ที่กินเวลานานมาก) ไปได้เลย มันจะดึงของเก่าจาก Cache มาใช้ ช่วยให้เรา Build งานครั้งต่อไปได้เร็วขึ้นเป็น 10 เท่า! ถือเป็น Best Practice ที่ต้องจำให้ขึ้นใจเลยครับ

🚨 2. กับดัก Vue Router History Mode (Nginx 404 Error) ถ้าน้องๆ ใช้ Vue Router แบบ history mode (ไม่มีเครื่องหมาย # ใน URL) น้องๆ จะเจอปัญหานี้แน่นอน: เข้าหน้าแรกได้ แต่พอกด Refresh ที่หน้า /about ปุ๊บ Nginx จะพ่นหน้า 404 Not Found ออกมาทันที! นั่นเพราะ Nginx พยายามไปหาไฟล์ชื่อ about.html ในเซิร์ฟเวอร์ ซึ่งมันไม่มีอยู่จริง (เรามีแต่ index.html ของ SPA)

วิธีแก้: เราต้องแก้คอนฟิกของ Nginx ให้ส่งทุก Request กลับไปหา index.html ครับ ให้สร้างไฟล์ default.conf ไว้ในโปรเจกต์ แล้วเพิ่มคำสั่งนี้ตอน Build โค้ด:

# ตัวอย่างข้างในไฟล์ default.conf (ตั้งค่า Nginx ให้รองรับ SPA)
server {
    listen 80;
    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html; # 🌟 บรรทัดนี้แหละที่บอกว่า "ถ้าหาไฟล์ไม่เจอ ให้โยนกลับไปที่ index.html นะ"
    }
}

(แล้วอย่าลืมใช้คำสั่ง COPY default.conf /etc/nginx/conf.d/default.conf ใน Dockerfile Stage 2 ด้วยนะครับ)

6. 🏁 บทสรุป (To be continued…)

การนำแอปพลิเคชัน Vue 3 เข้าสู่โลกของ Docker ผ่านสถาปัตยกรรม Multi-stage Build และการใช้ Nginx เป็นการยกระดับมาตรฐานการทำงานของน้องๆ ขึ้นไปสู่ระดับ Enterprise ครับ มันช่วยแก้ปัญหาเรื่อง Environment ไม่ตรงกัน ช่วยลดขนาดของแอปพลิเคชัน และทำให้พร้อมที่จะถูกนำไปวางบน Cloud Providers ต่างๆ ได้ทันที (เช่น AWS, Google Cloud, หรือ DigitalOcean)

เมื่อแอปของเราพร้อมที่จะเดินทางขนาดนี้แล้ว ในบทความถัดไป เราจะมาดูวิชา CI/CD (Continuous Integration / Continuous Deployment) กันครับ เราจะสร้างระบบอัตโนมัติที่พอน้องๆ กด git push ปุ๊บ โค้ดจะถูกเทสต์และ Build เป็น Docker ให้เสร็จสรรพ พร้อมปล่อยขึ้น Production อัตโนมัติ! เตรียมตัวก้าวเข้าสู่วิถีของเทพ DevOps กันได้เลยครับ

ต้องการที่ปรึกษาและพัฒนาระบบ Web Application หรือ Frontend Architecture ให้กับธุรกิจของคุณ? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p