การสร้างเซิร์ฟเวอร์ท้องถิ่นที่สามารถเข้าถึงได้จากที่อยู่สาธารณะ

ฉันได้รับการพัฒนาเว็บไซต์สำหรับส่วนที่ดีกว่า 10 ปีและหนึ่งในปัญหาที่ใหญ่ที่สุดของฉันคือการพัฒนาในท้องถิ่นและซิงค์เว็บไซต์ท้องถิ่นเพื่อการทดสอบอยู่เสมอ การใช้สภาพแวดล้อมแบบโลคัลนั้นยอดเยี่ยมเพราะมันรวดเร็ว แต่มันไม่สามารถมองเห็นได้จากระยะไกลและการถ่ายโอนบางแห่งหมายถึงการทำงานของฐานข้อมูลการเปลี่ยนชื่อตารางค่าและอื่น ๆ.

ในบทความนี้ฉันจะแสดงวิธีง่าย ๆ ให้คุณ เรียกใช้เซิร์ฟเวอร์ท้องถิ่น ซึ่งคุณสามารถ เข้าถึงจากโทรศัพท์ของคุณและอุปกรณ์มือถืออื่น ๆ หรือถ่ายทอดผ่านอินเทอร์เน็ตซึ่งหมายถึงการแบ่งปันงานของคุณกับลูกค้าโดยไม่ต้องทิ้ง localhost ที่ดี.

ใช้ Vagrant เพื่อสร้างสภาพแวดล้อมท้องถิ่น

เมื่อไม่นานมานี้ฉันเขียนบทความที่ Hongkiat เกี่ยวกับการใช้ Vagrant ดังนั้นฉันจะพูดถึงพื้นฐานที่นี่เท่านั้น สำหรับข้อมูลเพิ่มเติมลองดูที่บทความ!

ในการเริ่มต้นคุณจะต้องคว้าและติดตั้ง VirtualBox และ Vagrant ทั้งสองมีอิสระและใช้ในการสร้างเครื่องเสมือนซึ่งจะเรียกใช้เซิร์ฟเวอร์ของคุณ.

ตอนนี้สร้างโฟลเดอร์เพื่อเก็บเว็บไซต์ของคุณลองใช้ชื่อไดเรกทอรี “เว็บไซต์” ภายในไดเรกทอรีผู้ใช้หลักของเรา นั่นจะเป็น / ผู้ใช้ / [ชื่อผู้ใช้] / เว็บไซต์ บน OS X และ C: / ผู้ใช้ / [ชื่อผู้ใช้] / เว็บไซต์ บน Windows.

สร้างชื่อโฟลเดอร์ใหม่ WordPress. นี่คือที่ฉันจะสร้างเครื่องเสมือน แนวคิดก็คือแต่ละโฟลเดอร์ภายใน เว็บไซต์ บ้านเครื่องเสมือนแยก ในขณะที่คุณ สามารถ วางเว็บไซต์จำนวนมากบนเครื่องเสมือนเครื่องหนึ่งเท่าที่คุณต้องการฉันชอบจัดกลุ่มตามแพลตฟอร์ม - เช่น: WordPress, Laravel, Custom

สำหรับวัตถุประสงค์ของบทช่วยสอนนี้ฉันจะสร้างเว็บไซต์ WordPress.

ข้างใน WordPress โฟลเดอร์เราจะต้องสร้างไฟล์สองไฟล์, Vagrantfile และ install.sh. สิ่งเหล่านี้จะถูกใช้เพื่อตั้งค่าเครื่องเสมือนของเรา Jeffrey Way สร้างสองไฟล์เริ่มต้นที่ยอดเยี่ยม คุณสามารถคว้าไฟล์ Vagrantfile และ install.sh ของเขา.

จากนั้นใช้เทอร์มินัลนำทางไปที่ WordPress ไดเรกทอรีและประเภท ร่อนเร่ขึ้น. จะใช้เวลาสักครู่เนื่องจากต้องดาวน์โหลดกล่องและติดตั้งแล้ว คว้ากาแฟสักถ้วยแล้วลองอ่านโพสต์นี้ใน 50 เคล็ดลับ WordPress ในขณะที่คุณรอ.

เมื่อกระบวนการเสร็จสมบูรณ์คุณควรจะไป 192.168.33.21 และดูหน้าที่ให้บริการอย่างถูกต้อง โฟลเดอร์เนื้อหาของคุณควรเป็นโฟลเดอร์ html ภายในไดเรกทอรี WordPress ตอนนี้คุณสามารถเริ่มเพิ่มไฟล์ติดตั้ง WordPress หรืออะไรก็ได้ที่คุณต้องการ.

อย่าลืมอ่านคู่มือ Vagrant แบบเต็มสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสร้างโฮสต์เสมือนการจับคู่โดเมนเช่น mytest.dev และอื่น ๆ.

การเปิดไซต์ท้องถิ่นในเครือข่ายเดียวกันโดยใช้อึก

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

เป็นการดีที่คุณจะต้องเปิดเว็บไซต์ในพื้นที่ของคุณบนอุปกรณ์มือถือของคุณ ไม่ยากเกินไปหากอุปกรณ์ของคุณอยู่ในเครือข่ายเดียวกัน.

ในการทำสิ่งนี้เราจะใช้ Gulp และ Browsersync อึกเป็นเครื่องมือสำหรับการพัฒนาระบบอัตโนมัติ Browsersync เป็นเครื่องมือที่ยอดเยี่ยมที่ไม่เพียง แต่สามารถสร้างเซิร์ฟเวอร์ภายในเครื่องเท่านั้น แต่ยังรองรับการเลื่อนคลิกแบบฟอร์มและอุปกรณ์อื่น ๆ อีกมากมาย.

การติดตั้งอึก

การติดตั้งอึกนั้นง่ายมาก ตรงไปที่หน้าเริ่มต้นใช้งานสำหรับคำแนะนำ สิ่งที่ต้องมีก่อนคือ NPM (Node Package Manager) วิธีที่ง่ายที่สุดในการรับสิ่งนี้คือการติดตั้งโหนดเอง ตรงไปที่เว็บไซต์ Node เพื่อดูคำแนะนำ.

เมื่อคุณใช้ NPM ติดตั้ง - อึกโกลบอล คำสั่งเพื่อติดตั้งอึกทั่วโลกคุณจะต้องเพิ่มไปยังโครงการของคุณ วิธีการทำเช่นนี้คือการทำงาน npm ติดตั้ง - บันทึก-dev อึก ในโฟลเดอร์รูทของโครงการของคุณจากนั้นเพิ่ม gulpfile.js ไฟล์ที่นั่น.

ในตอนนี้เราจะเพิ่มโค้ดหนึ่งบรรทัดในไฟล์นั้นซึ่งบ่งบอกว่าเราจะใช้ Gulp เอง.

var gulp = ต้องการ ('gulp');

หากคุณสนใจในสิ่งดีๆทุกอย่างที่ Gulp สามารถทำได้เช่นการต่อสคริปต์รวบรวม Sass และ LESS ปรับภาพให้เหมาะสมและอื่น ๆ อ่าน Guide To Gulp ของเรา ในบทความนี้เราจะเน้นการสร้างเซิร์ฟเวอร์.

ใช้ Browsersync

Browsersync มีนามสกุล Gulp ซึ่งเราสามารถติดตั้งได้ในสองขั้นตอน อันดับแรกให้ใช้ npm เพื่อดาวน์โหลดจากนั้นเราเพิ่มลงใน Gulpfile ของเรา.

ออกตัว npm ติดตั้ง gulp - browser-dev คำสั่งในโครงการรากใน terminal; นี่จะดาวน์โหลดส่วนขยาย จากนั้นเปิด Gulpfile และเพิ่มบรรทัดต่อไปนี้:

var browserSync = ต้องการ ('browser-sync'). create ();

สิ่งนี้ทำให้ Gulp รู้ว่าเราจะใช้ Browsersync ต่อไปเราจะกำหนดงานที่ควบคุมวิธีการทำงานของ Browsersync.

gulp.task ('browser-sync', function () browserSync.init (proxy: "192.168.33.21")););

เมื่อเพิ่มแล้วคุณสามารถพิมพ์ อึกเบราว์เซอร์ - ซิงค์ เข้าสู่เทอร์มินัลเพื่อเริ่มเซิร์ฟเวอร์ คุณควรเห็นบางอย่างเช่นภาพด้านล่าง.

มี URL ที่แยกต่างหากสี่รายการต่อไปนี้คือความหมาย:

• ในประเทศ: URL ท้องถิ่นคือที่ที่คุณสามารถเข้าถึงเซิร์ฟเวอร์บนเครื่องที่คุณใช้งาน ในกรณีของเราคุณสามารถใช้ 192.168.33.21 หรือคุณสามารถใช้อันที่ Borwsersync จัดหาให้.
• ภายนอก: นี่คือ URL ที่คุณสามารถใช้กับอุปกรณ์ใด ๆ ที่เชื่อมต่อกับเครือข่ายเพื่อเข้าถึงเว็บไซต์ มันจะทำงานกับเครื่องท้องถิ่นของคุณโทรศัพท์แท็บเล็ตและอื่น ๆ.
• UI: URL นี้ชี้ไปที่ตัวเลือกสำหรับเซิร์ฟเวอร์ที่รันอยู่ในปัจจุบัน คุณสามารถดูการเชื่อมต่อตั้งค่าการควบคุมปริมาณเครือข่ายดูประวัติหรือตัวเลือกการซิงค์.
• UI ภายนอก: สิ่งนี้เหมือนกับ UI แต่สามารถเข้าถึงได้จากอุปกรณ์ใด ๆ บนเครือข่าย.

ทำไมต้องใช้ Browsersync?

ตอนนี้เราเสร็จสิ้นขั้นตอนนี้แล้วคุณอาจจะคิดว่า: ทำไมต้องใช้ Browsersync เลย URL 192.168.33.21 สามารถเข้าถึงได้จากทุกอุปกรณ์ แม้ว่าจะเป็นเช่นนั้นคุณจะต้องติดตั้ง WordPress กับ URL นี้.

ฉันมักจะใช้ virtualhosts และมีโดเมนเช่น wordpress.local หรือ myproject.dev การแก้ไขเหล่านี้ในพื้นที่เพื่อให้คุณไม่สามารถเยี่ยมชม wordpress.local บนโทรศัพท์มือถือของคุณและเห็นผลลัพธ์เดียวกันกับบนเครื่องคอมพิวเตอร์ของคุณ.

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

การใช้ ngrok เพื่อแบ่งปัน Localhost ของเรา

ngrok เป็นเครื่องมือที่คุณสามารถใช้เพื่อสร้างอุโมงค์ที่ปลอดภัยไปยัง localhost ของคุณ หากคุณสมัครใช้งาน (ยังฟรี) คุณจะได้รับอุโมงค์ที่มีการป้องกันด้วยรหัสผ่าน TCP และช่องสัญญาณหลายช่องพร้อมกัน.

กำลังติดตั้ง ngrok

ไปที่หน้าดาวน์โหลด ngrok และเลือกรุ่นที่คุณต้องการ คุณสามารถเรียกใช้จากโฟลเดอร์ที่อยู่ในหรือย้ายไปยังตำแหน่งที่อนุญาตให้คุณเรียกใช้จากที่ใดก็ได้ บน Mac / Linux คุณสามารถเรียกใช้คำสั่งต่อไปนี้:

sudo mv ngrok / usr / local / bin / ngrok

หากคุณได้รับข้อผิดพลาดว่าตำแหน่งนี้ไม่มีอยู่เพียงแค่สร้างโฟลเดอร์ที่หายไป.

การใช้ ngrok

โชคดีที่ส่วนนี้ง่ายมาก เมื่อคุณใช้งานเซิร์ฟเวอร์ของคุณผ่าน Gulp ลองดูพอร์ตที่ใช้งานอยู่ ในตัวอย่างด้านบนเซิร์ฟเวอร์ภายในทำงานอยู่ที่ http: // localhost: 3000 ซึ่งหมายความว่าใช้พอร์ต 3000 ในแท็บเทอร์มินัลใหม่ให้เรียกใช้คำสั่งต่อไปนี้:

ngrok http 3000

สิ่งนี้จะสร้างอุโมงค์ที่เข้าถึงได้ในพื้นที่ของคุณผลลัพธ์ควรเป็นดังนี้:

URL ที่คุณเห็นถัดจาก “การส่งต่อ” คือสิ่งที่คุณสามารถใช้เพื่อเข้าถึงเว็บไซต์ของคุณได้จากทุกที่.

ข้อสรุป

ในตอนท้ายของวันนี้เราสามารถทำสามสิ่ง:

• ดูและทำงานกับโครงการของเราในพื้นที่
• ดูเว็บไซต์ของเราผ่านอุปกรณ์ใด ๆ บนเครือข่าย
• ให้ผู้อื่นดูงานของเราได้ทุกที่ด้วยลิงก์แบบง่าย

สิ่งนี้จะช่วยให้คุณมุ่งเน้นไปที่การพัฒนาแทนที่จะแข่งเพื่อให้เซิร์ฟเวอร์ในพื้นที่และเซิร์ฟเวอร์ทดสอบซิงค์ซิงค์ฐานข้อมูลและงานที่น่าเป็นห่วงอื่น ๆ.

หากคุณมีวิธีการทำงานในพื้นที่อื่นและแบ่งปันผลลัพธ์โปรดแจ้งให้เราทราบ!