คู่มือ Git Deployment: วิธี Deploy เว็บไซต์ด้วย Git แบบมืออาชีพ

Git Deployment Guide: Professional Web Hosting Deployment with Git

หากคุณเป็นผู้พัฒนาเว็บไซต์มืออาชีพ คุณอาจเคยใช้ FTP หรือ SFTP ในการ Upload ไฟล์ไปยังเซิร์ฟเวอร์ แต่วิธีการนี้มีข้อเสียมากมาย เช่น ใช้เวลา ยุ่งยาก และมีความเสี่ยงสูง วิธีที่ดีกว่าคือการใช้ Git ในการ Deploy แบบที่ใช้กันในอุตสาหกรรมมืออาชีพ ในบทความนี้ เราจะสอนวิธี Deploy เว็บไซต์ด้วย Git บน VPS ไทยและ Web Hosting ต่าง ๆ รวมถึงการตั้งค่า Workflow, GitHub Actions, WordPress Deployment, .gitignore และการ Rollback เพื่อให้คุณสามารถจัดการโค้ดอย่างมืออาชีพ

Git คืออะไร ทำไมถึงใช้ Deploy เว็บไซต์ได้

Git เป็นระบบควบคุมเวอร์ชัน (Version Control System) ที่ช่วยให้นักพัฒนาสามารถติดตามการเปลี่ยนแปลงของโค้ด บันทึก (commit) การเปลี่ยนแปลง และสามารถย้อนกลับไปที่เวอร์ชันเก่าได้ ไม่ว่าจะเป็นเวอร์ชันก่อนหน้านี้ Git ถูกสร้างขึ้นโดย Linus Torvalds ผู้สร้าง Linux เพื่อจัดการโปรเจกต์ Linux ที่มีความซับซ้อนสูง

ท่ำไม Git ถึงใช้ Deploy เว็บไซต์ได้? เพราะ Git มีความสามารถในการ Push (ส่ง) โค้ดไปยังเซิร์ฟเวอร์ได้ทันที เมื่อคุณ Push โค้ดไปยังเซิร์ฟเวอร์ Git Repository บนเซิร์ฟเวอร์จะตรวจจับการ Push นี้ และสามารถรัน Script (Hook) โดยอัตโนมัติเพื่ออัปเดตเว็บไซต์ได้ วิธีนี้ทำให้การ Deploy เร็วขึ้น ปลอดภัยกว่า และง่ายต่อการจัดการ

ข้อดีของการใช้ Git Deploy นอกจากความเร็วแล้ว ยังมีข้อดีอื่น ๆ เช่น สามารถติดตามการเปลี่ยนแปลงแต่ละรายการ สามารถทำงานเป็นทีม สามารถสร้าง Branch สำหรับการพัฒนา Feature ต่าง ๆ ได้ และสามารถ Rollback ได้ทันทีหากมีปัญหา

Git vs FTP การ Deploy แบบไหนดีกว่า

ก่อนที่เราจะเข้าไปในการตั้งค่า Git Deployment เรามาเปรียบเทียบ Git กับ FTP กันก่อน เพื่อให้เข้าใจว่าเหตุใดจึงควรเลือก Git มากกว่า FTP สำหรับการ Deploy เว็บไซต์ในยุคปัจจุบัน

FTP (File Transfer Protocol) เป็นวิธีการ Upload ไฟล์ที่เก่าแก่ที่สุด ใช้สำหรับการถ่ายโอนไฟล์จากคอมพิวเตอร์ของคุณไปยังเซิร์ฟเวอร์ เมื่อต้องการอัปเดตเว็บไซต์ คุณจะต้องเปิดโปรแกรม FTP Client, เชื่อมต่อกับเซิร์ฟเวอร์ แล้วจากนั้น Upload ไฟล์ที่เปลี่ยนแปลง ดูเหมือนง่าย แต่ในความเป็นจริง วิธีนี้มีข้อเสียมากมาย

ข้อเสีย FTP: ใช้เวลาในการ Upload ไฟล์ที่มีจำนวนมาก, ไม่สามารถติดตามการเปลี่ยนแปลงได้ชัดเจน, ความเสี่ยงในการ Upload ไฟล์ผิดพลาด, ไม่สามารถเนิก (roll back) ได้ง่าย, ไม่เหมาะสำหรับทีมที่ใหญ่โตเพราะไม่มีการจัดการ Conflict, ต้องติดตามไฟล์ที่ต้องอัปโหลดด้วยตนเอง

Git Deployment ในทางกลับกัน เป็นวิธีการที่ใช้ Version Control System ในการจัดการโค้ด คุณเพียงแค่ Commit โค้ดของคุณบน Local Machine และ Push ไปยัง Remote Repository (เช่น GitHub) หลังจากนั้น เซิร์ฟเวอร์ของคุณจะดึง (Pull) โค้ดที่อัปเดตแล้วโดยอัตโนมัติผ่าน Git Hooks

ข้อดี Git Deploy: เร็วและง่าย, สามารถติดตามการเปลี่ยนแปลงทั้งหมด, สามารถ Rollback ได้ทันที, เหมาะสำหรับการทำงานเป็นทีม, สามารถใช้ CI/CD (Continuous Integration/Continuous Deployment) ได้, ความปลอดภัยสูงกว่า, สามารถใช้ Branch สำหรับการพัฒนา Feature ต่าง ๆ ได้

สรุปแล้ว Git Deployment ดีกว่า FTP มากในทุกด้าน โดยเฉพาะอย่างยิ่งเมื่อต้องจัดการโค้ดที่มีความซับซ้อน หรือเมื่อต้องทำงานเป็นทีม

ตั้งค่า Git Repository บน Server (VPS) ครั้งแรก

ส่วนแรกของการ Deploy ด้วย Git คือการตั้งค่า Repository บน VPS ของคุณ สมมติว่าคุณได้เช่า VPS จาก AsiaGB.com หรือ Web Hosting ใดก็ตาม ซึ่งสามารถเข้าถึงด้วย SSH ได้ ขั้นตอนแรกคือการ SSH เข้าไปยัง VPS ของคุณ

ssh user@your-vps-ip

หลังจากเข้า SSH แล้ว ให้สร้างโฟลเดอร์สำหรับ Repository โดยปกติจะสร้างไว้ที่ /var/www/ หรือ /home/user/ ให้เราสร้าง Directory ชื่อ repo สำหรับเก็บ Bare Repositories

mkdir -p /var/www/repo/mysite.git
cd /var/www/repo/mysite.git

จากนั้นให้สร้าง Bare Git Repository ที่จะใช้เป็นจุดรับ Push จาก Local Machine

git init --bare

Bare Repository คือ Repository ที่ไม่มี Working Directory ใช้เฉพาะเพื่อรับ Push จาก Local Machine เท่านั้น ไม่ใช้สำหรับแก้ไขไฟล์โดยตรง

จากนั้นให้สร้างโฟลเดอร์สำหรับเว็บไซต์จริง เช่น /var/www/mysite ซึ่งจะเป็นที่เก็บไฟล์เว็บไซต์ที่ผู้เยี่ยมชมเห็น

mkdir -p /var/www/mysite

ทีนี้ เราต้องตั้งค่า Git Hook เพื่อให้เมื่อมีการ Push ไป Repository บน Server มันจะ Pull โค้ดไปยังโฟลเดอร์เว็บไซต์โดยอัตโนมัติ เราจะพูดถึงเรื่องนี้มากขึ้นในหัวข้อ Git Hooks

Workflow การ Deploy ด้วย Git Push

หลังจากตั้งค่า Repository บน Server แล้ว ตอนนี้มาพูดถึงขั้นตอนของการ Deploy ด้วย Git Push กันบ้าง ซึ่งเป็นวิธีการที่ใช้ทั่วไปในการ Deploy เว็บไซต์

ให้เราเริ่มจากการ Clone Repository จาก GitHub ลงมา Local Machine ของคุณ (ถ้าคุณยังไม่ได้ Clone)

git clone https://github.com/yourusername/mysite.git
cd mysite

หลังจากแก้ไขไฟล์ต่าง ๆ เป็นที่เรียบร้อยแล้ว คุณต้อง Stage ไฟล์ที่แก้ไขไว้ โดยใช้คำสั่ง git add

git add .
git status

จากนั้นให้ Commit การเปลี่ยนแปลง โดยใช้คำสั่ง git commit พร้อมกับอธิบายสิ่งที่คุณแก้ไข

git commit -m "Fix homepage layout and add new features"

หลังจากนั้นให้ Push ไปยัง GitHub

git push origin main

เมื่อคุณ Push ไปยัง GitHub แล้ว ขั้นตอนต่อไปคือการ Push ไปยัง Server ของคุณด้วย ซึ่งจะเป็นการส่งคำสั่งให้ Server ดึงโค้ดที่อัปเดตแล้ว

git remote add production user@your-vps-ip:/var/www/repo/mysite.git
git push production main

คำสั่ง git remote add production ใช้เพื่อเพิ่ม Remote Repository ที่ชี้ไปยัง Server ของคุณ และ git push production main ใช้เพื่อส่ง Code ไปยัง Server โดยจะ Trigger Git Hook ที่อยู่บน Server ให้ดึง Code และอัปเดต Webroot โดยอัตโนมัติ

GitHub Actions สำหรับ Auto Deploy (CI/CD เบื้องต้น)

ถ้าคุณต้องการให้ Process ของการ Deploy เป็นอัตโนมัติมากขึ้น สามารถใช้ GitHub Actions ได้ ซึ่งเป็น Feature ของ GitHub ที่ช่วยให้คุณสามารถ Automate Workflow ต่าง ๆ ได้ เช่น การ Deploy อัตโนมัติเมื่อมีการ Push ไปยัง Main Branch

ในการใช้ GitHub Actions คุณต้องสร้างไฟล์ YAML ในโฟลเดอร์ .github/workflows/ ตัวอย่างเช่น deploy.yml

name: Deploy to Production

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3

    - name: Deploy via SSH
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.VPS_HOST }}
        username: ${{ secrets.VPS_USER }}
        key: ${{ secrets.VPS_KEY }}
        script: |
          cd /var/www/repo/mysite.git
          git remote set-url origin https://github.com/yourusername/mysite.git
          git fetch origin main
          git reset --hard origin/main
          cd /var/www/mysite
          npm install
          npm run build

ไฟล์นี้จะทำให้เมื่อมีการ Push ไปยัง Main Branch บน GitHub GitHub Actions จะเชื่อมต่อไปยัง VPS ของคุณผ่าน SSH และรัน Script ที่คุณระบุไว้ ซึ่งจะเป็นการ Deploy อัตโนมัติ

ประโยชน์ของการใช้ GitHub Actions คือคุณไม่ต้อง Push ไปยัง Server แล้ว ทุกสิ่งทุกอย่างจะเป็นอัตโนมัติผ่าน GitHub Actions แต่คุณต้องตั้งค่า SSH Keys และ Secrets ใน GitHub ก่อน

การ Deploy WordPress ด้วย Git

WordPress เป็น Content Management System (CMS) ที่ได้รับความนิยมสูง ใช้สำหรับการสร้างเว็บบล็อก เว็บไซต์ขนาดกลาง และเว็บไซต์ขนาดใหญ่ อย่างไรก็ตาม WordPress มีข้อพิเศษเมื่อมาถึงการ Deploy ด้วย Git

ปัญหาหลักคือ WordPress มี Directory wp-content/uploads ที่เก็บรูปภาพและไฟล์ที่ผู้ใช้อัปโหลด ซึ่งมีขนาดใหญ่มาก และควรเก็บไว้บน Server เท่านั้น ไม่ควร Push ไปยัง Git Repository เพราะจะทำให้ Repository มีขนาดใหญ่ขึ้นมาก

เพื่อแก้ปัญหานี้ คุณต้องสร้างไฟล์ .gitignore และเพิ่ม wp-content/uploads/ เข้าไปในนั้น

# WordPress
/wp-config.php
/wp-content/plugins/hello.php
wp-content/uploads/
.env
node_modules/
*.log

ด้วยวิธีนี้ Git จะไม่ Track ไฟล์ในโฟลเดอร์ wp-content/uploads/ เมื่อคุณ Push ไปยัง Server ไฟล์ในโฟลเดอร์นี้จะยังคงอยู่บน Server โดยไม่ถูกลบออก

นอกจากนี้ คุณยังต้องตั้งค่า Permission ให้ถูกต้องหลังจาก Deploy WordPress โดยใช้คำสั่ง chmod และ chown บน Server

cd /var/www/mysite
sudo chown -R www-data:www-data .
sudo chmod -R 755 .
sudo chmod -R 644 wp-content/
sudo chmod 755 wp-content/uploads/
sudo chmod 755 wp-content/plugins/
sudo chmod 755 wp-content/themes/

.gitignore ไฟล์และโฟลเดอร์ที่ไม่ควร Commit

ไฟล์ .gitignore เป็นไฟล์ที่บอก Git ว่าควรไม่ Track ไฟล์และโฟลเดอร์ใดบ้าง ซึ่งสำคัญมากเพราะมีไฟล์บางประเภทที่ไม่ควร Commit ไปยัง Repository เช่น ไฟล์ Config ที่มี Password, ไฟล์ Log, Temporary Files, เป็นต้น

ตัวอย่างไฟล์ .gitignore ที่ดี:

# Configuration files
.env
.env.local
.env.*.local
config.php
wp-config.php

# Dependencies
node_modules/
vendor/
composer.lock

# Build output
dist/
build/
*.min.js
*.min.css

# Logs
logs/
*.log
npm-debug.log*

# OS files
.DS_Store
Thumbs.db
.vscode/
.idea/

# Temporary files
tmp/
temp/
*.tmp
*.swp
*.swo

# WordPress
wp-content/uploads/
wp-content/backup-*/
wp-content/upgrade/

เมื่อสร้างไฟล์ .gitignore ให้วาง Commit ไว้ในระดับ Root ของ Repository และให้ Commit ไว้ใน Git เพื่อให้สมาชิกทีมอื่น ๆ รู้ว่าไฟล์ใดที่ไม่ควร Commit

Rollback เมื่อ Deploy แล้วมีปัญหา

สถานการณ์ที่แย่ที่สุดสำหรับนักพัฒนาคือการ Deploy โค้ดไปแล้วปรากฎว่ามีข้อผิดพลาดบ้าง ทำให้เว็บไซต์ Down หรือ Broken คุณต้องรีบ Rollback ไปเวอร์ชันก่อนหน้าให้เร็วที่สุด ซึ่งด้วยข้อดีของ Git ทำให้เรามีวิธีหลายวิธีในการแก้ไขปัญหา

วิธีแรกคือการใช้ git revert ซึ่งจะสร้าง Commit ใหม่ที่ยกเลิก (Undo) การเปลี่ยนแปลงจาก Commit ที่ระบุ วิธีนี้ดีสำหรับการเก็บประวัติทั้งหมดไว้

git log --oneline
git revert HEAD~1

คำสั่ง git log --oneline จะแสดง Commit ต่าง ๆ และ git revert HEAD~1 จะยกเลิก Commit ที่ 1 รายการก่อนหน้า

วิธีที่สองคือการใช้ git reset ซึ่งจะโยน (Reset) HEAD ไปยัง Commit ที่ระบุ แต่วิธีนี้มีความเสี่ยงเพราะจะลบ Commit ที่อยู่หลัง Commit ที่ระบุ ใช้ได้แต่เมื่อคุณเลือกใช้เท่านั้น

git reset --hard HEAD~1

คำสั่ง --hard จะ Reset ทั้ง Commit และ Working Directory ให้เหมือนกับ Commit ที่ระบุ วิธีนี้ใช้ความระมัดระวัง

วิธีที่สามคือการ Revert การเปลี่ยนแปลง Specific Files เท่านั้น โดยใช้ git checkout

git checkout HEAD~1 -- path/to/file.php

หลังจากใช้วิธีใด ๆ ข้างต้น คุณต้อง Commit การเปลี่ยนแปลง และ Push ไปยัง Repository

git commit -m "Revert changes to fix the issue"
git push production main

Git Hooks: post-receive hook สำหรับ Auto Deploy

Git Hooks คือ Script ที่จะรันโดยอัตโนมัติเมื่อมี Git Events บางอย่างเกิดขึ้น เช่น Pre-commit, Post-commit, Post-receive เป็นต้น โดย post-receive hook เป็น Hook ที่รันหลังจากที่ Server รับ Push มา ซึ่งเหมาะสำหรับการ Deploy โดยอัตโนมัติ

ในการตั้งค่า Post-receive Hook ให้ SSH เข้ายัง Server และสร้างไฟล์ hooks/post-receive ในโฟลเดอร์ Repository

ssh user@your-vps-ip
cd /var/www/repo/mysite.git
nano hooks/post-receive

หลังจากนั้น ให้เพิ่ม Script ต่อไปนี้

#!/bin/bash
WORKTREE=/var/www/mysite

while read oldrev newrev ref
do
  if [[ $ref = refs/heads/main ]];
  then
    echo "Deploying main branch to production..."
    git --work-tree=$WORKTREE --git-dir=/var/www/repo/mysite.git checkout -f
    echo "Deployment completed."
  fi
done

จากนั้นให้เปลี่ยน Permission ของไฟล์เป็น Executable

chmod +x hooks/post-receive

ด้วยการตั้งค่านี้ เมื่อคุณ Push ไปยัง Main Branch ของ Repository บน Server Hook นี้จะทำการ Checkout ไฟล์ไปยังโฟลเดอร์เว็บไซต์โดยอัตโนมัติ ทำให้การ Deploy เป็นไปอย่างเร็วและง่าย