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

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

990฿คอร์สสอนสร้างเว็บไซต์ HTML/CSS สำหรับมือใหม่ + พร้อม Workshop


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

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

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

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

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

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

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

cd react-with-firebase-hosting
yarn start

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

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

yarn build

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

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

สร้าง Firebase Hosting

Firebase

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

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

Create project

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

Setup Hosting

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

npm install -g firebase-tools

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

firebase login

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

Sign in

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

Waiting for authentication...

✔  Success! Logged in as [email protected]

ต่อมา

firebase init

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

######## #### ########  ######## ########     ###     ######  ########
##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
######    ##  ########  ######   ########  #########  ######  ######
##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
##       #### ##     ## ######## ########  ##     ##  ######  ########

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

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

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

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

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

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

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

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

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

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

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

ต่อมาสั่ง Firebase Deploy

firebase deploy

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

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

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

firebase use --add

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

firebase deploy


✔  Deploy complete!

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

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

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

Hosting Firebase

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

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

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

yarn build

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

firebase deploy

Hosting with Firebase

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

Hosting dashboard

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

คอร์สเรียน React ออนไลน์ + 3 Workshops สนใจสามารถเข้าไปดูรายละเอียดได้ครับ

Happy Coding ❤️
Chai Phonbopit

Chai Phonbopit: Software Engineer แห่งหนึ่ง • ผู้ชายธรรมดาๆ ที่ชื่นชอบ Node.js, JavaScript, React และ Open Source มีงานอดิเรกเป็น Acoustic Guitar และ Football นอกจากเขียนบล็อคที่เว็บนี้แล้ว ก็มีเขียนที่ https://medium.com/@Phonbopit ครับ