การนำไปใช้งานบนแพลตฟอร์มโฮสติ้ง
นำแอป Vue ไปใช้งานบนโฮสต์และแพลตฟอร์มแบบสแตติก
การนำไปใช้งานบนแพลตฟอร์มโฮสติ้ง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
การนำแอปขึ้นใช้งาน
SPA ของ Vue จะบิลด์เป็นไฟล์สแตติก ดังนั้นคุณจึงโฮสต์บนโฮสต์สแตติกใดก็ได้ แพลตฟอร์มอย่าง Netlify Vercel และ GitHub Pages ช่วยให้การนำไฟล์เหล่านี้ไปติดตั้งทำได้รวดเร็วและมักไม่มีค่าใช้จ่าย
สิ่งที่คุณนำไปติดตั้ง
คุณจะนำเนื้อหาของโฟลเดอร์ dist ที่สร้างจาก npm run build ไปติดตั้ง โฮสต์จะให้บริการไฟล์เหล่านี้ผ่าน CDN แก่ผู้ใช้ทั่วโลก
npm run build
# upload the dist/ folder to your hostการนำไปติดตั้งบน Netlify
Netlify สามารถบิลด์จากที่เก็บ Git ของคุณได้ คุณเพียงระบุคำสั่งบิลด์และโฟลเดอร์ที่จะเผยแพร่
# Netlify settings
# Build command: npm run build
# Publish directory: distการนำไปติดตั้งบน Vercel
Vercel จะตรวจจับโครงการ Vite โดยอัตโนมัติ เชื่อมต่อที่เก็บของคุณ แล้วระบบจะเรียกใช้การบิลด์และให้บริการผลลัพธ์ โดยนำไปติดตั้งใหม่ทุกครั้งที่มีการส่งการเปลี่ยนแปลง
# Vercel auto-detects:
# Build command: npm run build
# Output directory: distการนำไปติดตั้งบน GitHub Pages
GitHub Pages ให้บริการไฟล์สแตติกจากที่เก็บ คุณสามารถบิลด์ในเครื่องหรือใน CI แล้วส่งผลลัพธ์จาก dist ไปยังสาขา Pages หรือใช้การทำงานอัตโนมัติ
ปัญหาโหมดประวัติ
Vue Router ใน โหมดประวัติ จะสร้าง URL ที่อ่านง่าย เช่น /about แต่โฮสต์สแตติกไม่มีไฟล์ /about จริง ดังนั้นการเข้าหน้าโดยตรงหรือการรีเฟรชจึงส่งผลลัพธ์เป็น 404
การแก้ไขด้วยการเปลี่ยนเส้นทาง SPA
วิธีแก้คือบอกเซิร์ฟเวอร์ให้ส่ง index.html สำหรับทุกเส้นทาง เพื่อให้ Vue Router จัดการการนำทางบนไคลเอ็นต์
กฎเปลี่ยนเส้นทางของ Netlify
บน Netlify ให้เพิ่มไฟล์ _redirects (หรือกฎ netlify.toml) ที่เขียนเส้นทางทั้งหมดใหม่ให้ไปยัง index.html
# public/_redirects
/* /index.html 200กฎเขียนเส้นทางใหม่ของ Vercel
บน Vercel การเขียนเส้นทางใหม่ใน vercel.json จะทำให้เกิดการเปลี่ยนเส้นทางสำรองไปยัง index.html เช่นเดียวกัน
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}การกำหนดค่าเส้นทางหลัก
หากแอปของคุณให้บริการจากเส้นทางย่อย (ซึ่งพบได้บ่อยบน GitHub Pages เช่น /my-repo/) ให้กำหนดตัวเลือก base ในการตั้งค่า Vite เพื่อให้ URL ของไฟล์ทรัพยากรแก้ไขไปยังตำแหน่งที่ถูกต้อง
// vite.config.js
export default {
base: "/my-repo/"
}การติดตั้งผ่าน CI
ทำให้การนำไปติดตั้งเป็นอัตโนมัติด้วยการผสานรวมอย่างต่อเนื่อง เวิร์กโฟลว์จะติดตั้งการพึ่งพา เรียกใช้การทดสอบ บิลด์ และเผยแพร่ทุกครั้งที่มีการส่งการเปลี่ยนแปลงไปยังสาขาหลัก ทำให้การนำขึ้นใช้งานไม่ต้องทำด้วยตนเอง
# CI steps
# 1. npm install
# 2. npm run test
# 3. npm run build
# 4. deploy dist/ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับการนำไปติดตั้งของคุณ
สรุปทบทวน
นำโฟลเดอร์ dist ไปติดตั้งบนโฮสต์สแตติกอย่าง Netlify, Vercel หรือ GitHub Pages เพิ่มกลไกสำรองของ SPA (เปลี่ยนเส้นทางหรือเขียนเส้นทางใหม่ไปยัง index.html) เพื่อให้เส้นทางในโหมดประวัติทำงานได้เมื่อรีเฟรช กำหนดค่า base ของ Vite สำหรับการโฮสต์บนเส้นทางย่อย และทำทั้งหมดนี้ให้เป็นอัตโนมัติด้วย CI บทถัดไป คุณจะเฝ้าติดตามและดูแลแอปในสภาพแวดล้อมจริง
คำถามที่พบบ่อย
บทเรียน “การนำไปใช้งานบนแพลตฟอร์มโฮสติ้ง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การนำไปใช้งานบนแพลตฟอร์มโฮสติ้ง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การนำไปใช้งานบนแพลตฟอร์มโฮสติ้ง”
นำแอป Vue ไปใช้งานบนโฮสต์และแพลตฟอร์มแบบสแตติก คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “การนำไปใช้งานบนแพลตฟอร์มโฮสติ้ง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การเพิ่มประสิทธิภาพกระบวนการสร้าง
- การนำไปใช้งานบนแพลตฟอร์มโฮสติ้ง
- การเฝ้าติดตามและบำรุงรักษา