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

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

Natthawat Boonchaiseree

Published in

Muze Innovation

5 min readMar 12, 2017

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

เปรียบเทียบรูปแบบของ 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 ที่น่าสนใจดังนี้

MAMP, LAMP, XAMP และอีกมากมายที่อยากจะ setup เอง
Vagrant สำหรับ Magento2 ซึ่งมีอยู่มากมายตาม GitHub
Docker ค่ายอิสระ
Magento2 DevBox จากทาง Official Magento เอง
MGT Development Environment — Development Environment จาก Mgt-Commerce.com
ฺฺ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 นาที) และในที่สุดก็เรียบร้อย … ดังรูป