วิธีติดตั้ง React.js ใน cPanel: คู่มือปี 2024

React.js ได้กลายเป็นหนึ่งในไลบรารี JavaScript ที่ได้รับความนิยมมากที่สุดสำหรับการสร้างส่วนต่อประสานผู้ใช้เชิงโต้ตอบแบบไดนามิก แม้ว่าโดยทั่วไปจะใช้กับเฟรมเวิร์กแบ็กเอนด์เช่น Node.js แต่นักพัฒนาจำนวนมากพยายามปรับใช้แอปพลิเคชัน React.js บนสภาพแวดล้อมโฮสติ้งที่ใช้ร่วมกันซึ่งใช้ cPanel ซึ่งเป็นแผงควบคุมยอดนิยมสำหรับจัดการบัญชีเว็บโฮสติ้ง

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

คุณยังสามารถอ่าน: 7 โฮสติ้งที่ดีที่สุดสำหรับแอป React ปี 2024 (เปรียบเทียบ)

ข้อกำหนดเบื้องต้น

ก่อนที่จะเข้าสู่กระบวนการติดตั้ง มีข้อกำหนดเบื้องต้นบางประการที่คุณควรมี:

1. แอปพลิเคชัน React.js ที่พร้อมใช้งาน : ตรวจสอบให้แน่ใจว่าแอป React ของคุณสมบูรณ์และพร้อมสำหรับการผลิต ซึ่งหมายความว่างานพัฒนาทั้งหมดเสร็จสิ้นแล้ว และคุณพร้อมที่จะสร้างเวอร์ชันของแอปที่สามารถให้บริการแก่ผู้ใช้ได้
2. การเข้าถึง cPanel : คุณต้องเข้าถึง cPanel ซึ่งให้บริการโดยบริการเว็บโฮสติ้งของคุณ ผู้ให้บริการโฮสติ้งแบบแชร์ส่วนใหญ่เสนอ cPanel เป็นส่วนหนึ่งของบริการ (เราแนะนำ Hostinger พร้อมข้อเสนอพิเศษของเราโดยใช้รหัสคูปอง “ Codeless “)
3. ชื่อโดเมน : โดเมนที่จดทะเบียนหรือโดเมนย่อยที่คุณจะปรับใช้แอป React ของคุณ หากคุณยังไม่ได้ตั้งค่านี้ คุณสามารถใช้โดเมนที่มีอยู่หรือสร้างโดเมนย่อยผ่าน cPanel ได้

ขั้นตอนที่ 1: เตรียมแอป React.js ของคุณ

สร้างบิลด์การผลิต

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

1. เปิด Terminal : นำทางไปยังไดเร็กทอรีโปรเจ็กต์ React ของคุณโดยใช้เทอร์มินัลหรือพรอมต์คำสั่ง
2. รันคำสั่ง Build : npm run build หากคุณใช้ Yarn เป็นตัวจัดการแพ็กเกจ คุณจะใช้: yarn build คำสั่งนี้จะสร้างโฟลเดอร์ build ในไดเร็กทอรีโปรเจ็กต์ของคุณ โฟลเดอร์ build ประกอบด้วยไฟล์คงที่ทั้งหมดที่จำเป็นสำหรับการรันแอปพลิเคชันของคุณ รวมถึงไฟล์ HTML, CSS และ JavaScript

ดูตัวอย่าง Build (ไม่บังคับ)

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

1. ติดตั้งเสิร์ฟทั่วโลก : npm install -g serve
2. ให้บริการ Build : serve -s build คำสั่งนี้จะเริ่มเซิร์ฟเวอร์ภายในเครื่องและให้บริการแอปของคุณจากไดเร็กทอรี build เพื่อให้คุณสามารถดูตัวอย่างได้ในเบราว์เซอร์ของคุณ

ขั้นตอนที่ 2: ตั้งค่าสภาพแวดล้อม cPanel ของคุณ

เมื่อแอป React ของคุณพร้อมสำหรับการปรับใช้ คุณจะต้องกำหนดค่าสภาพแวดล้อม cPanel ของคุณ

สร้างโดเมนย่อย (ไม่บังคับ)

หากคุณต้องการให้แอป React ของคุณสามารถเข้าถึงได้ผ่านโดเมนย่อย (เช่น react.yourdomain.com ) คุณต้องสร้างแอปใน cPanel:

1. เข้าสู่ระบบ cPanel : ใช้พอร์ทัลเข้าสู่ระบบของผู้ให้บริการโฮสติ้งของคุณเพื่อเข้าถึง cPanel
2. ไปที่โดเมนย่อย : ในส่วนโดเมน คลิกที่ "โดเมนย่อย"
3. สร้างโดเมนย่อยใหม่ : ป้อนชื่อที่ต้องการสำหรับโดเมนย่อยของคุณและระบุไดเรกทอรีรากของเอกสาร หากคุณปล่อยให้การตั้งค่าเริ่มต้น cPanel จะสร้างไดเร็กทอรีใหม่ภายใต้ public_html พร้อมชื่อโดเมนย่อยของคุณ

อัปโหลดไฟล์บิลด์

เมื่อบิลด์ที่ใช้งานจริงพร้อมแล้ว คุณสามารถอัปโหลดไปยังเซิร์ฟเวอร์ของคุณได้

1. เข้าถึงตัวจัดการไฟล์ : ใน cPanel ค้นหา "ตัวจัดการไฟล์" ใต้ส่วน "ไฟล์"
2. นำทางไปยังไดเร็กทอรีที่ต้องการ : หากคุณสร้างโดเมนย่อย ให้นำทางไปยังไดเร็กทอรีที่เกี่ยวข้อง (เช่น public_html/react ) หากคุณกำลังปรับใช้บนโดเมนหลัก ให้ใช้ไดเร็กทอรี public_html
3. อัพโหลดโฟลเดอร์บิลด์ :
   • ขั้นแรก บีบอัดโฟลเดอร์ build ด์บนเครื่องของคุณให้เป็นไฟล์ ZIP
   • ใช้ปุ่ม "อัปโหลด" ในตัวจัดการไฟล์เพื่ออัปโหลดไฟล์ ZIP นี้ไปยังไดเร็กทอรีที่ต้องการ
   • เมื่ออัปโหลดแล้ว ให้คลิกขวาที่ไฟล์แล้วเลือก “แตกไฟล์” เพื่อขยายขนาดเนื้อหา​

ขั้นตอนที่ 3: กำหนดการตั้งค่าเซิร์ฟเวอร์

หลังจากอัปโหลดไฟล์บิลด์แล้ว คุณอาจต้องกำหนดการตั้งค่าเซิร์ฟเวอร์บางอย่าง โดยเฉพาะอย่างยิ่งหากแอป React ของคุณใช้การกำหนดเส้นทางฝั่งไคลเอ็นต์กับ React Router

ตั้งค่า .htaccess (ไม่บังคับ)

หากแอปของคุณใช้ React Router ซึ่งอาศัย API ประวัติ pushState ของ HTML5 เซิร์ฟเวอร์ของคุณจะต้องได้รับการกำหนดค่าให้จัดการคำขอได้อย่างถูกต้อง นี่เป็นสิ่งสำคัญอย่างยิ่งหากผู้ใช้สามารถนำทางไปยังเส้นทางอื่นที่ไม่ใช่หน้าแรกได้โดยตรง

1. ค้นหาหรือสร้าง .htaccess :
   • ในไดเรกทอรี public_html หรือโดเมนย่อย ให้ตรวจสอบว่ามีไฟล์ .htaccess หรือไม่
   • ถ้าไม่เช่นนั้น ให้สร้างไฟล์ใหม่ชื่อ .htaccess
2. เพิ่มกฎการกำหนดเส้นทาง :
   • เปิดไฟล์ .htaccess และเพิ่มการกำหนดค่าต่อไปนี้:bashCopy code Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]
   การกำหนดค่านี้ช่วยให้แน่ใจว่าคำขอทั้งหมดจะถูกส่งผ่านไฟล์ index.html ซึ่งจำเป็นสำหรับแอปพลิเคชันหน้าเดียว เช่น ที่สร้างด้วย React

ขั้นตอนที่ 4: การสรุปและการทดสอบ

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

ตรวจสอบสิทธิ์ของไฟล์

ตรวจสอบให้แน่ใจว่าไฟล์และไดเร็กทอรีมีสิทธิ์ที่ถูกต้องในการเข้าถึงโดยเว็บเซิร์ฟเวอร์ โดยทั่วไป ไดเร็กทอรีควรตั้งค่าสิทธิ์เป็น 755 และไฟล์เป็น 644

ทดสอบการปรับใช้

เยี่ยมชมโดเมนหรือโดเมนย่อยของคุณ (เช่น react.yourdomain.com ) ในเว็บเบราว์เซอร์เพื่อตรวจสอบว่าแอป React ของคุณทำงานได้อย่างราบรื่น ตรวจสอบหน้าและคุณสมบัติทั้งหมดเพื่อให้แน่ใจว่าทุกอย่างทำงานได้อย่างถูกต้อง

หากคุณพบปัญหาใดๆ เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์จะมีประโยชน์ในการวินิจฉัยปัญหา นอกจากนี้ บันทึกข้อผิดพลาดของ cPanel ยังให้ข้อมูลเชิงลึกเกี่ยวกับปัญหาฝั่งเซิร์ฟเวอร์อีกด้วย

การแก้ไขปัญหา

การปรับใช้แอป React บน cPanel อาจทำให้เกิดปัญหาได้ในบางครั้ง ต่อไปนี้เป็นปัญหาทั่วไปและวิธีแก้ปัญหา:

• ข้อผิดพลาดในการกำหนดเส้นทาง : หากการนำทางไปยังหน้าต่างๆ ของแอปของคุณส่งผลให้เกิดข้อผิดพลาด 404 ตรวจสอบให้แน่ใจว่าไฟล์ .htaccess ของคุณได้รับการกำหนดค่าอย่างถูกต้องเพื่อจัดการการกำหนดเส้นทางฝั่งไคลเอ็นต์
• ข้อผิดพลาดไม่พบไฟล์ : ตรวจสอบอีกครั้งว่าไฟล์ทั้งหมดจากโฟลเดอร์ build ได้รับการอัปโหลดอย่างถูกต้อง และอยู่ในไดเร็กทอรีที่ถูกต้องบนเซิร์ฟเวอร์ของคุณ
• การอนุญาตไฟล์ไม่ถูกต้อง : หากไฟล์ไม่โหลด ให้ตรวจสอบว่าตั้งค่าการอนุญาตไฟล์อย่างถูกต้อง ( 755 สำหรับไดเร็กทอรีและ 644 สำหรับไฟล์)
• ปัญหาการแคช : บางครั้งการเปลี่ยนแปลงอาจไม่ปรากฏขึ้นทันทีเนื่องจากการแคช ล้างแคชของเบราว์เซอร์ของคุณหรือลองเข้าถึงไซต์ในโหมดไม่ระบุตัวตนเพื่อดูว่าปัญหายังคงมีอยู่หรือไม่

บทสรุป

การปรับใช้แอปพลิเคชัน React.js บนเซิร์ฟเวอร์ที่โฮสต์ด้วย cPanel อาจดูท้าทายในตอนแรก โดยเฉพาะอย่างยิ่งหากคุณคุ้นเคยกับกระบวนการปรับใช้อัตโนมัติด้วยบริการต่างๆ เช่น Vercel หรือ Netlify หรืออ่านบทความของเรา: 10 ผู้ให้บริการโฮสต์ Node.js ที่ดีที่สุดประจำปี 2024 ( ถูกและฟรี) อย่างไรก็ตาม ด้วยการทำตามขั้นตอนที่ระบุไว้ในคู่มือนี้ คุณสามารถทำให้แอป React ของคุณเปิดใช้งานและทำงานบน cPanel ได้สำเร็จ

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

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

ลัดจอน โรชิ

Ludjon ผู้ร่วมก่อตั้ง Codeless มีความหลงใหลในเทคโนโลยีและเว็บอย่างลึกซึ้ง ด้วยประสบการณ์กว่าทศวรรษในการสร้างเว็บไซต์และพัฒนาธีม WordPress ที่ใช้กันอย่างแพร่หลาย Ludjon ได้สร้างชื่อเสียงให้กับตัวเองในฐานะผู้เชี่ยวชาญที่ประสบความสำเร็จในสาขานี้