มาสร้าง Local Development สำหรับ Magento2 กันเถอะ

ว่าด้วยเรื่องของนักพัฒนาที่อยาก Dev เจ้า Magento2 ให้ได้อย่างชิวๆ ที่เครื่องคอมของตนเอง

กล่าวโดยสรุป

  • เปรียบเทียบรูปแบบของ Magento ซึ่งเลือกการติดตั้งแบบของ MGT
  • วิธีการติดตั้ง Magento เพื่อใช้ในการทดสอบ หรือการพัฒนาในเครื่องตนเองแบบง่ายๆ
  • ตัวอย่างการติดตั้งส่วนเสริมที่เป็น Sample data และการทำงาน การ debug จะอยู่ในบทความต่อๆไป :>

ยาวไปไม่อ่าน ~ เกริ่นนำกันก่อนดีกว่า

หลังจากที่ได้เรียนรู้ Magento2 มาอยู่พักนึง ค้นพบว่า Magento2 ซึ่งเป็น Platform สำหรับ e-Commerce ที่มีชื่อเสียงตัวนึงนั้น มีความยากในการ Debug หรือพัฒนาพอสมควร บางครั้งเราต้องการ Debug เข้าไปในส่วนที่เป็น Core Framework เองก็ค่อนข้างยาก เพราะต้องคอยเขียน Logger เพื่อทำการพ่น Log และไปดูผล Log ตาม Path ที่ Magento2 ระบุ {magento_directory}/var/log… จึงเกิด Idea ว่า แล้วเราจะทำอย่างไรนักพัฒนาอย่างเราๆ สามารถเรียนรู้ ทำความเข้าใจ Code และเข้าไปพัฒนาต่อยอดได้ง่ายขึ้น ด้วยเหตุนี้เองผมจึงลองหาเทคนิคการทำ Local Development ที่น่าสนใจดังนี้

  1. MAMP, LAMP, XAMP และอีกมากมายที่อยากจะ setup เอง
  2. Vagrant สำหรับ Magento2 ซึ่งมีอยู่มากมายตาม GitHub
  3. Docker ค่ายอิสระ
  4. Magento2 DevBox จากทาง Official Magento เอง
  5. MGT Development Environment — Development Environment จาก Mgt-Commerce.com
  6. ฺฺBlah blah…

เนื่องจากเราเป็นประเภทสาย Geek และ Docker กำลังเป็น Trend ที่น่าสนใจ ที่นักพัฒนาควรจะต้องรู้ (กลายเป็น Fundamental for developer ไปซะแล้ว ^^) ในที่นี้ Choice ก็จะเหลือแค่ข้อ 3 และ 4 ซึ่งนั่นเอง

ประชันกันระหว่าง Magento2 DevBox และ Mgt Development Environment

โจทย์คือ ด้วยสุดยอด Laptop ที่ผมมี Mac Air 2015, RAM 8 GBs พบว่าการ Run docker จาก Magento2 DevBox เองกินทรัพยากรเครื่องที่มากกว่าของ Mgt ในบทความนี้จึงจะยกเอาขั้นตอนการสร้าง Local development โดยใช้ MGT (หวังว่าในอนาคต DevBox ของ Magento เองก็น่าจะดีขึ้นเช่นกัน)


มาเริ่มติดตั้ง MGT Development Environment กัน

STEP 1: ติดตั้ง Docker

เริ่มจากการ Pull Image ตาม command ด้านล่าง

docker pull mgtcommerce/mgt-development-environment-7.0

จากนั้นทำการ Run Image ด้วย command ด้านล่าง

docker run -d --net=bridge --restart=always --privileged -h mgt-dev-70 --name mgt-dev-70 -it -p 80:80 -p 443:443 -p 22:22 -p 3306:3306 -p 3333:3333 mgtcommerce/mgt-development-environment-7.0

* รายละเอียดเชิงลึกของ Docker ไม่ขอกล่าวถึงในบทความนี้นะครับ แต่เบื้องต้นเราจะปล่อย run command Docker แบบนี้ไว้ก่อนนะครับ สำหรับการปรับแต่งต่างๆในรายละเอียด ถ้ามีโอกาสจะกล่าวต่อไปครับ

หลังจาก Run Docker ขึ้นแล้วให้ไปที่เบราว์เซอร์ จากนั้นพิมพ์ URL 127.0.0.1:3333 ก็จะปรากฎหน้า Web Portal ของทาง MGT ซึ่งต่อไปนี้ผมจะเรียกว่า “CoudPanel” พิจารณาตัวอย่างดังรูป

STEP2: ติดตั้ง Host และ DNS ใน MGT

เริ่มกันที่สร้าง Domain ทดสอบขึ้นมาในที่นี้จะใช้ชื่อว่า “magento2.dev” และเลือก vHost เป็น Magento2 ดังรูปด้านล่าง จากนั้นกด “CREATE DOMAIN”

ตัวอย่างการกำหนดค่าเพื่อสร้าง Local Development สำหรับ Magento2
เสร็จสิ้นการสร้าง Local Development ตัวแรกที่ magento2.dev
เมื่อเรา Click ที่ Domains อีกครั้งจะเห็นรายละเอียด Host ที่ได้ทำการ setup ขึ้นมา

หลังจากที่สร้าง Domain ทดสอบที่ชื่อว่า magento.dev ขึ้นมาแล้วลำดับต่อไปเราจะทำการ map host ให้ 127.0.0.1 ชี้ไปที่ magento2.dev โดยใน OSX ให้เพิ่มคำสั่งที่ไฟล์ /etc/hosts ตามรายละเอียดดังนี้

## Local Magento by mgt-commerce.com ##
127.0.0.1 magento2.dev

ณ จุดนี้ให้ลองเข้า magento2.dev ผ่านทาง browser จะปรากฎรายละเอียด 403 ดังรูป ก็ไม่ต้องแปลกใจไปครับ เพราะ Nginx ชี้ไปที่ resource ใน host เราแล้ว แต่เรายังไม่ได้ลง Magento นั่นเอง :)

Web server Nginx พร้อมแล้ว แต่ยังไม่มี Magento resources เลยติด 403

STEP3: ติดตั้ง Magento2

ด้วยความสามารถของชุด Local development ของ MGT ซึ่งทำงานเป็น Docker และมีการติดตั้งการ SSH เข้าหา Docker แล้ว STEP นี้เราจะทำการเข้าไปยังภายใน Environment (เข้าสู้ Inception รอบที่ 1 ) และทำการติดตั้ง Magento กันข้างในนั้นกันครับ

เข้าหน้า Terminal

ssh root@127.0.0.1

จากนั้นระบุ password โดย default จะถูกตั้งมาเป็น “root”

หลังจากเข้ามาแล้วให้ทำการลง Magento ผ่านรูปแบบ Composer ดังคำสั่งด้านล่าง

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition <installation directory name>

Remark: Path ใน mgt CloudPanel คือ Domains ที่สร้างรอไว้ magento2.dev นั่นเอง ในที่นี้เราจะระบุ path เป็น “/cloudpanel/htdocs/magento2.dev” ซึ่งจะได้ คำสั่งที่ใช้ Run ดังนี้

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition cloudpanel/htdocs/magento2.dev

จากนั้นหน้าจอจะถามหา Username/Password ให้ไปที่ “repo.magento.com” และทำการสร้าง Key ก่อนดังตัวอย่างดังรูป โดยเราจะนำ Public Key มาเป็น Username และ Private Key มาเป็น Password

มีการถาม Key เพื่อการ Install จากทาง Repository ของ Magento2

เข้าที่หน้า My Account หลังจากลงทะเบียน และเลือก “My Access Keys”

เลือกสร้าง Key ที่ Tab “Magento2” โดยการกด “Create A New Access Key” จากนั้นทำการตั้งชื่อ Key ในบทความนี้จะใช้ชื่อว่า “magento2.dev” นั่นเอง

ตัวอย่างนี้จะตั้งชื่อ Key ว่า “magento2.dev” และนำค่า Public / Private Key มาใช้ในการติดตั้ง Magento

ในตัวอย่างนี้จะมีถามว่าต้องการเก็บ Key ไว้ตาม Path ไหม แล้วแต่ท่านผู้อ่านเลยครับผม :)

เนื่องด้วยความเยอะของ Dependency ของ Magento2 ตัว Composer ที่เป็น Dependency Management ตัว Composer ก็ไล่โหลด Package จาก Repository มาเรื่อยๆ (ปาไปเกือบ 20 นาที) และในที่สุดก็เรียบร้อย … ดังรูป

รอกันยาวๆ
20 นาทีสำหรับ Composer -_-

ทดสอบ reload page http://magento2.dev กัน… มาแล้ว! (มาสักที)

เข้าสู่กระบวนการ setup ได้เลย Next กันรัวๆ เพราะ image ที่เราใช้ถูกเตรียมมาเพื่อ support การติดตั้ง Magento2 โดยตรงอยู่แล้ว (สุดยอด)

STEP ที่ 2: Magento2 จะถามถึง Database ที่ต้องการเชื่อมต่อ ให้เราไปสร้างที่ CloudPanel กัน โดยจะใช้ชื่อ Database ว่า “magento2” ดังรูป

ถ้าเรา click ที่ Icon รูป Database ทางด้านขวามือ (ถัดจาก “X” มันพาเราไปที่ phpmyadmin ด้วยนะ!)

เราระบุชื่อ database ว่า “magento2” ส่วน Database Server Password ก็คือ “root” นั่นเอง

STEP3: Set ค่าตามนี้โดยในที่นี้ เราจะเลือกได้ว่า

  • URL หน้า Front (http://magento2.dev)
  • URL หน้า Admin (http://magento2.dev/admin)
  • session ให้เก็บในรูปแบบไฟล์ หรือ db
  • เลือกใช้ HTTPS ที่ Front และ Admin
  • ให้ Apache rewrite หรือไม่
  • Magento encryption key ของเราเอง หรือที่ Magento สร้างให้

ถัดมาเลือก Time Zone ค่าเงิน และภาษาหลัก พร้อม plugin

SETUP account สำหรับ Admin ให้เรียบร้อย

และในที่สุดก็ได้ Install จริงๆเสียที

และแล้วก็เรียบร้อย …

เก็บรักษาข้อมูลกันให้ดีๆนะครับ :)

เป็นอันเสร็จสิ้น มาดูผลลัพธ์การลง Magento กันดีกว่า ที่หน้า admin ก็มาแล้วตาม Path ที่ระบุเลย ในบทความนี้คือ http://magento2.dev/admin

ส่วนหน้า Store ก็จะมาพร้อมกับ Theme default ของ Magento2 ที่ชื่อว่า “Luma” ดังรูป

เราจะสังเกตว่าจะได้หน้า Magento Store ที่เป็นว่างๆ ยังไม่มีสินค้า หรือข้อมูลตัวอย่างที่เรียกว่า “Sample Data” ใดๆ ผมจะอธิบายต่อในบทความต่อไปครับ


สำหรับบทความนี้ก็ขอจบลงเพียงเท่านี้ครับ พบกันใหม่ในบทความต่อไปครับ :)