ติดตั้ง VVV สำหรับพัฒนา WordPress บน Isolated Development Environment

อัปเดต 25 กุมภาพันธ์ 2019 – รองรับ VVV 2.5.1

VVV (Varying Vagrant Vagrants) เป็นคอนฟิกของ Vagrant ที่ใช้สำหรับการพัฒนาเว็บด้วยเวิร์ดเพรสโดยเฉพาะ (คล้ายๆ กับ Homestead ของ Laravel) โดย VVV นั้นจะมีซอฟต์แวร์ต่างๆ ที่รองรับโฟลวการพัฒนาแบบสมัยใหม่มาให้อย่างครบครัน เช่น

• เว็บเซิร์ฟเวอร์ nginx
• PHP-FPM 7.2
• ส่วนเสริม memcached, opcache, xdebug, มี PHPUnit สำหรับเขียนเทส
• มี Git ในตัว
• มี Composer และ WP CLI
• มี Node.js พร้อม Grunt สำหรับงาน Front-end ต่างๆ
• MailHog จำลองเมลเซิร์ฟเวอร์พร้อมเปิดดูได้ว่าส่งอะไรออกไปบ้าง

Vagrant นั้นเป็นเครื่องมือยอดนิยมตัวหนึ่งในการสร้าง Isolated Development Environment โดยการนำเอา Virtual Machine มาช่วยในเรื่องดังกล่าว (นึกภาพว่าเราลง VirtualBox แล้วติดตั้งลินิกซ์และซอฟต์แวร์อื่นๆ ลงไป  แล้วไปพัฒนาเว็บใน VirtualBox แทน) โดย Vagrant จะทำหน้าที่ติดตั้งและคอนฟิกซอฟต์แวร์ต่างๆ ภายในนั้นให้ทั้งหมด  สามารถแมพ IP Address กับ Hostname ให้  และซิงก์ไฟล์จากใน Virtual Machine ออกมาที่เครื่องเราเพื่อให้แก้ไขได้อย่างสะดวกได้ด้วย

ข้อดีของการพัฒนาเว็บบน Isolated Development Environment คือเราไม่ต้องปวดหัวกับการลงโปรแกรมในเครื่องให้ถูกรุ่น  และไม่ต้องเสี่ยงว่าการลงโปรแกรมใหม่ๆ จะตีกับโปรแกรมเดิมที่มีอยู่แล้วด้วย  โดยเฉพาะกับผู้ใช้บน Windows ที่มักจะเจอปัญหาจุกจิกอันเนื่องมาจากซอฟต์แวร์สายนี้ถูกออกแบบมาเพื่อใช้งานบนลินิกซ์เป็นหลัก  ปัญหาเหล่านี้จะหมดไปทันทีด้วย Isolated Development Environment

และข้อดีสูงสุดของมัน คือมันเท่ครับ! (หึหึ)

Vagrant และ Docker

นอกจาก VVV ที่รันอยู่บน Vagrant แล้ว อีกหนึ่งระบบที่นิยมเอามาใช้ทำ Isolated Development Environment นั้นคือ Docker (ทีม 10up ที่ทำ VVV ก็มีทำ WP Local Docker ด้วย)

โดยส่วนตัวผมพยายามสลับไปใช้ Docker อยู่หลายครั้งไม่ว่าจะเป็น Local by Flywheel หรือ WP Local Docker แต่มักจะเจอกับปัญหา performance ที่ีทำให้ localhost ของเราทำงานช้า และยังกินพื้นที่ storage เป็นจำนวนมากด้วย ทำให้สุดท้ายแล้วก็กลับมาใช้ VVV บน Vagrant เป็นหลัก

ติดตั้ง Vagrant

ก่อนจะเซ็ตอัพ VVV นั้นเราจำเป็นต้องมี Vagrant เสียก่อน  โดยปกติแล้วเราจะใช้ VirtualBox เป็นตัวรัน Virtual Machine แต่หากใครใช้ Windows 8.1 หรือใหม่กว่า  จะเลือกใช้ Hyper-V ที่มากับวินโดวส์เองก็ได้เช่นกัน  ทั้งนี้ Hyper-V ที่มากับวินโดวส์เวอร์ชัน 8.0 ลงไป  จะไม่สามารถใช้กับ Vagrant ได้  ต้องดาวน์โหลด VirtualBox มาใช้งานแทน

• ดาวน์โหลด VirtualBox (ต้องใช้เวอร์ชัน 5.2 ขึ้นไป)

คนใช้ Windows 8.1 หรือใหม่ก็กว่าสามารถใช้ VirtualBox ได้เช่นกัน  แต่จำเป็นต้องปิดการใช้งาน Hyper-V ก่อน  และอาจจะต้องไปเปิดใช้งานฟีเจอร์ Intel VT-x ด้วย

• วิธีปิด Hyper-V และเปิดใช้ Intel VT-x

เมื่อได้ Virtual Machine เรียบร้อยแล้ว  ก็ไปดาวน์โหลด Vagrant มาติดตั้งได้ทันที

• ดาวน์โหลด Vagrant (ต้องใช้เวอร์ชัน 2.1.4 ขึ้นไป)

หลังจากติดตั้ง Vagrant เรียบร้อย  ก็ต้องติดตั้งปลั๊กอินเพิ่มอีกสองตัว

• vagrant-vbguest ในกรณีที่ใช้ VirtualBox เป็น Guest โดยมันจะช่วยซิงก์ Guest Additional Modules ระหว่าง Guest และ Host ให้
• vagrant-hostsupdater สำหรับแก้ไขไฟล์ hosts ให้อัตโนมัติ

วิธีติดตั้งคือให้เปิด Command Prompt หรือ Terminal ขึ้นมา (บนวินโดวส์อาจจะต้อง Run as Administrator) แล้วพิมพ์คำสั่งนี้

vagrant plugin install vagrant-vbguest vagrant-hostsupdater

จากนั้น Restart เครื่องรอบหนึ่ง  ก็เป็นอันพร้อมใช้

ติดตั้ง VVV

มาถึงขึ้นตอนติดตั้ง VVV กัน  เพื่อความง่าย  เราจะติดตั้งมันเอาไว้ที่ C:\vvv สำหรับวินโดวส์  หรือ ~/vvv สำหรับแมคหรือลินิกซ์  ดังนั้นให้เปิด cmd/terminal ขึ้นมา  แล้วสั่ง cd C:\ สำหรับวินโดวส์หรือ cd ~ สำหรับแมคและลินิกซ์  จากนั้นพิมพ์ mkdir vvv และตามด้วย cd vvv

สำหรับผู้ใช้ Git ให้สั่งโคลนโปรเจ็กท์ VVV ลงมาที่โฟลเดอร์นี้ได้ทันที

git clone -b master git://github.com/Varying-Vagrant-Vagrants/VVV.git .

หรือถ้าใครยังไม่มี Git (ควรหาลงให้เรียบร้อย) ก็ไปดาวน์โหลดไฟล์ Zip มาแตกลงในโฟลเดอร์นี้ได้เช่นกัน

• ดาวน์โหลด VVV

ถึงตอนนี้ VVV ก็ได้มานอนกองอยู่ในเครื่องเราเป็นที่เรียบร้อย  ให้เราทำการคัดลอกไฟล์ vvv-config.yml มาไว้ที่เดียวกัน  แล้วเปลี่ยนชื่อไฟล์เป็น vvv-custom.yml (ถ้าเราแก้คอนฟิกใน vvv-config.yml มันจะหายไปทุกครั้งที่เราอัพเดท VVV เวอร์ชันใหม่)

ตั้งค่า VVV

ก่อนอื่นเราต้องเตรียมโฟลเดอร์เก็บเว็บของเราให้พร้อมก่อน  โดยสร้างโฟลเดอร์ขึ้นมาโฟลเดอร์หนึ่ง  เช่นผมสร้าง C:\myweb ขึ้นมา จากนั้นเปิดโฟลเดอร์นี้เข้าไป  แล้วสร้างโฟลเดอร์ขึ้นมาอีก 2 โฟลเดอร์คือ provision และ public_html  จากนั้นในโฟลเดอร์ provision ให้สร้างไฟล์เปล่าๆ ขึ้นมา 2 ไฟล์คือ vvv-init.sh และ vvv-nginx.conf

ดังนั้นในโฟลเดอร์ C:\myweb จะมีโฟลเดอร์ย่อยลักษณะนี้

myweb
 ⌞ provision
    ⌞ vvv-init.sh
    ⌞ vvv-nginx.conf
 ⌞ public_html

ในโฟลเดอร์ provision นั้นจะเป็นการเก็บการตั้งค่าที่จะให้ vvv จัดการตั้งค่าต่างๆ เอาไว้  ส่วนไฟล์เว็บของเราจริงๆ จะอยู่ในโฟลเดอร์ public_html

สำหรับไฟล์ต่างๆ ใน provision นั้นจะมีการตั้งค่าตามนี้

vvv-init.sh

เป็น shell script สำหรับรันในระหว่างที่ init ตัว vvv ขึ้นมา  ไฟล์นี้ผู้ใช้จะสามารถเขียน shell script เพื่อทำอะไรก็ได้ (เช่นใช้ composer install หรือ git clone ต่างๆ นาๆ) ทั้งนี้โดยปกติไฟล์นี้จะเริ่มต้นด้วยการสั่งเพิ่มโฮสต์เนมลงไฟล์ hosts ใน VM รวมถึงสร้างฐานข้อมูล  และกำหนดไฟล์ error log ดังนี้

#!/usr/bin/env bash

DOMAIN=`get_primary_host "${VVV_SITE_NAME}".test`
DOMAINS=`get_hosts "${DOMAIN}"`
SITE_TITLE=`get_config_value 'site_title' "${DOMAIN}"`
WP_VERSION=`get_config_value 'wp_version' 'latest'`
WP_TYPE=`get_config_value 'wp_type' "single"`
DB_NAME=`get_config_value 'db_name' "${VVV_SITE_NAME}"`
DB_NAME=${DB_NAME//[\\\/\.\<\>\:\"\'\|\?\!\*-]/}

# Make a database, if we don't already have one
echo -e "\nCreating database '${DB_NAME}' (if it's not already there)"
mysql -u root --password=root -e "CREATE DATABASE IF NOT EXISTS ${DB_NAME}"
mysql -u root --password=root -e "GRANT ALL PRIVILEGES ON ${DB_NAME}.* TO [email protected] IDENTIFIED BY 'wp';"
echo -e "\n DB operations done.\n\n"

# Nginx Logs
mkdir -p ${VVV_PATH_TO_SITE}/log
touch ${VVV_PATH_TO_SITE}/log/error.log
touch ${VVV_PATH_TO_SITE}/log/access.log

หากต้องการเขียน shell script เพื่อทำงานอื่นใดๆ สามารถเขียนต่อท้ายลงไปได้ทันที

vvv-nginx.conf

และสุดท้ายคือไฟล์คอนฟิกของ nginx หลักๆ แล้วมันคือกำหนดว่า document root อยู่ที่ไหน  เก็บ log ที่ไหน  ใช้งาน port อะไร  ซึ่งรวมๆ แล้วจะไม่มีการเปลี่ยนแปลงจากนี้เท่าไหร่นัก  ทั้งนี้อย่าลืมเปลี่ยน server_name ให้ตรงกับโฮสต์เนมที่เราจะใช้งานด้วย (ในที่นี้คือ myweb.test)

server {
  listen 80;
  listen 443 ssl;
  server_name {vvv_hosts};
  root {vvv_path_to_site}/public_html;

  error_log {vvv_path_to_site}/log/error.log; # nginx error log
  access_log {vvv_path_to_site}/log/access.log; # nginx access log

  set $upstream {upstream}; # which PHP to use

  include /etc/nginx/nginx-wp-common.conf; # Makes WP paths and rewrite rules work
}

หลังจากแก้ไขไฟล์ provision ทั้งสามไฟล์เสร็จ  ให้กลับมาที่ C:\vvv แล้วเปิดไฟล์ vvv-custom.yml ขึ้นมาครับ  เราจะเจอโค้ดส่วน site: อยู่ดังนี้

sites:
  # The wordpress-default configuration provides a default installation of the
  # latest version of WordPress.
  wordpress-default:
    repo: https://github.com/Varying-Vagrant-Vagrants/vvv-wordpress-default.git
    hosts:
      - local.wordpress.test

  # The wordpress-develop configuration is useful for contributing to WordPress.
  wordpress-develop:
    repo: https://github.com/Varying-Vagrant-Vagrants/vvv-wordpress-develop.git
    hosts:
      - src.wordpress-develop.test
      - build.wordpress-develop.test

ในส่วนนี้จะเป็นตัวกำหนดว่า vvv จะรันเว็บไซต์ไหนบ้าง  เราสามารถเพิ่มเว็บของเราเข้าไปในส่วนนี้ได้เลย  ในขั้นต้น vvv จะกำหนดมาให้สองเว็บคือ wordpress-default และ wordpress-develop (เอาจริงๆ เราลบโค้ดส่วนนี้ทิ้งไปได้เลย)

การที่จะเพิ่มการตั้งค่าใดๆ เข้ามานั้นให้ระวังอยู่อย่างหนึ่งนั่นคือการเว้น tab เพราะโดยธรรมชาติแล้ว YAML เป็นภาษาที่จัดบล็อคข้อมูลด้วยการย่อหน้า  ดังนั้นหากย่อหน้าผิด  ก็จะประมวลผลผิดได้  ซึ่งก็แก้ได้ง่ายๆ ด้วยการเขียนปีกกาครอบเอาแบบเดียวกับการเขียน JSON ได้เลย

วิธีเพิ่มเว็บไซต์คือให้เราไปที่บล็อค sites: แล้วเพิ่มการตั้งค่าของเว็บเราลงไป

sites:
  myweb:
    vm_dir: /srv/www/myweb
    local_dir: C:\myweb
    hosts:
      - myweb.test

ใน myweb ที่เราเพิ่มเข้าไปจะมีการเรียกใช้งานค่าต่างๆ อยู่ 3 ค่าดังนี้

• vm_dir โฟลเดอร์ใน VM
• local_dir โฟลเดอร์ในเครื่องเราที่จะแมพเข้าใน VM
• hosts ชื่อโฮสต์เนมที่จะใช้

การแมพพาธนั้นเป็นเหมือนกับการซิงก์ข้อมูลในโฟลเดอร์บนเครื่องของเรากับใน VM เพื่อให้เราสามารถแก้ไขไฟล์ต่างๆ บนเครื่องเราได้ตามปกติ  และไฟล์ที่เราแก้ไขนั้นก็จะไปอยู่ใน VM ด้วยเช่นกัน (นึกภาพว่ามันคล้ายๆ กับเราลง Dropbox ไว้บนเครื่องเราและใน VM ด้วย  ไฟล์ทั้งสองที่จะเหมือนกัน)

ดังนั้นโดยปกติแล้ว  เราเปลี่ยนชื่อโฟลเดอร์หลัง www ใน vm_dir ให้ตรงกับชื่อเว็บ  และเปลี่ยนที่อยู่โฟลเดอร์ใน local_dir ให้ตรงกับโฟลเดอร์เว็บของเรา (โฟลเดอร์ที่เก็บ provision และ public_html) เท่านี้ก็เรียบร้อย

สั่งเริ่มต้นการทำงาน!

ตั้งค่ามาอย่างยาวนาน  ก็ถึงเวลาเริ่มใช้งานกันสักที  ให้เราเปิด Terminal หรือ Command Prompt กลับขึ้นมาแล้วเข้าไปยังโฟลเดอร์ที่เก็บ vvv เอาไว้ (C:\vvv หรือ ~/vvv) จากนั้นสั่ง vagrant up เพื่อเริ่มการทำงาน

การใช้งานครั้งแรกนั้นจะเสียเวลา init ค่อนข้างนาน (จนถึงนานมาก) เพราะ Vagrant จะไปดาวน์โหลดอิมเมจและซอฟต์แวร์ที่จำเป็นต่างๆ เข้ามาและทำการติดตั้งให้

คำสั่ง vagrant อื่นๆ ที่ควรรู้มีดังนี้

• vagrant halt สำหรับหยุดการทำงาน
• vagrant up --provision สำหรับเปิด vagrant ขึ้นมาใหม่หลังจากมีการแก้ไขค่าใน provision
• vagrant reload --provision สั่ง restart vagrant พร้อมดึงค่าจาก provision มาใหม่
• vagrant destroy หยุดและลบ Vagrant นั้นๆ ทิ้ง (ไฟล์งานยังอยู่)
• vagrant ssh เชื่อมต่อ ssh เข้าไปยัง vagrant

คำสั่งทั้งหมดนี้จะต้องสั่งในโฟลเดอร์ที่เก็บไฟล์ vvv อยู่เท่านั้น

เขียนโค้ดอย่างไร?

หลังจากผ่านความมึนงงทั้งหมดทั้งมวลมาได้  ก็ถึงเวลาของคำถามสำคัญนั่นคือเราจะเก็บโค้ดอะไรต่างๆ เอาไว้ตรงไหน?

ตามการทำงานปกติ  เราสามารถเก็บโค้ดของเราไว้ใน myweb/public_html ได้เลยครับ  และถ้าใครใช้ซอฟต์แวร์อื่นๆ เช่น gulp/grunt/npm/composer แต่ไม่ได้ติดตั้งเอาไว้บนเครื่อง  ก็สั่ง vagrant ssh เข้าไปแล้วใช้คำสั่งเหล่านี้จากภายใน vagrant ได้ทันที (มักจะมีประโยชน์ตอนที่แพ็คเกจเหล่านี้บนเครื่องของเราตีกันอีรุงตุงนังจนเกิด error เต็มไปหมดด้วย)

ในส่วนของ error log ต่างๆ (หากมี) จะถูกเก็บเอาไว้ในโฟลเดอร์ myweb/logs

สำหรับคนที่ใช้ git นั้นก็สามารถเลือกได้ตามสะดวกว่าจะเก็บเฉพาะไฟล์ใน public_html หรือจะเก็บ myweb ทั้งหมด (จะเก็บรวมถึงการตั้งค่า provision ด้วย) ส่วน username และ password ของ MySQL (MariaDB) นั้นคือ wp และ wp

ถึงตรงนี้เราจะสามารถเข้าถึงเว็บไซต์ใน VVV ได้ผ่านโฮสต์เนมที่เราตั้งเอาไว้ (https://myweb.test) และหากต้องการดูอีเมลที่ส่งออกทั้งหมด ก็สามารถเข้าถึง MailHog ได้ผ่านพอร์ต 8025 เช่น https://myweb.test:8025

นอกจากการทำ WordPress แล้ว VVV ยังคงสามารถนำไปใช้พัฒนาโปรเจ็กท์ PHP อื่นๆ ได้ด้วยเช่นกัน

ใน VVV 2.5.1 จะรองรับการใช้งาน SSL ในตัว สามารถเข้าเว็บผ่าน https ได้เลย ส่วนถ้าใครยังใช้ VVV เวอร์ชันเก่าเช่น VVV 2.1.0 สามารถเข้าไปดูการตั้งค่า SSL ได้ในโพสต์นี้

• ตั้งค่า SSL สำหรับเว็บที่รันอยู่บน VVV