หยุดจ่าย Vercel: แอป NextJS โฮสต์เองไม่จำกัดในราคา $19/เดือน

เบื่อกับการกำหนดราคาตามการใช้งานแล้วหรือยัง? ปรับใช้แอป NextJS ของคุณบน VPS และโฮสต์โปรเจ็กต์ไม่จำกัดด้วยราคาคงที่ $19/เดือน

การพัฒนาเว็บแอปที่ยอดเยี่ยมและมีประสิทธิภาพทำได้ง่ายขึ้นด้วยความนิยมที่เพิ่มขึ้นของเฟรมเวิร์กฟูลสแตกเช่น NextJS. หลังจากเสร็จสิ้นแอป NextJS แล้ว คุณต้องเริ่มคิดว่าจะนำงานของคุณไปเผยแพร่บนอินเทอร์เน็ตอย่างไร ในขณะที่ Vercel (นักพัฒนาของ NextJS) นำเสนอโซลูชันการปรับใช้จากบุคคลที่หนึ่งเพียงคลิกเดียวสำหรับแอป NextJS ซึ่งอาจไม่เหมาะกับบุคคลที่ต้องการการควบคุมเซิร์ฟเวอร์ที่พวกเขากำลังปรับใช้มากขึ้น

Hostari ให้บริการ Virtual Private Servers (VPS) ราคาประหยัด ปลอดภัย และมีประสิทธิภาพ ซึ่งสามารถกำหนดค่าได้อย่างง่ายดายเพื่อปรับใช้แอปของคุณที่สร้างบน NextJS (และแทบทุกเฟรมเวิร์กเว็บที่คุณทำงานด้วย) อย่างไรก็ตาม การเชื่อมต่อกับเซิร์ฟเวอร์ Linux และการใช้อินเทอร์เฟซบรรทัดคำสั่ง (CLI) อาจดูน่ากลัวสำหรับผู้ที่ไม่มีประสบการณ์มากนักในการปรับใช้กับเว็บเซิร์ฟเวอร์ทั่วไป

ในคู่มือนี้ เราจะอธิบายว่าทำไม อย่างไร และเมื่อใดที่คุณควรพิจารณาปรับใช้แอป NextJS บน VPS แทนผู้ให้บริการ Cloud PaaS เช่น อเมซอนเว็บเซอร์วิส, Google Cloud แพลตฟอร์มและ Vercel. โปรดทราบว่าในคู่มือนี้ คุณจะสูญเสียคุณสมบัติบางอย่างของ NextJS (เช่น การเพิ่มประสิทธิภาพรูปภาพ) เนื่องจากเราจะใช้งานเป็นแอปพลิเคชัน Node.js มาตรฐาน

เหตุใดคุณจึงควรโฮสต์แอป NextJS ด้วยตนเอง

มีสาเหตุหลายประการที่คุณควรพิจารณาโฮสต์แอป NextJS ด้วยตนเอง สิ่งสำคัญที่สุดคือความสามารถในการจ่ายและการควบคุมที่เพิ่มขึ้นที่คุณมีเหนือเป้าหมายการใช้งานของคุณ สำหรับนักพัฒนาที่คำนึงถึงงบประมาณและผู้ประกอบการที่เชี่ยวชาญ การเช่า VPS จากผู้ให้บริการเช่น Hostari สามารถให้บริการลูกค้าที่ชำระเงิน 100 คนแรกของคุณได้แม้จะใช้ 2vCPU $19/เดือน, 4GB RAM VPS พร้อมแบนด์วิดท์ 1TB การนำเสนอคุณค่าประเภทนี้เทียบได้ยากกับแพลตฟอร์ม PaaS สมัยใหม่ที่มักเรียกเก็บเงินตามการใช้งานหรือการรับส่งข้อมูล นอกเหนือจากความสามารถในการปรับขนาดที่น่าประหลาดใจที่นำเสนอโดย VPS สมัยใหม่ ยังมีเหตุผลอื่นๆ ว่าทำไมคุณถึงเลือกตั้งค่าและสร้างบนโครงสร้างพื้นฐานของคุณเอง:

1. ค่าใช้จ่ายรายเดือนที่คาดการณ์ได้
   1. VPS $19/เดือนเดียวกันนั้นสามารถเรียกใช้แอพและสภาพแวดล้อมได้หลายแบบ
   2. ไม่มีการเรียกเก็บเงินที่น่าประหลาดใจอีกต่อไปจากการจราจรที่พุ่งสูงขึ้นอย่างไม่คาดคิด
   3. แบนด์วิธคงที่ 1TB หมายความว่าไม่ต้องชาร์จตามคำขอ
   4. อัปเกรดเมื่อคุณต้องการทรัพยากรเพิ่มเติมจริงๆ เท่านั้น
2. ​การควบคุมนักพัฒนาที่แท้จริง​
   1. SSH เข้าสู่เซิร์ฟเวอร์ของคุณทุกครั้งที่คุณต้องการตรวจสอบบางสิ่ง
   2. กำหนดค่า nginx และแคชตามที่คุณต้องการ
   3. เรียกใช้ Node.js และ npm เวอร์ชันที่แน่นอนที่เหมาะกับคุณ
   4. ติดตั้ง Redis, PostgreSQL หรือบริการอื่น ๆ ที่คุณต้องการ
3. อิสระในการสร้างเส้นทางของคุณ
   1. ใช้การดำเนินการ GitHub, GitLab CI, Dokku หรือเครื่องมือ CI/CD ใดๆ ที่คุณต้องการ
   2. ตั้งค่าแคชแบบกำหนดเองที่เหมาะสมกับแอปของคุณ
   3. ตรวจสอบแอปของคุณด้วยเครื่องมือที่คุณรู้จักและไว้วางใจอยู่แล้ว
   4. เรียกใช้งานเบื้องหลังโดยไม่ต้องเสียค่าบริการเพิ่มเติม
4. การใช้ทรัพยากรที่ได้รับการปรับแต่งอย่างละเอียด​
   1. โฮสต์แอป Dev, Staging และ Production ของคุณบน VPS เดียว
   2. กำหนดค่าหน่วยความจำและ CPU ตรงตามที่แอปของคุณต้องการ
   3. รันหลายโปรเจ็กต์โดยไม่ต้องเสียค่าบริการโฮสติ้งหลายรายการ

เหตุใดคุณจึงไม่ควรโฮสต์แอป NextJS ด้วยตนเอง

เช่นเดียวกับการตัดสินใจอื่นๆ ในด้านวิศวกรรมซอฟต์แวร์ โซลูชัน PaaS ที่ได้รับการจัดการมีบทบาทในระบบนิเวศการปรับใช้ สำหรับเฟรมเวิร์กเช่น NextJS คุณลักษณะบางอย่างจะถูกล็อกไว้หลัง Vercel เช่น Image Optimization แม้จะมีความก้าวหน้าในเครื่องมือโครงสร้างพื้นฐานที่ทำให้การโฮสต์ด้วยตนเองสามารถเข้าถึงได้มากขึ้น แต่ก็ยังมีสถานการณ์ที่ถูกต้องซึ่งคุณอาจต้องการยึดติดกับแพลตฟอร์ม เช่น Vercel หรือ AWS:

1. ต้องการคุณสมบัติพิเศษเฉพาะแพลตฟอร์ม
   1. Vercel การปรับใช้การแสดงตัวอย่างทันทีสำหรับ PR ทุกครั้งเป็นเครื่องมือการทำงานร่วมกันที่ยอดเยี่ยม
   2. ฟังก์ชัน Edge จำเป็นต้องมีการกำหนดค่าเพิ่มเติมเมื่อทำการโฮสต์ด้วยตนเอง
   3. การวิเคราะห์และการตรวจสอบประสิทธิภาพในตัวพร้อมใช้งานแล้ว
   4. การปรับภาพให้เหมาะสมอัตโนมัติต้องมีการตั้งค่าแยกต่างหากบน VPS
2. ​ความกดดันด้านเวลาสู่ตลาด
   1. บริษัทสตาร์ทอัพที่ได้รับทุนสนับสนุนอาจต้องการใช้ทรัพยากรในการพัฒนาผลิตภัณฑ์
   2. คุณลักษณะของแพลตฟอร์ม เช่น การปรับใช้สาขาอัตโนมัติช่วยให้กระบวนการตรวจสอบเร็วขึ้น
   3. การกระจาย CDN ทั่วโลกเกิดขึ้นทันที
   4. การตั้งค่าไปป์ไลน์ CI/CD ของคุณเองต้องใช้การวางแผนเบื้องต้น
3. ทีมไดนามิกส์
   1. ทีมขนาดใหญ่อาจได้รับประโยชน์จากเวิร์กโฟลว์แพลตฟอร์มที่ได้มาตรฐาน
   2. นักพัฒนาใหม่อาจคุ้นเคยกับการปรับใช้ PaaS แล้ว
   3. การตัดสินใจด้านโครงสร้างพื้นฐานจำเป็นต้องมีเอกสารทั้งทีม
   4. ขั้นตอนการปรับใช้ต้องมีการสื่อสารทั่วทั้งทีม
4. ข้อกำหนดทางธุรกิจ
   1. โครงการที่ต้องการสถานะระดับโลกทันทีอาจเริ่มต้นได้เร็วขึ้นด้วย PaaS
   2. การรับรองการปฏิบัติตามข้อกำหนดเฉพาะอาจต้องใช้บริการที่ได้รับการจัดการ
   3. ไคลเอนต์องค์กรบางรายอาจจำเป็นต้องมีการปรับใช้แพลตฟอร์มเฉพาะ
   4. การปรับขนาดผลิตภัณฑ์อย่างรวดเร็วอาจได้ประโยชน์จากโครงสร้างพื้นฐานที่ได้รับการจัดการ

อย่างไรก็ตาม เป็นที่น่าสังเกตว่าเครื่องมือสมัยใหม่ทำให้ความท้าทายส่วนใหญ่เหล่านี้จัดการได้ค่อนข้างง่าย สำหรับ NextJS โดยเฉพาะ โครงการเช่น OpenNext กำลังพยายามแยกการรวม NextJS และ Vercel เข้าด้วยกันอย่างแน่นหนา และทำให้การโฮสต์ NextJS ด้วยตนเองเป็นไปได้จริงบนแพลตฟอร์มเช่น Cloudflare and Netlify. หากคุณไม่รังเกียจที่จะสูญเสียคุณสมบัติบางอย่างของ NextJS ด้วยการเรียกใช้เป็นแอป Node.js มาตรฐาน คุณสามารถใช้ประโยชน์จากเครื่องมือเช่น Docker และทางเลือกโอเพ่นซอร์ส PaaS เช่น Coolify and Dokploy เพื่อให้ประสบการณ์การตั้งค่า VPS ระดับการใช้งานจริงง่ายกว่าการทำสิ่งต่างๆ ด้วยตัวเองมาก

มีคนไม่มากที่รู้เรื่องนี้ แต่ตัวเลือกมักจะขึ้นอยู่กับความต้องการเฉพาะของคุณ ขนาดทีม และบริบททางธุรกิจ มากกว่าข้อจำกัดทางเทคนิค

คุณต้องมีอะไรบ้างในการโฮสต์แอป NextJS ของคุณ

หากคุณต้องการเริ่มต้นใช้ชีวิตในโลกของเว็บแอปและ VPS ที่โฮสต์เอง คุณเพียงแค่เริ่มต้นบางสิ่ง:

• VPS ที่ใช้งานอยู่ซึ่งมีอย่างน้อย 2vCPU, 4GB RAM บน Ubuntu 22.02 (ปลั๊กไร้ยางอาย: เราเสนอให้ในราคา $18/เดือนที่ Hostari!)
• โค้ดเบสที่ใช้ NextJS ใด ๆ (ที่ควรรันโดยไม่มีข้อผิดพลาดในโหมด dev!) สำหรับคำแนะนำนี้ เราจะใช้มาตรฐาน create-next-app เทมเพลตเริ่มต้นเพื่อความเรียบง่าย
  
• ไม่บังคับ แต่แนะนำเป็นอย่างยิ่ง: ชื่อโดเมนเพื่อให้คุณสามารถเชื่อมต่อกับเว็บแอปที่ใช้งานของคุณด้วยชื่อโดเมนแทนที่อยู่ IP

คุณจะปรับใช้แอป NextJS สำหรับการปรับใช้ VPS ได้อย่างไร (และในทางกลับกัน)

ด้าน NextJS ของสิ่งต่าง ๆ

ดังที่ได้กล่าวไปแล้วเราจะใช้มาตรฐาน create-next-app เทมเพลตเพื่อให้คุณสามารถติดตามได้อย่างง่ายดายและรวดเร็ว หากคุณได้เตรียม codebase ของคุณเองแล้ว คุณสามารถทำตามคำแนะนำทั่วไปที่คู่มือแนะนำได้ หากโครงการของคุณใช้ฐานข้อมูลเช่น Supabase และเครื่องมือเช่น Drizzleคุณจะต้องตั้งค่าเหล่านั้นก่อนจึงจะสามารถปรับใช้ NextJS ของคุณได้ โปรดดูเอกสารที่เกี่ยวข้องของเครื่องมือของคุณเกี่ยวกับวิธีการโฮสต์พวกมันบน VPS ของคุณ (หากพวกมันเสนอตัวเลือกนี้!)

ตอนนี้เรามาดำเนินการตามคำแนะนำกันดีกว่า

ขั้นตอนที่ 1 - วิ่ง create-next-app

เนื่องจากเรายังไม่มีโค้ดเบส NextJS ให้ใช้งาน เรามาเริ่มกันเลย create-next-app และตั้งค่าโครงการ NextJS พื้นฐาน

ขั้นตอนที่ 2 - เรียกใช้เซิร์ฟเวอร์การพัฒนา

เป็นเรื่องดีเสมอที่จะตรวจสอบสุขภาพจิตเมื่อคุณเริ่มโปรเจ็กต์ใหม่ รันเซิร์ฟเวอร์การพัฒนาโดยการรัน ผู้พัฒนารัน NPM หรืออะไรก็ตาม Javascript รันไทม์ที่คุณใช้ ส่วนตัวผมใช้ Bunแล้วคุณจะเห็นฉันวิ่ง ผู้พัฒนาบุญ ในภาพหน้าจอ

เมื่อคุณเปิดเซิร์ฟเวอร์การพัฒนาแล้ว คุณสามารถไปที่ localhost:3000 ในเบราว์เซอร์ที่คุณเลือก หากทุกอย่างเป็นไปด้วยดี คุณก็ควรจะมองเห็นมาตรฐานได้ create-next-app: โลโก้ NextJS, ข้อความบางส่วน, ปุ่มบางปุ่ม และลิงก์บางส่วน

ขั้นตอนที่ 3 - ทำการเปลี่ยนแปลงอย่างรวดเร็วในเทมเพลต create-next-app

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

ขั้นตอนที่ 4 - จดบันทึกตัวแปรสภาพแวดล้อมและคีย์ API ที่คุณอาจต้องการ

เมื่อคุณปรับใช้กับ VPS โดยทั่วไปคุณยังต้องตั้งค่าตัวแปรสภาพแวดล้อมของคุณ (เช่น URL สำหรับฐานข้อมูลของคุณ) และคีย์ API อีกครั้ง ตัวอย่างเช่น หากคุณสร้างแอป AI ที่ต้องอาศัย Anthropic or OpenAI API คุณจะต้องสร้างคีย์ API ใหม่สำหรับ VPS เท่านั้น หรือคุณสามารถใช้คีย์ API การพัฒนาที่มีอยู่ของคุณซ้ำได้ ฉันขอแนะนำให้สร้างคีย์ API ใหม่สำหรับสภาพแวดล้อมการปรับใช้ของคุณเพื่อการจัดการที่ง่ายขึ้นและความแตกต่างระหว่างสภาพแวดล้อมภายในเครื่อง สภาพแวดล้อมการพัฒนา และสภาพแวดล้อมการใช้งานจริงของคุณ ฉันอยากจะพูดถึงเรื่องนั้นด้วย หากคุณใช้แพลตฟอร์มเช่น Github สำหรับการจัดการเวอร์ชันของคุณ คุณไม่ควรคอมมิตตัวแปรสภาพแวดล้อมและคีย์ API ควบคู่ไปกับไฟล์อื่นๆ ของโปรเจ็กต์ของคุณโดยเด็ดขาด ตรวจสอบให้แน่ใจเสมอว่าของคุณ .env  ไฟล์รวมอยู่ในของคุณ .gitignore ไฟล์!

สำหรับคำแนะนำนี้ เราไม่จำเป็นต้องตั้งค่าตัวแปรสภาพแวดล้อมใดๆ เนื่องจากเราเพิ่งใช้ค่าเริ่มต้น create-next-app ซึ่งค่อนข้างตรงไปตรงมา (เหมาะสำหรับการเรียนรู้วิธีการปรับใช้ VPS อย่างง่าย)

ขั้นตอนที่ 5 - เตรียม VPS ของคุณสำหรับการปรับใช้!

จากจุดนี้เป็นต้นไป เราจะทำงานด้าน VPS เป็นหลัก ดังที่คุณอาจสังเกตเห็นว่ากระบวนการหลักในการตั้งค่าแอป NextJS สำหรับการปรับใช้ VPS นั้นค่อนข้างตรงไปตรงมาและเกี่ยวข้องกับการตรวจสอบสุขภาพเป็นหลัก โปรดทราบว่าคุณอาจต้องทำตามขั้นตอนอื่นๆ ขึ้นอยู่กับสแต็กที่คุณใช้ (เช่น การตั้งค่าฐานข้อมูลเพิ่มเติม) สำหรับกรณีเหล่านั้น โปรดตรวจสอบเอกสารประกอบของเครื่องมือของคุณเสมอ หากมีคำแนะนำที่อธิบายวิธีการโฮสต์และเตรียมพร้อมสำหรับสภาพแวดล้อมการใช้งานจริง

ด้าน VPS ของสิ่งต่างๆ

ตอนนี้เราแน่ใจว่าแอป NextJS ของเราทำงานได้อย่างสมบูรณ์แบบในสภาพแวดล้อมท้องถิ่นของเรา ถึงเวลาที่ต้องทำส่วนที่สนุก -- ปรับใช้และรันแอป NextJS บน VPS ของคุณ!

มีหลายวิธีที่คุณสามารถปรับใช้แอป NextJS บน VPS ได้ เช่น การใช้ Dokku ซึ่งช่วยให้คุณสามารถปรับใช้กับ VPS ของคุณโดยใช้ Git ฉันเชื่อว่าการเรียนรู้พื้นฐานของบางสิ่งบางอย่างเป็นสิ่งสำคัญมากก่อนที่คุณจะใช้เครื่องมือที่ทำให้ชีวิตของคุณง่ายขึ้น นี่คือเหตุผลที่เราจะรักษาสิ่งต่างๆ ให้เรียบง่ายและตรงไปตรงมา โดยใช้แนวทางพื้นฐานที่สุด (แต่ยังคงพร้อมสำหรับการใช้งานจริง) ในการปรับใช้ แนวทางที่ฉันจะแสดงให้คุณเห็นนั้นอาศัยพื้นฐานเท่านั้น nginx configuration.

ก่อนที่เราจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้เพื่อให้ประสบการณ์การใช้งานราบรื่น:

• อย่างน้อย 2vCPU, 4GB VPS จากผู้ให้บริการที่เชื่อถือได้เช่น Hostari or DigitalOcean
• ข้อมูลรับรอง SSH สำหรับ VPS ของคุณ
• คีย์ SSH สำหรับเครื่องท้องถิ่นของคุณ
• Your public (ไม่ใช่ส่วนตัว) ควรอัปโหลดคีย์ SSH ไปยัง VPS ของคุณ

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

ขั้นตอนที่ 1 - เชื่อมต่อกับ VPS ของคุณผ่าน SSH

ใช้แอป Terminal ที่คุณชื่นชอบเพื่อเชื่อมต่อกับ VPS ของคุณผ่าน SSH หากคีย์ SSH สาธารณะของคุณถูกอัปโหลดไปยัง VPS ของคุณ คุณควรได้รับแจ้งให้ป้อนข้อความรหัสผ่านของคีย์ SSH ของคุณ หรือคุณสามารถใช้ชื่อผู้ใช้และรหัสผ่าน SSH ของคุณเพื่อเชื่อมต่อกับ VPS ของคุณได้

 ssh <username>@<server_ip_address>

ขั้นตอนที่ 2 - ติดตั้งซอฟต์แวร์ที่จำเป็นบนเซิร์ฟเวอร์ของคุณ

ในกรณีของเราในการโฮสต์แอป NextJS เราจะต้องติดตั้งรันไทม์ Javascript ที่คุณต้องการบนเซิร์ฟเวอร์ของคุณ หากคุณเพิ่งเริ่มต้น ฉันแนะนำให้ติดตั้ง Node.js ตรวจสอบให้แน่ใจว่าเวอร์ชันของ Node.js ที่คุณใช้เป็นเวอร์ชันเดียวกับที่คุณใช้ในการพัฒนาแอปของคุณ ดังนั้นคุณจะพบปัญหาน้อยลงในกระบวนการนี้ หากคุณต้องการติดตั้ง Node.js แทน Bun คุณสามารถเรียกใช้:

sudo apt install nodejs

ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ว่าฉันใช้ Bun เป็นรันไทม์ Javascript ที่ฉันเลือก ฉันเพียงแค่ต้องเรียกใช้คำสั่งต่อไปนี้และฉันก็จะพร้อม:

curl -fsSL https://bun.sh/install | bash

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

ขั้นตอนที่ 3 - โคลน repo ของคุณจาก Github (หรือคล้ายกัน) ลงใน VPS ของคุณ

อีกเพียงไม่กี่ก้าวคุณก็จะได้เห็นแอป NextJS ที่โฮสต์ใน VPS ของเรา หลังจากติดตั้งรันไทม์ JS ที่คุณต้องการแล้ว คุณจะต้องโคลนพื้นที่เก็บข้อมูล Git ของโค้ดเบสของคุณ หากคุณไม่ได้ใช้การควบคุมเวอร์ชัน คุณสามารถใช้วิธีอื่น เช่น FTP เพื่ออัปโหลดโค้ดเบสของคุณไปยัง VPS ด้วยตนเองได้

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

ขั้นตอนที่ 4 - เริ่มแอป NextJS ของคุณและเข้าถึงโดยใช้ที่อยู่ IP

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

สิ่งหนึ่งที่ควรทราบ: การวิ่ง มวยเริ่มวิ่ง ด้วยวิธีนี้หมายความว่าแอปของคุณจะหยุดทำงานหากคุณปิดเซสชันเทอร์มินัล 

สำหรับสภาพแวดล้อมการใช้งานจริง คุณอาจต้องการใช้ตัวจัดการกระบวนการเพื่อให้แอปของคุณทำงานต่อไป เครื่องมือเช่น PM2 ดีสำหรับสิ่งนี้ แต่เราจะทำให้มันง่ายไว้ก่อนและแก้ไขปัญหานั้นในคำแนะนำในอนาคต

ยินดีด้วย แอป NextJS ของคุณอยู่ในขณะนี้ technically ปรับใช้บนพอร์ตเซิร์ฟเวอร์ของคุณ 3000 ด้วย HTTP คุณสามารถลองเข้าถึงเว็บแอปของคุณได้โดยไปที่เว็บเบราว์เซอร์แล้วพิมพ์ข้อความเช่น your-ip-address:3000 อย่างไรก็ตาม นี่ยังไม่พร้อมสำหรับการใช้งานจริง เนื่องจากเราจำเป็นต้องตั้งค่าการกำหนดค่า nginx เพื่อชี้เซิร์ฟเวอร์ของเราไปยังโดเมนที่เหมาะสม ลบพอร์ต 3000 ออกจากที่อยู่เซิร์ฟเวอร์ และเพิ่ม HTTPS

ขั้นตอนที่ 5 - ตั้งค่าการกำหนดค่า nginx เริ่มต้นของคุณ

ในขั้นตอนก่อนหน้านี้ เราสามารถเข้าถึงแอป NextJS ที่ปรับใช้ของเราผ่านพอร์ต 3000 ของที่อยู่ IP VPS ของเราได้สำเร็จ แม้ว่าการตั้งค่านี้จะใช้งานได้ในทางเทคนิคและคุณสามารถเรียกได้ว่าเป็นรายวัน แต่ก็ไม่ผ่านสำหรับสภาพแวดล้อมการใช้งานจริงอย่างแน่นอน นี่คือที่มาของ nginx ซึ่งเป็น "ตัวควบคุมการรับส่งข้อมูล" สำหรับเว็บแอปต่างๆ บน VPS ของคุณ ตัวอย่างเช่น ถ้ามีคนเยี่ยมชมโดเมนของคุณ (สมมติว่าเป็นโดเมน hostari-tutorial.richardparayno.com) nginx จะ receive ที่ร้องขอและส่งต่อไปยังแอป NextJS ของคุณที่ทำงานบนพอร์ต 3000 ของ VPS ของคุณ

หากต้องการตั้งค่า nginx พื้นฐานสำหรับเซิร์ฟเวอร์ของคุณ คุณต้องติดตั้งบน VPS ก่อน บน VPS ที่ทำงานบน Ubuntu คุณสามารถรันคำสั่งต่อไปนี้:

sudo apt update

sudo apt install nginx

เมื่อคุณติดตั้ง nginx สำเร็จแล้ว ก็ถึงเวลาสร้างไฟล์กำหนดค่า nginx ของคุณ โดยคุณสามารถเรียกใช้คำสั่งต่อไปนี้:

sudo nano /etc/nginx/sites-available/nextjs

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

server {
 	listen 80;
 	server_name your-domain.com;  # Replace with your actual domain
 	location / {
     	proxy_pass http://localhost:3000;
     	proxy_http_version 1.1;
     	proxy_set_header Upgrade $http_upgrade;
     	proxy_set_header Connection 'upgrade';
     	proxy_set_header Host $host;
     	proxy_cache_bypass $http_upgrade;
 	}
 }

หากคุณทำทุกอย่างถูกต้อง คุณควรเรียกไฟล์การกำหนดค่า nginx nextjs ภายในของคุณ etc/nginx/sites-available/nextjs directory.

หลังจากสร้างการกำหนดค่า nginx ของคุณแล้ว เราสามารถดำเนินการต่อและลบการกำหนดค่าเริ่มต้น nginx ได้โดยการรันคำสั่ง:

sudo rm /etc/nginx/sites-enabled/default

โปรดทราบว่าหากคุณไม่ลบการกำหนดค่าเริ่มต้น คุณจะเห็นหน้าจอเริ่มต้น "ยินดีต้อนรับสู่ Nginx" เมื่อคุณเยี่ยมชมเว็บไซต์ของคุณ

หลังจากลบไฟล์การกำหนดค่าเริ่มต้นแล้ว คุณควรดำเนินการของคุณ new ไฟล์การกำหนดค่า (etc/nginx/sites-available/nextjs) และสร้างลิงก์สัญลักษณ์ (หรือลิงก์สัญลักษณ์) ลงในไฟล์ของคุณ etc/nginx/sites-enabled directory.

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled

หลังจากสร้าง symlink แล้ว คุณควรทำการทดสอบเพื่อตรวจสอบว่าการกำหนดค่านั้นถูกต้องหรือไม่

sudo nginx -t

หากคุณสับสนเล็กน้อยเกี่ยวกับสิ่งที่เกิดขึ้นที่นี่ นั่นเป็นเพราะว่า Nginx ใช้ไดเรกทอรีที่แตกต่างกันสองแห่งในการจัดการไฟล์การกำหนดค่าของคุณ sites-available เป็นที่ที่คุณสามารถจัดเก็บไฟล์การกำหนดค่าต่างๆ ของคุณได้ sites-enabled เป็นที่ที่ Nginx ค้นหาการกำหนดค่าที่จะใช้จริง ๆ กล่าวอีกนัยหนึ่ง คุณสามารถมีการกำหนดค่าที่แตกต่างกันได้มากมายในตัวของคุณ sites-available ไดเร็กทอรี แต่เฉพาะที่อยู่ในเท่านั้น sites-enabled  จะถูก "เปิดใช้งาน" และเข้าถึงได้ทางอินเทอร์เน็ตจริงๆ

ตอนนี้เราได้ "เปิดใช้งาน" การกำหนดค่าสำหรับแอป NextJS ของเราแล้ว คุณต้องรีสตาร์ท nginx เพื่อใช้การเปลี่ยนแปลงที่เราได้ทำไว้จริง

sudo systemctl restart nginx

หากคุณต้องการทดสอบว่า nginx ของคุณทำงานอย่างถูกต้องหรือไม่ คุณควรจะสามารถเรียกใช้เซิร์ฟเวอร์ NextJS ของคุณได้อีกครั้ง (มวยเริ่มวิ่ง) และดูแอป NextJS ของคุณหากคุณไปที่ที่อยู่ IP ของ VPS โดยตรงบนเว็บเบราว์เซอร์โดยไม่ต้องป้อนพอร์ต 3000 ลงในแถบที่อยู่ เรามีงานที่สำคัญเพียงไม่กี่อย่างที่เหลืออยู่ในการทำให้การใช้งานจริงของคุณเสร็จสมบูรณ์ เช่น การเปิดใช้งาน HTTP บนเซิร์ฟเวอร์ของคุณและการเชื่อมต่อโดเมนของคุณ ในขั้นตอนถัดไป เราจะก้าวออกจาก Linux CLI และไปที่การตั้งค่า DNS ของผู้รับจดทะเบียนโดเมนของเรา

ขั้นตอนที่ 6 - ชี้โดเมนของคุณไปยังที่อยู่ IP ของ VPS

ตอนนี้คุณได้กำหนดค่า nginx เพื่อดูแลการรับส่งข้อมูลของแอป NextJS แล้ว คุณจะต้องแจ้งให้อินเทอร์เน็ตทราบว่าชื่อโดเมนของคุณ (ในกรณีนี้ hostari-tutorial.richardparayno.com) ควรชี้ไปที่ VPS ของคุณ ดูเอกสารประกอบของผู้ให้บริการโดเมนของคุณเกี่ยวกับวิธีการเพิ่ม "ระเบียน A" ในการตั้งค่า DNS ของโดเมนของคุณ กระบวนการ "ชี้" โดเมนของคุณไปยัง VPS นั้นง่ายดาย คุณเพียงแค่ต้องสร้างระเบียน A ด้วยการตั้งค่า (ค่าเริ่มต้น) ต่อไปนี้:

• Type: A
• Name: @ (หมายถึงโดเมนรูท หากคุณต้องการชี้ ก subdomain ไปที่ VPS ของคุณแทน คุณสามารถใส่สิ่งนั้นลงไปแทนได้ ในกรณีของฉัน เนื่องจากฉันต้องการโดเมน hostari-tutorial.richardparayno.com เพื่อชี้ไปที่ VPS ของฉัน ฉันสามารถใส่ hostari-tutorial ได้)
• Value: <ใส่ที่อยู่ IP VPS ของคุณที่นี่>
  
• ทีทีแอล: 3600 (หรือสิ่งที่ผู้ให้บริการของคุณแนะนำ)

ฉันใช้ Cloudflare เพื่อจัดการโดเมนและ DNS ของฉัน ดังนั้นอินเทอร์เฟซของผู้ให้บริการของคุณจึงอาจดูแตกต่างออกไปเล็กน้อย อย่างไรก็ตาม หลักการยังคงเหมือนเดิม: สร้างบันทึก A พิมพ์ชื่อ และชี้ไปยังที่อยู่ IP ของ VPS ของคุณ

ขั้นตอนที่ 7 - เพิ่ม HTTPS ไปยัง VPS ของคุณ

นี่เป็นขั้นตอนสุดท้ายก่อนที่การปรับใช้ NextJS ของเราจะถึงระดับการผลิตและเสร็จสมบูรณ์ในที่สุด เราจะใช้การเพิ่ม HTTPS ให้กับ VPS ของคุณต่อ มาเข้ารหัสกันเถอะซึ่งเป็นบริการฟรีที่ให้ใบรับรอง SSL ที่ต่ออายุอัตโนมัติทุกๆ 90 วัน

ก่อนอื่นเราต้องทำการติดตั้ง Certbot บน VPS ของเรา ซึ่งเป็นเครื่องมือที่จัดการทุกสิ่งที่จำเป็นสำหรับ Let's Encrypt

sudo apt install certbot python3-certbot-nginx

เมื่อติดตั้ง Certbot แล้ว ให้รันคำสั่งด้านล่าง ในส่วนหนึ่งของกระบวนการ Certbot จะถามคำถามคุณ เช่น ที่อยู่อีเมลของคุณและการยืนยันข้อกำหนดในการให้บริการ

sudo certbot --nginx -d hostari-tutorial.richardparayno.com (change this to your domain!)

หลังจากนั้น ให้รันเซิร์ฟเวอร์ NextJS ของคุณอีกครั้งโดยการโทร มวยเริ่มวิ่ง และป้อนชื่อโดเมนของคุณในเบราว์เซอร์ของคุณ หากคุณปฏิบัติตามทุกอย่างในคำแนะนำ ตอนนี้คุณจะเห็นแอป NextJS ใช้งานบน VPS และปลอดภัยด้วย HTTPS ยินดีด้วย!

บทโบนัส: เคล็ดลับและเทคนิคการจัดการ VPS จากทีม Hostari

หากคุณไม่ใช่แฟนของกระบวนการตั้งค่า VPS ของคุณด้วย nginx ด้วยตนเอง ซึ่งเป็นที่ยอมรับ เขียนการกำหนดค่า และย้ายโค้ดเบส NextJS ของคุณจากคลังเก็บ Git ไปยัง VPS ด้วยตนเอง มีเครื่องมือมากมายที่จะช่วยให้คุณเข้าใกล้ประสบการณ์การปรับใช้ที่เรียบง่ายเพียงคลิกเดียว ซึ่งได้รับความนิยมในเครื่องมือ PaaS สมัยใหม่

โดยส่วนตัวแล้วฉันเป็นแฟนตัวยงของเครื่องมือต่อไปนี้ และแนะนำให้ดูว่าเครื่องมือใดที่เหมาะกับคุณที่สุด:

• Dokku - โอเพ่นซอร์ส PaaS ทางเลือกแทน Heroku
• Coolify - โอเพ่นซอร์ส PaaS ทางเลือกแทน Vercel, รถไฟ ฯลฯ
• Dokploy - โอเพ่นซอร์ส PaaS ทางเลือกแทน Vercel, รถไฟ ฯลฯ

ที่ Hostari เราเป็นแฟนตัวยงของเครื่องมือเหล่านี้และใช้มันทุกวันในการจัดการ VPS และโฮมแล็บระยะไกลของเรา เมื่อคุณคุ้นเคยกับวิธีการทำงานของเว็บโดยใช้ nginx แล้ว ตอนนี้คุณก็พร้อมที่จะ "เปลี่ยน" ใช้เครื่องมือเหล่านี้และปรับปรุงประสบการณ์นักพัฒนาซอฟต์แวร์ของคุณแล้ว อย่างไรก็ตาม คุณควรจำไว้เสมอว่าสิ่งเหล่านี้เป็นเครื่องมือในตอนท้ายของวัน และจะเป็นประโยชน์ต่อคุณหากได้เรียนรู้ว่าเครื่องมือเหล่านี้ทำงานอย่างไร เพื่อให้คุณสามารถแก้ไขปัญหาได้ในอนาคต

บทสรุป

ในคู่มือนี้ ฉันได้พูดถึงสาเหตุที่คุณควรและควร not โฮสต์แอป NextJS ของคุณด้วยตนเองบน VPS หากคุณคุ้นเคยกับการโฮสต์เว็บไซต์ของคุณผ่านบริการปรับใช้ในคลิกเดียว เช่น Vercel และ Netlify คุณอาจรู้สึกหวาดกลัวหรือประหลาดใจกับหลายสิ่งที่คุณต้องทำเพื่อปรับใช้แอป NextJS บน VPS ใหม่ อย่างไรก็ตาม สิ่งสำคัญที่ควรทราบคือแนวทางที่ฉันแบ่งปันในวันนี้เป็นเพียงหนึ่งในหลายวิธีในการปรับใช้โครงการของคุณกับอินเทอร์เน็ต การได้สัมผัสประสบการณ์การตั้งค่า Nginx ด้วยตนเองจะสอนคุณมากมายเกี่ยวกับวิธีการปรับใช้แอปของคุณกับเว็บทำงานอย่างไร และ (ฉันหวังว่า) คุณจะเลิกใช้คู่มือนี้ด้วยความเข้าใจและความซาบซึ้งมากขึ้นเกี่ยวกับวิธีการทำงานของฝั่งเซิร์ฟเวอร์

การขจัดความลึกลับและขจัดความซับซ้อนออกจากวิธีการทำงานของอินเทอร์เน็ตเป็นหนึ่งในเป้าหมายของเราที่ Hostari เราเชื่อว่าการจัดการโครงสร้างพื้นฐานของเว็บไม่ควรน่ากลัว และถึงเวลาแล้วที่โครงสร้างพื้นฐานบนเซิร์ฟเวอร์แบบดั้งเดิมที่มีราคาไม่แพงจะแข่งขันกับประสบการณ์ของนักพัฒนาที่ได้รับจากแพลตฟอร์ม PaaS เช่น Vercel, GCP และ AWS หากสิ่งนี้ฟังดูน่าสนใจสำหรับคุณและคุณกำลังมองหาผู้ให้บริการ VPS ที่ใส่ใจเกี่ยวกับประสบการณ์ของนักพัฒนาอย่างแท้จริง โปรดไปที่ __เว็บไซต์ Hostari วันนี้และรับ VPS ของคุณเอง!

​