MAMP ตั้งค่า Virtual Hosts
Tags: mamp, virtualhosts, php, ไทย
Published: 2019-11-17 06:20:39

---
title: MAMP ตั้งค่า Virtual Hosts
published: true
description: หลังจากติดตั้งเซิร์ฟเวอร์เพื่อทำงานในเครื่องของเราเอง ขั้นตอนต่อไปก็คือ การตั้งค่า Virtual Hosts
tags: mamp, virtual hosts, php, ไทย
cover_image: https://thepracticaldev.s3.amazonaws.com/i/v4xmkafmu77d8sj72kp6.jpg
---

ผมหาบทความการตั้งค่า Virtual Hosts ในภาษาไทยได้ยากเหลือเกินเมื่อตอนเริ่มทดลองใช้งาน แต่ในส่วนบทความภาษาอังกฤษก็พอมีอยู่บ้าง และหลังจากที่ได้ทดลองกับตัวเองเป็นที่เรียบร้อยแล้วก็เลยอยากเอามาแชร์ให้เพื่อนๆที่กำลังหาวิธีติดตั้ง Virtual Hosts ได้ใช้เป็นบทความอ้างอิงเอาไว้ใช้ในยามจำเป็น

## MAMP คือ

**MAMP** คือโปรแกรมที่ใช้ในการจำลอง Web Server บนเครื่องคอมพิวเตอร์ของเรา ซึ่งเราสามารถเลือกได้ว่าจะใช้ PHP version ไหน หรือจะเลือก Web Server เป็น Apache หรือ Nginx และ MySQL ซึ่งมี Interface ที่ใช้งานได้ง่ายมากๆ ดูเพิ่มเติมที่ [MAMP](https://www.mamp.info/en/)

## Virtual Hosts คือ

**Virtual Hosts** คือการจำลอง host เพื่อให้รันได้กับหลายๆเว็บ เพราะโดยปกติ Web server จะใช้ได้กับ เว็บเดียวต่อ server แต่ถ้าทำ Virtual Hosts ก็จะสามารถใช้งานแยกได้หลายๆ เว็บด้วยการทำงานจาก web server ตัวเดียวกัน

---

บทความนี้จะไม่ขอพูดถึงเรื่องการคิดตั้ง MAMP นะครับ เพราะมันง่ายมากๆ เพียงแค่เพื่อนๆ ดาวน์โหลดมาติดตั้งและดับเบิ้ลคลิก ไอคอนขึ้นมาเราก็สามารถใช้งานได้แล้วครับ เราจะมาพูดเรื่องที่มันน่าสนใจมากกว่านั้น นั่นคือการตั้งค่า Virtual Hosts

## อนุญาตให้สามารถใช้งาน Virtual Hosts

#### Mac

เปิดไฟล์ `Applications > MAMP > conf > apache > httpd.conf` จากนั้นลองหาบรรทัดที่เหมือนกับโค้ดด้านล่าง

```bash
# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
```

เมื่อเจอแล้วก็ให้ทำการ uncomment ดังเช่นโค้ดตัวอย่างด้านล่าง

```bash
# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
```

## อนุญาต SymLink Override

เปิด `httpd.conf` ไฟล์และมองหา

```bash
<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>
```

จากนั้นให้ทำการเปลี่ยน **None** เป็น **All**

```bash
<Directory />
  Options Indexes FollowSymLinks
  AllowOverride All
</Directory>
```

##เพิ่มโปรเจคที่ต้องการทำ Virtual host

ปรกติที่อยู่ของโปรเจคที่เราต้องการเพิ่มจะอยู่ใน `Applications > MAMP > htdocs` ซึ่งถือเป็นค่าเร่ิมต้น แต่เมื่อเราต้องการเพิ่มโปรเจคที่เก็บไว้ในโฟลเดอร์อื่น เราก็สามารถที่จะทำได้เช่นเดียวกัน

เรามาลองเพิ่มกันเลย เริ่มจากเปิดไฟล์ `extra/httpd-vhosts.conf` จากนั้นเราก็ทำการเพิ่มโค้ดลงไปในบรรทัดสุดท้ายของไฟล์

```bash
<VirtualHost *:80>
  ServerName example.localhost
  DocumentRoot "/path/to/project_directory"
</VirtualHost>
```

> ให้เราทำการเปลี่ยน `DocumentRoot` ให้เป็นที่อยู่ของโปรเจคที่เราต้องการทำ virtual host ได้เลยครับ


อย่างเช่น โปรเจคของผมเก็บไว้ใน `/Users/uatthaphon/websites/myproject`

```bash
/Users/uatthaphon/websites/myproject
```

> จากนั้นก็ทำการ restart server ของ MAMP เพื่อทำให้เซิร์ฟเวอร์ รับรู้การแก้ไขที่เกิดขึ้น

### การตั้งชื่อโดเมนในเครื่องหรือใน local 

เปิดไฟล์ hosts ด้วย text editor ที่เราถนัดได้เลยครับ ของผมใช้ sublime ซึ่งได้ทำการสร้างทางลัด (symlink) เอาไว้แล้ว ถ้าใครสนใจการสร้าง symlink ของ sublime สำหรับเปิดจาก commandline ก็สามารถเข้าไปดูได้จาก [Sublime OS X Command Line](https://www.sublimetext.com/docs/3/osx_command_line.html)

```bash
subl /etc/hosts
```

จากนั้นผมก็จะทำการเพิ่มโดเมนที่ใช้ใน local ของตัวเองเข้าไปเหมือนในตัวอย่างด้านล่างนะครับ

![setup domain hosts](https://thepracticaldev.s3.amazonaws.com/i/a49zkn45wj2txw3p0xe5.png)

จะเห็นได้ว่าในบรรทัดที่สิบ ผมได้ทำการเพิ่ม domain ใหม่เข้าไป และทำให้เครื่องคอมพิวเตอร์ของผมจดจำชื่อโดเมนนี้เอาไว้ ซึ่งจะทำให้ผมสามารถเปิดมันได้จากหน้าเว็บเบราว์เซอร์จากเครื่องคอมของผมเอง

```bash
127.0.0.1     example.localhost
```

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

ต่อเลยนะครับ 

ต่อไปเราต้องทำการ Restart MAMP server อีกครั้งหนึ่ง เพื่อทำให้มันจดจำการอัปเดตของเราครับ หลังจาก Restart เรียบร้อยแล้วให้เราลองเปิด `example.localhost` ในหน้าเว็บเบราว์เซอร์ กันเลยครับ


![Browser](https://thepracticaldev.s3.amazonaws.com/i/f22r7q7r1tcc13huljpv.png)

> ผมสร้างไฟล์ `index.php` ซึ่งใส่ `echo "Hello world!!! Atthaphon is here!!!";` เอาไว้ในโฟลเดอร์ `/Users/uatthaphon/websites/myproject` ครับ

**เรียบร้อยแล้วครับ** จากนั้นถ้าหากว่าเราต้องการเพิ่มโปรเจคและโดเมนใหม่ก็ให้ทำตามขั้นตอนเดิมได้เลยนะครับ โดยการเพิ่มโปรจเจ็คอื่นๆ ต่อท้ายไฟล์ไปเรื่อยๆ ครับและถ้าหากต้องการเพิ่มโดเมนใหม่ก็ให้ไปเพิ่มที่ `hosts` ไฟล์ได้เลยครับ