บริการโฮสต์แอป React ฟรี 8 รายการ1 min read

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

เราสร้างแอปของเราใน Figma โดยใช้ Anima ปลั๊กอินซึ่งทำให้เราเพิ่มฟังก์ชันการทำงาน พฤติกรรมการตอบสนอง และสื่อสมบูรณ์ได้ ส่งออกโค้ด React ที่พร้อมสำหรับนักพัฒนาสำหรับ UI ทั้งหมด. เราใช้เวลาหนึ่งวันในการออกแบบและปรับใช้

จะโฮสต์แอป React ของคุณได้ฟรีที่ไหน

มีโซลูชันโฮสติ้งแบบไร้เซิร์ฟเวอร์จำนวนมากขึ้นเรื่อยๆ เนื่องจากมีเฟรมเวิร์กแบบอิงส่วนประกอบที่เพิ่มขึ้น เช่น React ปัจจุบัน Amazon AWS, Microsoft Azure และ Google Cloud เป็นแพลตฟอร์มที่โดดเด่น อย่างไรก็ตาม มีการเปลี่ยนแปลงที่เพิ่มมากขึ้นในด้านบริการโฮสติ้งส่วนหน้าโดยเฉพาะซึ่งต้องใช้ความพยายามน้อยลง และสามารถช่วยให้คุณพร้อมใช้งานได้ในเวลาอันรวดเร็ว และส่วนใหญ่รวม CI/CD ไว้ด้วย นี่คือบริการโฮสต์แอป React ฟรี 8 รายการที่เราทดสอบ:

1. เน็ตลิฟาย

2. Vercel

3. AWS ขยาย

4. ฐานไฟ

5. หน้า GitHub

6. หน้า GitLab

7. เรนเดอร์

8. ไฟกระชาก

มาเจาะลึกบริการโฮสติ้งแอป React ฟรีเหล่านี้โดยละเอียดยิ่งขึ้น และสาธิตวิธีที่เราปรับใช้แอป React โดยใช้บริการแต่ละรายการ 

เน็ตลิฟาย

พื้นหลัง

Netlify ก่อตั้งขึ้นในปี 2014 และมุ่งเน้นตั้งแต่เริ่มต้นในการโฮสต์เว็บไซต์แบบคงที่ มันดึงดูดนักพัฒนาจำนวนมากเนื่องจากมีระดับฟรีที่เอื้อเฟื้อ สองสามปีต่อมา Netlify เติบโตขึ้นจนกลายเป็นหนึ่งใน JAMstack และโฮสต์เว็บไซต์แบบคงที่ที่ได้รับความนิยมมากที่สุด

วิธีใช้

1. ตามหลักการแล้ว คุณจะต้องลงทะเบียนหรือลงชื่อเข้าใช้ด้วย GitHub สิ่งนี้ทำให้แน่ใจว่าคุณสามารถเข้าถึงที่เก็บข้อมูลบนโปรไฟล์ของคุณและปรับใช้ได้อย่างรวดเร็ว
2. เมื่อเข้าสู่ระบบแล้ว คลิก “เพิ่มไซต์ใหม่” และเลือก “นำเข้าโครงการที่มีอยู่”
3. จากนั้นคลิก GitHub เป็นผู้ให้บริการของคุณ
4. เลือก “เว็บไซต์ธนาคาร” หรือชื่อโครงการของคุณ
5. ปรับแต่งการตั้งค่าการใช้งานอย่างละเอียด (ในกรณีของเว็บไซต์ของเรา ค่าเริ่มต้นทำงานได้อย่างสมบูรณ์) จากนั้นคลิก “ปรับใช้ไซต์”
6. เมื่อใช้งานแล้ว คุณสามารถดูได้บน URL สาธารณะซึ่งคุณสามารถแชร์กับคนทั้งโลกได้ เย้!

นี่ แอปถ่ายทอดสดที่ใช้งานบน Netlify

ข้อดีและข้อเสีย

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

Vercel

พื้นหลัง

Vercel (เดิมชื่อ Zeit) ก่อตั้งขึ้นในปี 2015 และมีชื่อเสียงอย่างรวดเร็ว พวกเขาเป็นผู้ดูแล Next.js ซึ่งเป็นเฟรมเวิร์ก React ยอดนิยมสำหรับการสร้างเว็บไซต์ พวกเขาเสนอระดับฟรีให้กับเว็บไซต์ที่ไม่ใช่เชิงพาณิชย์ รวมถึงวิธีใช้เครือข่าย Edge สำหรับฟังก์ชันไร้เซิร์ฟเวอร์

วิธีใช้

1. เข้าสู่ระบบหรือลงทะเบียนกับ GitHub
2. คลิกที่เมนูแบบเลื่อนลง “เพิ่มใหม่…” และเลือก “โครงการ”                                                             
3. เลือก “เว็บไซต์ธนาคาร” หรือโครงการ React ที่คุณชื่นชอบ
4. เราเลือกใช้ค่าเริ่มต้นสำหรับการตั้งค่าการใช้งาน จากนั้นคลิก “ปรับใช้”
5. หลังจากนั้นไม่นาน เราก็ได้ใช้งานเว็บไซต์แล้ว

นี่ URL สด

ข้อดีและข้อเสีย

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

AWS ขยาย

พื้นหลัง

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

วิธีใช้

1. ลงทะเบียนหรือเข้าสู่ระบบ AWS จากนั้นค้นหา AWS Amplify แล้วคลิก “เริ่มต้นใช้งาน”
2. เลือก GitHub และอนุญาต (ฉันอนุญาตเฉพาะสำหรับ repo “เว็บไซต์ธนาคาร”)
3. เลือก repo ในส่วน “ที่เก็บข้อมูลที่อัปเดตล่าสุด”
   1. ในการตั้งค่า build เราจะต้องเปลี่ยน ไดเรกทอรีฐาน เพื่อให้แอปของเราเป็น เขต ชอบอย่างนั้น: จากนั้น การตั้งค่าบิลด์ควรมีลักษณะดังนี้:
4. ในขั้นตอนถัดไป คลิก “บันทึกและปรับใช้”
5. หลังจากนั้นสักครู่ เว็บไซต์จะพร้อมใช้งานและพร้อมใช้งาน

และเราก็ถ่ายทอดสด! นี่ URL.

ข้อดีและข้อเสีย

คุณต้องแก้ไข ไดเรกทอรีฐาน ในข้อกำหนดการใช้งาน—ไม่เป็นที่รู้จักตั้งแต่แกะกล่อง UI รู้สึกอึดอัดเล็กน้อย แต่นี่เป็นความชอบส่วนตัว มีศักยภาพอย่างมากสำหรับ AWS Amplify เนื่องจากบริการเว็บ AWS อื่นๆ มากมายอยู่ใกล้แค่เอื้อม

ฐานไฟ

พื้นหลัง

Firebase เป็นบริการของ Google ที่รู้จักกันเป็นอย่างดีว่าเป็นแพลตฟอร์มการจัดเก็บข้อมูลแบบเรียลไทม์ แต่ยังมีตัวเลือกการโฮสต์สำหรับเว็บไซต์แบบคงที่และไมโครเซอร์วิส Express.js หรือ API และรองรับการแสดงตัวอย่าง URL สำหรับสาขาที่ทีมของคุณกำลังทำงานอยู่ เช่นเดียวกับ Netlify, Vercel และอื่นๆ จะให้บริการเนื้อหาที่ปรับใช้ผ่านเครือข่าย CDN

วิธีใช้

1. ติดตั้ง เครื่องมือ firebase ด้วย การติดตั้ง npm -g firebase-tools.
2. เข้าสู่ระบบ Firebase ด้วย เข้าสู่ระบบฐานข้อมูล. เมื่อคุณเข้าสู่ระบบแล้ว คุณจะเห็นข้อความดังนี้:
3. ย้ายไปยังไดเร็กทอรีโครงการและรัน ฐานไฟเริ่มต้นคุณควรเห็นสิ่งนี้: เลือกตัวเลือกเพื่อกำหนดค่าไฟล์สำหรับ Firebase Hosting พร้อมการใช้งานเสริม GitHub Action จากนั้น คุณสามารถสร้างโปรเจ็กต์ได้โดยตรงจาก CLI หรือใช้ Firebase UI เพื่อทำโปรเจ็กต์แล้วเชื่อมต่อในภายหลัง เราสร้างโปรเจ็กต์จากบรรทัดคำสั่ง และนี่คือวิธีที่เราตอบคำถามผลลัพธ์:                                                                                                                  หลังจากนั้น ไฟล์ `firebase.json` และ `.firebaserc` แบบธรรมดาจะถูกสร้างขึ้น
4. จากนั้นวิ่ง การปรับใช้ฐานไฟ เพื่อปรับใช้ไฟล์จาก เขตไดเรกทอรี หากไดเร็กทอรีหายไป ตรวจสอบให้แน่ใจว่าได้รันแล้ว บิลด์การรัน NPM ขั้นแรกให้สร้างไฟล์ ที่ การปรับใช้ฐานไฟ คำสั่งควรสร้างเอาต์พุตคล้ายกับตัวอย่างด้านล่าง:

ตอนนี้คุณสามารถ ดูเว็บไซต์ บน URL ที่ให้มา เย้! 

ข้อดีและข้อเสีย

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

หน้า GitHub

พื้นหลัง

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

วิธีใช้

โปรดทราบว่าคุณต้องแก้ไข แอพ.jsx ที่เราโทรไป เราเตอร์ และเพิ่ม ชื่อฐาน เพื่อให้ตรงกับชื่อ repo จึงเป็นเช่นนี้แล แอพ.jsx ควรดู:                                                                                        เราต้องเปลี่ยน ชื่อฐาน เนื่องจากเพจ GitHub จะปรับใช้เว็บไซต์กับ URL ของแบบฟอร์มนี้ `https://GITHUB_USERNAME.gitlab.io/REPO_NAME` เว็บไซต์จะทำงานไม่ถูกต้องหากไม่มีการตั้งชื่อฐานสำหรับ ตอบสนองเราเตอร์ dom.

1. หลังจากโค้ดเปลี่ยนแปลง เราก็ต้องทำการติดตั้ง gh-เพจ แพ็คเกจด้วย:
2. และเพิ่มก ปรับใช้ล่วงหน้า และก ปรับใช้ สคริปต์ไปที่ แพ็คเกจ.json:
3. จากนั้นเราก็วิ่ง การปรับใช้การรัน NPM. มันจะทริกเกอร์ บิลด์การรัน NPM และมันจะใช้ gh-เพจ เพื่อเผยแพร่เนื้อหาของ เขต ไปยังสาขาแยกบน GitHub เรียกว่า gh-เพจ.
4. สุดท้ายตรวจสอบว่า gh-เพจ ใช้สำหรับเพจ GitHub ดังต่อไปนี้:

นี่ URL สด

ข้อดีและข้อเสีย

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

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

หน้า GitLab

พื้นหลัง

เช่นเดียวกับ GitHub GitLab มีโซลูชันโฮสติ้งของตัวเอง และเรียกมันว่า GitLab Pages ฉันต้องมอบให้พวกเขา การตั้งค่าการปรับใช้อย่างต่อเนื่องกับ GitLab Pages ง่ายกว่าการตั้งค่าสำหรับ GitHub Pages

วิธีใช้

1. ลงทะเบียนหรือเข้าสู่ระบบ GitLab
2. เพิ่ม repo ลงใน GitLab หากคุณยังไม่มี คุณสามารถ แยกอันที่ฉันเพิ่มไว้ที่นั่น 
   คล้ายกับเพจ GitHub คุณต้องแก้ไขไฟล์ แอพ.jsx ที่เราโทรไป เราเตอร์ และเพิ่ม  ชื่อฐาน เพื่อให้ตรงกับชื่อ repo นี่คือการเปลี่ยนแปลงครั้งสุดท้าย:                                                               เราต้องเปลี่ยน ชื่อฐาน เนื่องจากหน้า GitLab จะปรับใช้เว็บไซต์กับ URL ของแบบฟอร์มนี้: https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. เว็บไซต์จะทำงานไม่ถูกต้องหากไม่มีการตั้งชื่อฐานสำหรับ ตอบสนองเราเตอร์ dom.
3. เมื่อคุณแก้ไขและผลักดันโปรเจ็กต์ไปที่ GitLab แล้ว ให้ไปที่การตั้งค่า > หน้า จากนั้นคุณจะได้รับการต้อนรับด้วยวิซาร์ดสี่ขั้นตอนเพื่อปรับใช้ repo บนหน้า GitLab 
4. ขั้นตอนแรกในตัวช่วยสร้างคือการป้อนอิมเมจบิลด์ เราจะใช้ Node.js LTS
5. ต่อไปเราจะป้อนคำสั่ง pre-build ที่ เวลา 15.00 น จะเพียงพอแล้วที่นี่
6. ตอนนี้สำหรับขั้นตอนการสร้าง เราจำเป็นต้องผ่าน — –dist-dir สาธารณะ เพราะ GitLab Pages คาดว่าจะมีเว็บไซต์ในตัว สาธารณะ ไดเรกทอรี คุณไม่สามารถหนีไปกับไดเร็กทอรีอื่นได้ ขออภัย
7. กระทำการที่สร้างขึ้นใหม่ .gitlab-ci.yml ไฟล์ที่บอก GitLab ถึงวิธีปรับใช้เว็บไซต์ของคุณ
8. ตอนนี้ ไปที่ส่วน CI/CD -> ไปป์ไลน์ของ repo และสังเกตการทำงานของไปป์ไลน์ที่เพิ่มเข้ามาใหม่
9. หลังจากผ่านไประยะหนึ่ง งานไปป์ไลน์จะเสร็จสิ้นและเว็บไซต์จะถูกปรับใช้บนเพจ GitLab

นี่. ผลลัพธ์

ข้อดีและข้อเสีย

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

เรนเดอร์

พื้นหลัง

Render เป็นเด็กใหม่ในบล็อกที่เปิดตัวในปี 2019 โดยพยายามขัดขวางวิธีที่ผู้คนใช้บริการของพวกเขา (รวมถึงเว็บไซต์แบบคงที่) จนถึงตอนนี้พวกเขาทำได้ดีและมีจำนวนมากขึ้นเรื่อยๆ

วิธีใช้

1. ลงทะเบียนหรือเข้าสู่ระบบ Render
2. สร้างเว็บไซต์แบบคงที่ใหม่โดยกดปุ่ม “ใหม่” และเลือก “ไซต์แบบคงที่”
3. เลือก repo ที่คุณต้องการปรับใช้
4. เก็บไว้ เส้นด้าย; สร้างเส้นด้าย คำสั่ง build ในการตั้งค่า build น่าเสียดายที่มันไม่ได้ผลด้วย เวลา 15.00 น. ถึง; บิลด์การรัน NPM เช่นเดียวกับบริการอื่นๆ ทำ เปลี่ยน “เผยแพร่ไดเรกทอรี” เป็น เขต และคลิก “สร้างไซต์แบบคงที่”
5. หลังจากนั้นสักครู่ Render จะปรับใช้โค้ด

นี่ URL สดจาก Render

ข้อดีและข้อเสีย

มันเร็วมาก แต่มันใช้งานไม่ได้กับโปรเจ็กต์ของเราที่ใช้คำสั่ง `npm ci` และ `npm run build` มีเพียง ‘เส้นด้าย’ เท่านั้นที่ดูเหมือนว่าจะได้ผล

ไฟกระชาก

พื้นหลัง

Surge มีมาระยะหนึ่งแล้ว บริการของพวกเขาใช้งานง่ายและใช้เวลาเพียงหนึ่งหรือสองคำสั่งเท่านั้นในการปรับใช้เว็บไซต์แบบคงที่ของคุณ ฟรี แต่เสนอแผนชำระเงิน 30$/เดือน ความอดทนของเครื่องมือคือสิ่งที่ทำให้มันเปล่งประกาย ไม่จำเป็นต้องตั้งค่าที่ซับซ้อน เพียงติดตั้ง `surge` และรันด้วย `surge`

วิธีใช้

1. เพื่อเตรียมพร้อมวิ่ง บิลด์การรัน NPM เพื่อสร้างไฟล์คงที่ภายใน เขต ไดเรกทอรี ที่ ไฟกระชาก จะใช้สิ่งเหล่านี้เพื่อการปรับใช้
2. วิ่ง การติดตั้ง npm — การกระชากทั่วโลก
3. จากนั้นวิ่ง ไฟกระชาก.

บางสิ่งที่ควรทราบ:
หากนี่เป็นครั้งแรกที่คุณใช้งาน คุณจะต้องสร้างบัญชีกับ Surge ไม่ต้องกังวล มันง่าย เพียงกรอกอีเมลและรหัสผ่านที่ต้องการ

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

จากนั้น ป้อน URL ในอนาคตของเว็บไซต์ของคุณ ลองทำอะไรที่ไม่เหมือนใครเพราะอะไร ไฟกระชาก ข้อเสนอไม่ได้ผลสำหรับฉัน

หลังจากอินพุต URL แล้ว ไฟกระชาก จะปรับใช้เนื้อหาจาก เขต ไปยัง URL ที่ระบุ นี่คือสิ่งที่ฉันได้รับ:

ข้อดีและข้อเสีย

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

ถึงเวลาปรับใช้กับบริการโฮสติ้งแต่ละรายการ

บริการโฮสติ้ง React ฟรี 3 อันดับแรกของเรา

1. เน็ตลิฟาย
2. Vercel
3. ไฟกระชาก

ประเด็นสำคัญ

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

สร้างส่วนหน้าของคุณโดยอัตโนมัติและจัดส่งแอปของคุณเร็วขึ้น 10 เท่า เรียนรู้เพิ่มเติม.