Deploy เว็บไซต์ React ฟรีๆ ด้วย Firebase Hosting

วันนี้มานำเสนอบทความเกี่ยวกับการ Deploy งานของเราขึ้น Hosting กันครับ โดยทั่วๆไปแล้ว เวลาเราทำเว็บไซต์ซักเว็บนึง และอยากให้มันออนไลน์ ให้ทุกๆคนเข้าถึงได้ สิ่งที่เราต้องมีก็คือ Domain และ Hosting ใช่มั้ยละครับ

และแน่นอน การจะหา Hosting เพื่อฝากไฟล์เว็บของเราไว้ บางทีก็มีค่าใช้จ่ายในการเช่าใช้งาน แต่ก็ยังมีหลายๆที่ที่ไม่เสียค่าใช้จ่าย

ตัวอย่าง Hosting ในปัจจุบันที่สามารถใช้งานได้ฟรีๆ (ส่วนใหญ่จะเป็น Static website)

• Github Pages
• Netlify
• Now
• Firebase Hosting
• Surge

ซึ่งวันนี้บทความนี้จะพาไปรู้จัก Hosting ฟรีๆ ที่ชื่อว่า Firebase Hosting กันครับ สิ่งที่ต้องมีคือ สามารถใช้งาน Terminal เพื่อพิมพ์คำสั่ง หรือ Power Shell ได้

เริ่มต้นโปรเจ็ค React

ผมสร้างโปรเจ็ค React จาก Create React App ขึ้นมาผ่าน Terminal ดังนี้

1
npx create-react-app react-with-firebase-hosting
2

3
cd react-with-firebase-hosting
4
yarn start

ในบทความนี้ assume ว่าทุกๆคน มีเว็บ React และต้องการจะอัพขึ้น Hosting ฉะนั้น ก็จะข้ามส่วนตรงนี้ไปนะครับ ให้คิดว่าตัวโปรเจ็คที่สร้างนี้ เป็นเว็บที่เรากำลังพัฒนาอยู่

ซึ่งโดยปกติแล้ว สิ่งที่เราจะอัพขึ้น Hosting ก็คือ static file ต่างๆ (พวก HTML, CSS, JavaScript) ไม่ใช่ไฟล์​ src/** ของ React นะครับ การที่เราจะได้ไฟล์ static ตัว Create React App ก็จะมี script ที่ทำให้เรา build ได้ง่ายๆ ด้วยคำสั่ง

1
yarn build

ตัว Create React App ก็จะ generate folder ชื่อว่า build ให้เรานั่นเอง ซึ่งใน build เนียแหละ มันก็คือไฟล์เว็บไซต์ของเราที่เขียนด้วย React

สิ่งที่เราจะทำต่อมาคือ อัพเจ้า build ไปไว้ที่ Hosting

สร้าง Firebase Hosting

ต่อมาก็คือใช้ Firebase Hosting ซึ่งเป็นบริการนึงของ Firebase

ขั้นตอนแรกก็คือสร้าง Firebase App ขึ้นมาก่อน ในที่นี้ผมใช้ชื่อว่า hello-react

เมื่อสร้าง Project บน Firebase เสร็จ ผมก็มาที่เมนู Sidebar ด้านข้าง ทำการเลือก Develop => Hosting

จากนั้นตัวระบบก็จะมี Popup ขึ้นมาให้ทำตาม เริ่มจาก ติดตั้ง firebase--tools

1
npm install -g firebase-tools

จากนั้นก็ทำการ login และ init firebase project

1
firebase login

ก็จะมี Popup ขึ้นมา เพื่อให้เราทลงชื่อเข้าใช้ด้วย Email และเข้าถึง Firebase Console ได้ ก็กด Allow (หรืออนุญาต)

และหน้า Terminal หลังจากเรากดลงชื่อเข้าใช้และ Allow แล้ว ก็จะมี ข้อความบอกใน Terminal ว่า Success

1
Waiting for authentication...
2

3
✔  Success! Logged in as devahoy@gmail.com

ต่อมา

1
firebase init

เพื่อทำการ สร้าง Project Firebase ผ่าน CLI

1
######## #### ########  ######## ########     ###     ######  ########
2
##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
3
######    ##  ########  ######   ########  #########  ######  ######
4
##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
5
##       #### ##     ## ######## ########  ##     ##  ######  ########
6

7
You're about to initialize a Firebase project in this directory:
8

9
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choi
10
ces.
11
◯ Database: Deploy Firebase Realtime Database Rules
12
◯ Firestore: Deploy rules and create indexes for Firestore
13
◯ Functions: Configure and deploy Cloud Functions
14
❯◉ Hosting: Configure and deploy Firebase Hosting sites
15
◯ Storage: Deploy Cloud Storage security rules

ให้เราเลื่อนไปที่ Hosting และกด spacebar เพื่อเลือก (สังเกตปุ่มกลมๆขาวๆ) จากนั้นกด Enter

1
? What do you want to use as your public directory?

พิมพ์เป็น build เพราะว่า yarn build มันจะ build static ไปที่โฟลเดอร์ build (default กรณีไม่เปลี่ยนคือ public)

1
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

พิมพ์ n เพื่อไม่ต้องให้มันเขียนทับไฟล์ที่มีอยู่แล้ว

1
i  Writing configuration info to firebase.json...
2
i  Writing project information to .firebaserc...
3

4
✔  Firebase initialization complete!

เมื่อ Firebase init เสร็จเรียบร้อยแล้ว จะได้ไฟล์ม 2 ไฟล์ คือ firebase.json และ .firebaserc

ซึ่งไฟล์ firebase.json เราสามารถเปลี่ยน public path หรือตั้งค่าต่างๆเพิ่มได้ เพราะเป็นรูปแบบ JSON หน้าตาแบบนี้

1
{
2
  "hosting": {
3
    "public": "build",
4
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
5
  }
6
}

ต่อมาสั่ง Firebase Deploy

1
firebase deploy

ในกรณีที่เราไม่ได้เลือก default project จะเกิด error ขึ้น คือ

1
Error: No project active. Run with --project <projectId> or define an alias by

ให้เราทำการ ระบุ project ด้วย โดยการใช้คำสั่ง

1
firebase use --add

และเลือก Project ที่เราสร้างไว้ใน Firebase Console ทดลอง Deploy อีกครั้ง

1
firebase deploy
2

3

4
✔  Deploy complete!
5

6
Project Console: https://console.firebase.google.com/project/hello-react-a9d57/overview
7
Hosting URL: https://hello-react-a9d57.firebaseapp.com

ตอนนี้เว็บผมก็ Host บน Firebase เรียบร้อยแล้ว โดยใช้ไฟล์ static จากโฟลเดอร์ build นั่นเอง

ลองเข้าหน้าเว็บ https://hello-react-a9d57.firebaseapp.com

แต่ว่าทำไมไม่เป็น React นะ?

เพราะว่าเรายังไม่ได้ build ตัว React ของเรานั่นเองครับ โฟลเดอร์​ build เลยมีแค่ไฟล์ที่ Firebase ใส่มาให้

ทำการ Build ด้วยคำสั่ง

1
yarn build

จากนั้น Deploy อีกรอบ เป็นอันเรียบร้อย

1
firebase deploy

นอกจากนี้ ตัว Firebase Console ยังมีหน้า Hosting ให้เราดู Stat ด้วยว่าเว็บมีการดาวน์โหลดเท่าไหร่ ดู History การ Deploy รวมถึงสามารถ Rollback กลับไปเวอร์ชั่นเก่ากว่าได้ แถมสามารถ Connect Domain เพื่อ Custom domain เองได้

สำหรับบทความนี้ก็เป็นบทความง่ายๆ แนะนำสำหรับมือใหม่เนอะ ถือเป็นบทความต่อยอดจาก Video ที่ผมทำในคอร์สน React and Redux for Beginners ครับ เผื่อหลายๆคนติดปัญหาการ Deploy ขึ้น Firebase Hosting

Happy Coding ❤️