Local Web Servers

06 Oct 2016

บางครั้งเราต้องการสร้าง static web content แต่ต้องการเรียกใช้ผ่าน browser เหมือนเรียกมาจาก web server ไม่ใช่เรียกจากการ double click ที่ไฟล์ html ที่ต้องการ ในหัวข้อนี้เราจะแนะนำการติดตั้งและใช้งาน Web Server แบบง่าย ๆ เพื่อให้เรียก web page บนเครื่องตัวเองมาใช้งานได้เสมือนเรียกมาจาก web server

ที่มา

บางครั้งการที่เราเรียก web page ที่เราเขียนเป็นไฟล์อยู่ในเครื่องของเราด้วยการ double click จะติดข้อจำกัดของ web browser ในการทำงานหลายอย่าง เช่น เรื่อง security ของ network, การเรียกใช้ plug ins หรือการใช้งาน Active X เป็นต้น นั่นเป็นเพราะว่าบน web browser จะเห็นว่าเรากำลังทำงานกับ file protocol (file://mypage.html บน address bar) เพื่อหลีกเลี่ยงข้อจำกัดดังกล่าว บางครั้งเราต้องการให้ browser เรียก web ดังกล่าวขึ้นมาผ่าน protocol http ซึ่งเป็น protocol สำหรับ web server

แนวทาง

นั่นหมายความว่าเราต้องติดตั้งโปรแกรมที่จำลองการทำงานของ web server ไว้บนเครื่องของเรา ซึ่งก็มีหลายตัวหรือหลายวิธีที่ทำได้ เช่น

ใช้ IIS บนเครื่องที่เป็น Windows
ใช้ IIS Express ที่ตัวเล็กลงมาหน่อย
ใช้โปรแกรมจำพวก static web server

แต่ที่เราจะแนะนำในหัวข้อนี้จะเป็นแบบสุดท้ายคือเป็น static web server เพราะเป็นแบบที่ง่ายที่สุดทั้งการเรียกใช้งานและการติดตั้ง

ต้องการอะไรบ้าง

ในการติดตั้งต้องใช้ npm (Node Package Manager) ซึ่งมักจะติดตั้งมาพร้อมกับ Node.js หมายความว่าเราต้องติดตั้ง Node.js ก่อนนั่นเอง ถ้ายังไม่เคยติดตั้ง Node.js มาก่อน สามารถ download ได้ที่

https://nodejs.org

แต่ไม่ต้องกลัวว่าจะต้องเขียนโปรแกรมบน Node.js นะครับ เราแค่ใช้ npm ในการติดตั้งโปรแกรมที่ต้องการลงเครื่องเท่านั้นเอง ถ้าไม่แน่ใจว่ามีการติดตั้ง npm อยู่ในเครื่องแล้วหรือยัง สามารถทดลองพิมพ์คำสั่งต่อไปนี้ผ่าน command prompt ดูก่อนก็ได้

npm --version

หากเครื่องตอบมาเป็นเลขสั้น ๆ ที่มีจุดคั่นตรงกลาง เช่น 2.15.5 ถือว่าใช้ได้ แม้ตัวเลขจะไม่ตรงกับของผมก็ตาม

เข้าใจตรงกันก่อน

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

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

harp

ตัวแรกมาจาก https://harpjs.com/ หรือเรียกว่า harp ตัวนี้ปกติจะ run ที่ port 9000 และมีความสามารถแสดงผล Content พวก Markdown, Jade, Sass หรือ Less อะไรพวกนี้ได้ด้วยนะ ลองมาติดตั้งกันเลยดีกว่า

ติดตั้ง harp

วิธีติดตั้งนั้นง่ายมาก แค่ต่อ internet แล้วทำตามขั้นตอนต่อไปนี้

เปิด command prompt ขึ้นมา
พิมพ์คำสั่งต่อไปนี้ (อย่าลืมกด enter หลังพิมพ์เสร็จแล้วด้วยน้า)
```
 npm install -g harp
```
เครื่องจะ download โปรแกรมมาติดตั้งให้โดยอัตโนมัติ ในระหว่างนั้นอาจจะมีข้อความขึ้นมายาว ๆ ไม่ต้องตกใจ
รอจนเครื่องกลับมาแสดง prompt อีกครั้ง ถือว่าติดตั้งเรียบร้อย

เรียกใช้งาน harp

การเรียกใช้งานก็มีวิธีง่าย ๆ ดังนี้

เปิด command prompt โดยเข้าไปที่ folder ที่มี web content ที่เราต้องการเรียกใช้งานบน browser
พิมพ์คำสั่งต่อไปนี้ (อย่าลืมกด enter นะ)
```
 harp server
```
เครื่องจะแสดงข้อความประมาณนี้ แสดงว่าพร้อมให้บริการแล้ว
```
 ------------
 Harp v0.20.3 – Chloi Inc. 2012–2015
 Your server is listening at http://localhost:9000/
 Press Ctl+C to stop the server
 ------------
```
ลองเปิด web browser แล้วพิมพ์ http://localhost:9000/ เข้าไปบน address bar หน้า web จะแสดงออกมา
ถ้าไม่แสดงหน้าที่เราต้องการอาจจะต้องพิมพ์ชื่อไฟล์ต่อท้ายไปด้วย เช่น เราต้องการแสดงหน้า page2.html ก็อาจจะพิมพ์ว่า http://localhost:9000/page2 หรือ http://localhost:9000/page2.html เป็นต้น
เมื่อเลิกใช้งานให้กด Ctrl+C แล้วตอบ Y (enter) เครื่องจะกลับมาแสดง command prompt เหมือนเดิม เป็นอันเสร็จกิจ

http-server

ตัวนี้รองรับ SSL ด้วยนะ web ของเขาอยู่ที่ https://github.com/indexzero/http-server

ติดตั้ง http-server

วิธีติดตั้งนั้นง่ายมาก แค่ต่อ internet แล้วทำตามขั้นตอนต่อไปนี้

เปิด command prompt ขึ้นมา
พิมพ์คำสั่งต่อไปนี้ (อย่าลืมกด enter หลังพิมพ์เสร็จแล้วด้วยน้า)
```
 npm install -g http-server
```
เครื่องจะ download โปรแกรมมาติดตั้งให้โดยอัตโนมัติ ในระหว่างนั้นอาจจะมีข้อความขึ้นมายาว ๆ ไม่ต้องตกใจ
รอจนเครื่องกลับมาแสดง prompt อีกครั้ง ถือว่าติดตั้งเรียบร้อย

เรียกใช้งาน http-server

การเรียกใช้งานก็มีวิธีง่าย ๆ ดังนี้

เปิด command prompt โดยเข้าไปที่ folder ที่มี web content ที่เราต้องการเรียกใช้งานบน browser
พิมพ์คำสั่งต่อไปนี้ (อย่าลืมกด enter นะ)
```
 http-server
```
เครื่องจะแสดงข้อความประมาณนี้ แสดงว่าพร้อมให้บริการแล้ว
```
 Starting up http-server, serving ./  
 Available on:  
     http://192.168.3.4:8080  
     http://127.0.0.1:8080  
 Hit CTRL-C to stop the server
```
ลองเปิด web browser แล้วพิมพ์ http://localhost:8080/ เข้าไปบน address bar หน้า web จะแสดงออกมา
ถ้าไม่แสดงหน้าที่เราต้องการอาจจะต้องพิมพ์ชื่อไฟล์ต่อท้ายไปด้วย เช่น เราต้องการแสดงหน้า page2.html ก็อาจจะพิมพ์ว่า http://localhost:8080/page2 หรือ http://localhost:8080/page2.html เป็นต้น
เมื่อเลิกใช้งานให้กด Ctrl+C เครื่องจะกลับมาแสดง command prompt เหมือนเดิม เป็นอันเสร็จกิจ

ส่งท้าย

คงแนะนำเบื้องต้นว่ามีอะไรที่ใช้เป็น static web server บนเครื่องเราได้บ้าง จะเห็นว่าใช้งานไม่ยากเลย แต่ทั้ง 2 ตัวยังมีความสามารถอีกเยอะ ถ้าสนใจก็ศึกษาต่อได้ที่ web ของเขาเลยนะครับ

harp: https://harpjs.com/
http-server: https://github.com/indexzero/http-server

Teerachai Laothong