Workshop: Deploy เว็บไซต์จาก GitHub สู่ VPS อัตโนมัติด้วย Git

Categories

Workshop: Deploy เว็บไซต์จาก GitHub สู่ VPS อัตโนมัติด้วย Git

ในยุคของการพัฒนาซอฟต์แวร์สมัยใหม่ การ Deploy เว็บไซต์ไปยัง Server อย่างอัตโนมัติถือเป็นสิ่งจำเป็น บทความนี้จะสอนคุณวิธีการตั้งค่า Automated Deployment ระบบโดยใช้ Git Hooks เพื่อให้เว็บไซต์อัปเดตตัวเอง ทุกครั้งที่คุณ Push Code ไปยัง GitHub Repository ระบบนี้เรียกว่า “Git-based Deployment” และเป็นวิธีที่ปลอดภัยและเชื่อถือได้ในการ Deploy บน ผู้ให้บริการโฮสติ้ง Cloud VPS

ทำไมต้อง Automated Deployment?

การ Deploy ด้วยตนเองนั้นใช้เวลานาน และเสี่ยงต่อความผิดพลาด ด้วย Automated Deployment คุณสามารถ:

  • ลดเวลา Deployment จากนาทีลงเหลือเพียงวินาที
  • ลดความเสี่ยงของข้อผิดพลาดในการ Deploy
  • ทำให้ทีมพัฒนาสามารถ Deploy บ่อยครั้งได้อย่างปลอดภัย
  • สร้างระบบ Continuous Integration ที่พื้นฐาน
  • ทำให้การ Rollback เป็นไปง่าย หากมีปัญหา

สิ่งที่ต้องการก่อนเริ่มต้น

  • VPS ที่รัน Linux (ใช้ ผู้ให้บริการโฮสติ้ง Cloud VPS ได้ดี)
  • GitHub Account พร้อม Repository ที่มี Code
  • SSH Access ไปยัง VPS
  • ความเข้าใจพื้นฐาน Git Command
  • Terminal หรือ SSH Client บนเครื่องของคุณ

ขั้นตอนที่ 1: เตรียม SSH Connection บน VPS

ขั้นแรก คุณต้องสามารถเข้าถึง VPS ของคุณผ่าน SSH ด้วยการพิมพ์คำสั่ง:

ssh -i /path/to/your/private/key user@your-vps-ip-address

ถ้าคุณใช้รหัสผ่าน ให้ใช้:

ssh user@your-vps-ip-address

หากยังไม่มี SSH Key คุณสามารถสร้างใหม่ด้วยคำสั่ง:

ssh-keygen -t rsa -b 4096 -f ~/.ssh/vps_key -C "[email protected]"

ขั้นตอนที่ 2: สร้าง Bare Repository บน VPS

หลังจากเข้าสู่ VPS แล้ว ให้สร้าง Directory สำหรับ Repository:

mkdir -p /var/repo/website.git
cd /var/repo/website.git
git init --bare

“Bare Repository” คือ Repository ที่ไม่มี Working Directory สามารถรับ Push ได้ แต่ไม่สามารถแก้ไข File ได้โดยตรง นี่คือระบบที่ปลอดภัยมากที่สุดสำหรับการ Deploy

ตรวจสอบว่า Repository สร้างเสร็จสมบูรณ์:

ls -la /var/repo/website.git/

คุณจะเห็น Directory เช่น branches, config, description, HEAD, hooks, objects, refs

ขั้นตอนที่ 3: สร้าง Post-Receive Hook

Post-Receive Hook คือ Script ที่จะทำงานโดยอัตโนมัติหลังจากได้รับ Push จาก Git สร้างไฟล์ hook:

cat > /var/repo/website.git/hooks/post-receive << 'EOF'
#!/bin/bash
WORK_TREE=/var/www/html
GIT_DIR=/var/repo/website.git

echo "Deploying code to $WORK_TREE..."

# Checkout files to the working directory
git --work-tree=$WORK_TREE --git-dir=$GIT_DIR checkout -f

echo "Deployment completed successfully!"
echo "Server time: $(date)"
EOF

จากนั้นให้ทำให้ Hook สามารถถูก Execute ได้:

chmod +x /var/repo/website.git/hooks/post-receive

ความหมายของแต่ละบรรทัด:

  • WORK_TREE: Directory ที่จะเก็บ Code ของเว็บไซต์ (ในที่นี้คือ /var/www/html)
  • GIT_DIR: Directory ของ Bare Repository
  • git checkout -f: คำสั่งเพื่อดึง Code ใหม่ไปยัง WORK_TREE

ขั้นตอนที่ 4: เตรียม Working Directory บน VPS

ตรวจสอบว่า /var/www/html Directory มีอยู่ และให้สิทธิ์ที่ถูกต้อง:

# สร้าง Directory ถ้ายังไม่มี
mkdir -p /var/www/html

# เปลี่ยน Owner เป็น User ที่ใช้ SSH
chown -R $USER:$USER /var/www/html

# กำหนด Permissions
chmod -R 755 /var/www/html

ขั้นตอนที่ 5: เพิ่ม VPS เป็น Git Remote บนเครื่องพัฒนา

บนเครื่องพัฒนาของคุณ (ที่มี Git Repo ของโปรเจกต์) ให้เพิ่ม VPS เป็น Remote:

cd /path/to/your/local/repository
git remote add vps ssh://user@your-vps-ip/var/repo/website.git

ตรวจสอบว่า Remote ถูกเพิ่มแล้ว:

git remote -v

คุณจะเห็นผลลัพธ์แบบนี้:

origin  https://github.com/your-username/your-repo.git (fetch)
origin  https://github.com/your-username/your-repo.git (push)
vps     ssh://user@your-vps-ip/var/repo/website.git (fetch)
vps     ssh://user@your-vps-ip/var/repo/website.git (push)

ขั้นตอนที่ 6: ทดสอบ Deploy โดย Push

เตรียมพร้อม Code ของคุณบน Git:

git add .
git commit -m "Initial commit for deployment"
git push origin main

ตอนนี้ Deploy ไปยัง VPS:

git push vps main

หากสำเร็จ คุณจะเห็น Message แบบนี้:

Counting objects: 5, done.
Writing objects: 100% (5/5), 412 bytes | 0 bytes/s, done.
Total 5 (delta 0), reused 0 (delta 0)
Deploying code to /var/www/html...
Deployment completed successfully!
Server time: Sun Mar 30 12:34:56 UTC 2026

ขั้นตอนที่ 7: ตรวจสอบว่า Code ถูก Deploy ถูกต้อง

เข้าสู่ VPS และตรวจสอบว่า File ถูก Deploy แล้ว:

ssh user@your-vps-ip
ls -la /var/www/html

คุณจะเห็น File ของเว็บไซต์ทั้งหมด หากใช้เว็บเซิร์ฟเวอร์ เช่น Nginx หรือ Apache ให้ตรวจสอบว่าเซิร์ฟเวอร์ชี้ไปยัง /var/www/html

การตั้งค่า Nginx เพื่อให้ทำงานกับ Deployed Code

ถ้าคุณใช้ Nginx ให้ตั้งค่า Server Block:

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;
    root /var/www/html;
    index index.html index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
}

การแก้ไขปัญหาที่พบบ่อย

ปัญหา: Permission Denied

หากเห็น Error "Permission Denied" เมื่อ Push ให้ตรวจสอบสิทธิ์ของ Repository Directory:

chmod -R 755 /var/repo/website.git
chown -R $USER:$USER /var/repo/website.git

ปัญหา: SSH Connection Failed

ตรวจสอบว่า SSH Key ถูกตั้งค่าอย่างถูกต้อง:

ssh-keyscan your-vps-ip >> ~/.ssh/known_hosts
ssh -i /path/to/key user@your-vps-ip "echo 'SSH Connection Successful'"

ปัญหา: Post-Receive Hook ไม่ทำงาน

ตรวจสอบว่า Hook มี Execution Permission:

ls -la /var/repo/website.git/hooks/post-receive

ผลลัพธ์ควรแสดง -rwxr-xr-x (x = executable)

ขั้นตอนการ Deploy ในชีวิตจริง

เมื่อติดตั้งและทดสอบเสร็จแล้ว นี่คือการไหล (Workflow) ของการ Deploy ทุกครั้งที่คุณต้องการอัปเดตเว็บไซต์:

# 1. ทำงานบนเครื่องพัฒนา
cd /path/to/your/local/repository

# 2. แก้ไข Code ตามต้องการ
echo "<h1>New Feature</h1>" >> index.html

# 3. Commit Changes
git add .
git commit -m "Add new feature"

# 4. Push ไปยัง GitHub
git push origin main

# 5. Deploy ไปยัง VPS
git push vps main

# 6. (Optional) ตรวจสอบผลลัพธ์
ssh user@your-vps-ip "ls -la /var/www/html"

Advanced: เพิ่ม Pre-Receive Hook สำหรับ Validation

สำหรับความปลอดภัยมากขึ้น คุณสามารถสร้าง Pre-Receive Hook เพื่อตรวจสอบ Code ก่อน Deploy:

cat > /var/repo/website.git/hooks/pre-receive << 'EOF'
#!/bin/bash
echo "Validating code before deployment..."

# Example: Check if there are no syntax errors
# (This is just a placeholder - adjust based on your needs)

echo "Validation passed!"
EOF

chmod +x /var/repo/website.git/hooks/pre-receive

การขยายเพิ่มเติม: GitHub Webhooks

หากต้องการให้ Deploy อัตโนมัติ ทุกครั้งที่ Push ไปยัง GitHub โดยไม่ต้องพิมพ์คำสั่ง คุณสามารถใช้ GitHub Webhooks ร่วมกับ Webhook Receiver Script บน VPS

สรุป

Workshop นี้ได้อธิบายวิธีการตั้งค่า Automated Deployment ระบบสำหรับเว็บไซต์ของคุณ โดยใช้ Git Hooks ระบบนี้ช่วยให้ Deploy เว็บไซต์ได้อย่างง่ายและปลอดภัย ลดเวลา Deployment และลดความเสี่ยงของความผิดพลาด ด้วยการปฏิบัติตามขั้นตอนเหล่านี้ คุณจะสามารถจัดการเว็บไซต์ได้อย่างมีประสิทธิภาพมากขึ้น และทีมพัฒนาของคุณจะสามารถ Deploy บ่อยครั้งโดยไม่มีกังวล