[Reactjs] Deploy web to firebase hosting

ห่างหายกันไปหนึ่งอาทิตย์เนื่องจากกำลังสุ่มทำบางอยู่แต่มันยังไม่เสร็จ แต่จะใบ้ให้ว่ากำลังทำอะไรอยู่ เรากำลังสร้างเว็บ สักเว็บนึงขึ้นมาเป็นของตัวเอง ถึงแม้เว็บจะไม่ได้เอาไปขายแต่อย่างใด ฮ่าๆๆ

สำหรับคนที่อยากจะทดลองสร้างเว็บ แล้วอยากจะ deploy ขึ้นไป hosting สักตัว แต่….. Hosting แต่ละเจ้ามันเสียตังค์หน่ะ เราก็เลยต้องหาของฟรีถูกมะ แล้วของฟรีที่อยู่ใกล้ตัวก็คงจะไม่พ้น firebase แหละ ซึ่งเขามีบริการ Firebase Hosting ลองคลิกไปอ่านกันเองนะ

ซึ่งวันนี้ เราจะมาทำสเตปอย่าง ง่ายๆกัน เรียกได้ว่าทำแปปเดียวก็เสร็จ เพราะฉะนั้น เริ่ม!!

สร้าง React app ขึ้นมาก่อน

ง่ายๆเลยเพียงแค่ตวัดคำสั่งเข้าไป (Remark ไว้นะครับว่าผมใช้ Ubuntu ทำ)

npm install -g create-react-app

รูปที่ 1 แสดงผลลัพท์การ install

ลงเสร็จแล้วทำอะไร? <- เฉลย สร้างโปรเจคไงละจ้ะ ด้วยคำสั่ง เพราะว่าเราทำการ install create-react-app ไปแล้วเราเลยสามารถใช้คำสั่งนี้ได้

create-react-app <project_name>

รูปที่ 2 รอผลลัพท์การสร้างโปรเจค

run คำสั่งแล้วก็รอ ………..

รูปที่ 3 สร้างโปรเจคเสร็จ

“Happy hacking!” พร้อมลุยแล้วอยากรู้ว่าโปรเจคที่สร้างมาใช้งานได้ไหมใช่ไหมละ

npm start

จัดคำสั่งนี้ไป แต่ต้อง cd เข้าไปข้างในโปรเจคตัวเองก่อนนะ

รูปที่ 4 หน้าเว็บเริ่มต้น

เอาหล่ะ สิ่งที่พาทำผ่านมาหลายๆ คน อาจจะทำเป็นแล้วหรือไม่ก็ตาม สิ่งที่น่าสนใจมันกำลังจะเริ่มต่อจากนี้ต่างหากเล่า

Deploy firebase hosting

ก่อนจะ deploy ไปได้เราก็ต้องมี Project firebase ของตัวเองซะก่อน Click here เพื่อเข้าไปที่ Firebase Console ของคุณ แล้วก็กดสร้างโปรเจคซะ

รูปที่ 5 แสดงการปุ่มโปรเจค

รูปที่ 6 แสดงรายละเอียดการสร้าง

เอาละ ตอนนี้เราก็มีโปรเจคที่ firebase แล้ว นั้นทำให้เรามีที่สำหรับ deploy ละ กลับไปที่ terminal/cmd ของตัวเอง แล้วใช้คำสั่ง (ไม่มีตัวอย่างให้ดูนะ เพราะผมเคยทำไปแล้ว)

npm install -g firebase-tools

ทำคำสั่งนี้ไปทำไม? <- ก็เพื่อทำการลง Firebase CLI (Command Line Interface)

เอาไปใช้ทำอะไร <- ก็เพื่อเอาไว้เชื่อมต่อกับ firebase ของเรา

เชื่อมต่อยังไง <- ด้วยคำสั่ง

firebase login

กลับไปที่ react project ของเรา รันคำสั่ง

firebase init

ทำไปทำไม <- เพื่อสร้างค่า config ต่างๆ ของ firebase

รูปที่ 7 แสดงผลลัพท์คำสั่ง firebase init

เลือก hosting

รูปที่ 8 เลือกโปรเจค

ให้เลือกชื่อโปรเจคของตัวเองนะ ในที่นี่ผมตั้งชื่อโปรเจคตัวเองว่า example อ้าว!! แต่มันไม่มีหน่ะสิ ทำยังไงดี!!!!!

ง่ายมากๆ ก็อื่นไปหา Project-id ใน firebase console ซะก่อน ซึ่งอยู่ใน Project settings

รูปที่ 9 แสดง Project-id

ทีนี้เรามีคำสั่งพิเศษมาให้ เอ้า เบิ่ง

firebase -P <Project-ID> init

รูปที่ 10 ตั้งค่า

ให้เลือก hosting เหมือนเดิมนะ แล้วก็ตั้งค่าตาม รูปที่ 10 เลย แต่ว่ามันยังไม่จบเพียงเท่านี้หนะสิ ให้ไปที่ firebase.json แล้วแก้ค่า ใน key public ที่เป็นค่า public ให้เป็น build ซะ แบบนี้

รูปที่ 11 แสดง firebase.json

จากนั้นนะครับ ให้ รัน คำสั่ง

npm run build

เพื่อทำการ build code ในโปรเจคของเราซึ่งมันจะไปอยู่ใน folder build แล้ว folder นี้หละ ที่เราจะ deploy ไป ผ่านการ setting firebase.json เอาหล่ะ เหลือเพียงคำสั่งเดียวที่เราต้องทำ ซึ่งก็คือ

firebase deploy

รูปที่ 12 แสดงการ Deploy

เสร็จแล้วครับผมเอาลิ้งค์บรรทัดสุดท้ายไปลองได้เลย

รูปที่ 13 ผลลัพท์การdeploy

สำหรับคนที่ขึ้น error ตามรูปที่ 14 ให้ไปที่ firebase console ของตัวเองเข้าไปในโปรเจคที่กำลังทำอยู่ เลือกตรง hosting แล้วกด Get Start ซะ กดดู step ว่ามันทำยังไง เสร็จแล้ว มันก็จะได้เอง

รูปที่ 14 แสดงการ deploy failed

เป็นไงละ ง่ายไหม เร็วไหม เรื่องนี้ นี้ ถือว่าไม่ได้ใหม่เลยนะ มีคนทำ blog ไว้ เยอะแยะเลย หาความรู้ใน internet ง่ายนิดเดียว แต่อย่าเชื่อทุกอย่างใน internet หากไม่ได้ลองเองหรือหาคำตอบเอง

ขอบคุณและสวัสดี