1. การ Deploy คืออะไร?

การ Deploy หมายถึงการนำแอปพลิเคชัน Vue.js ของคุณขึ้นไปยัง Server หรือ Platform ที่ทำให้ผู้ใช้สามารถเข้าถึงได้ผ่านอินเทอร์เน็ต โดยทั่วไปการ Deploy รวมถึงการสร้าง Production Build, อัปโหลดไฟล์, และการตั้งค่าต่าง ๆ ใน Server

2. การสร้าง Production Build

Vue CLI มีคำสั่งสำหรับสร้าง Production Build ที่ปรับแต่งประสิทธิภาพให้เหมาะสมสำหรับการใช้งานจริง

คำสั่งสร้าง Build:

npm run build

หลังจากรันคำสั่งนี้ จะมีโฟลเดอร์ dist/ ถูกสร้างขึ้น ซึ่งมีไฟล์ HTML, CSS, และ JavaScript ที่ถูก Minify และ Optimize พร้อมสำหรับการ Deploy

3. การ Deploy ไปยัง Static Hosting Platforms

3.1 Deploy บน Netlify

1. ติดตั้ง Netlify CLI (ถ้ายังไม่มี): npm install -g netlify-cli
2. Login ไปยัง Netlify: netlify login
3. Deploy แอปพลิเคชัน: netlify deploy
4. เมื่อระบบถามหาโฟลเดอร์ ให้เลือก dist/: ? Publish directory dist
5. ระบบจะให้ URL สำหรับตรวจสอบชั่วคราว และสามารถ Publish ให้ใช้งานจริงได้:
   bash netlify deploy --prod

3.2 Deploy บน Vercel

1. ติดตั้ง Vercel CLI: npm install -g vercel
2. Login ไปยัง Vercel: vercel login
3. Deploy แอปพลิเคชัน: vercel
4. ระบบจะทำการตรวจสอบไฟล์และสร้าง URL สำหรับแอปพลิเคชันของคุณ

4. การ Deploy บน Web Server เช่น Apache หรือ Nginx

การตั้งค่า Apache

1. คัดลอกไฟล์ทั้งหมดในโฟลเดอร์ dist/ ไปยัง Root Directory ของ Apache เช่น /var/www/html.
2. เพิ่มไฟล์ .htaccess เพื่อรองรับการทำงานของ Vue Router:
   <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>

การตั้งค่า Nginx

1. คัดลอกไฟล์ทั้งหมดในโฟลเดอร์ dist/ ไปยัง Root Directory เช่น /usr/share/nginx/html.
2. แก้ไขไฟล์ nginx.conf: server { listen 80; server_name your-domain.com; root /usr/share/nginx/html; index index.html; location / { try_files $uri /index.html; } }
3. รีสตาร์ท Nginx:
   bash sudo systemctl restart nginx

5. การ Deploy บน Docker

สร้าง Dockerfile

# ใช้ Node.js สำหรับการ Build
FROM node:16 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . ./
RUN npm run build

# ใช้ Nginx สำหรับการ Deploy
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

คำสั่งสำหรับสร้างและรัน Docker Image

# สร้าง Docker Image
docker build -t vue-app .

# รัน Docker Container
docker run -p 8080:80 vue-app

แอปพลิเคชันของคุณจะพร้อมใช้งานที่ http://localhost:8080

6. การตรวจสอบหลัง Deploy

1. ตรวจสอบผ่าน Browser: เปิด URL ที่ Deploy แอปพลิเคชันไว้
2. ตรวจสอบ Error: ใช้ Developer Tools ใน Browser หรือ Logs บน Server
3. ทดสอบการทำงานของฟีเจอร์ต่าง ๆ: เช่น การนำทาง, การแสดงผล, และการโหลดข้อมูลจาก API

7. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับ:

• การสร้าง Production Build สำหรับแอปพลิเคชัน Vue.js
• การ Deploy ไปยัง Static Hosting Platforms เช่น Netlify และ Vercel
• การตั้งค่า Web Server เช่น Apache และ Nginx
• การ Deploy ด้วย Docker
• การตรวจสอบและแก้ไขปัญหาหลังการ Deploy

ในบทถัดไป เราจะพูดถึง Best Practices สำหรับการพัฒนาแอปพลิเคชัน Vue.js เพื่อให้โค้ดของคุณมีประสิทธิภาพและสามารถบำรุงรักษาได้ง่าย!