Hosting ฟรี! กับ Firebase Hosting
Firebase คืออะไร
Firebase คือบริการ backend และ platform จากทาง Google พูดง่ายๆ ก็คือ เราไม่จำเป็นต้องไปเขียนโค้ดในระดับ backend เอง อย่างเช่น เราต้องการให้เว็บของเราติดต่อกับฐานข้อมูลได้ เราก็ไม่จำเป็นต้องเขียนโค้ดที่เชื่อมต่อฐานข้อมูลเอง เพราะทาง Firebase มีบริการสำหรับเชื่อมต่อฐานข้อมูลให้นำไปใช้ได้เลย ซึ่งจริงๆ แล้ว Firebase มีบริการอยู่หลากหลาย สำหรับใครที่สนใจเพิ่มเติมสามารถเข้าไปดูได้ที่ https://firebase.google.com/products/
เอาล่ะ มาเข้าเรื่องกันเลยดีกว่า วันนี้จะมาสอนการใช้ Firebase Hosting ซึ่งเป็นอีกหนึ่งในบริการของ Google Firebase เขานั่นเอง
สิ่งที่ต้องเตรียม
- Folder ที่เราเก็บไฟล์ที่จะ upload หรือ deploy ขึ้น host
- Google account
- Node.js (สำหรับคนที่ยังไม่ได้ install สามารถเข้าไปดาวน์โหลดได้ที่ https://nodejs.org)
ถ้าพร้อมแล้วเรามาเริ่มกันเลยดีกว่าค่
1. เข้าไปที่ https://firebase.google.com/
2. คลิกที่ GO TO CONSOLE ด้านมุมขวาบนค่ะ
3. ทำการ Login เข้าสู่ระบบของ Google
4. สร้าง Project ของเราขึ้นมา คลิกที่ Add project
5. ตั้งชื่อ project และเลือกประเทศ จากนั้นคลิก CREATE PROJECT
6. จะได้หน้า console ของเราขึ้นมาแบบนี้ จากนั้นคลิกที่ Add Firebase to your web app
7. จะได้แบบนี้ขึ้นมา
ซึ่งโค้ดนี้มีไว้สำหรับนำไปแปะในไฟล์ที่เราต้องการจะ upload ขึ้น host (ถ้าใครมีหลายๆ หน้า แนะนำว่าให้สร้างไฟล์ .js ขึ้นมาเก็บโค้ดนี้ไว้ก่อน แล้วค่อย refer เข้าไปในแต่ละหน้านะคะ)
ยกตัวอย่างของอายนะคะ อายก็จะสร้างไฟล์ .js ขึ้นมาหนึ่งไฟล์ สำหรับเก็บโค้ดในส่วน config ไว้ (copy มาเฉพาะส่วน config นะคะ ในส่วนของบรรทัดแรก เราจะไปแปะไว้ในไฟล์ html แต่ละไฟล์ของเราค่ะ)
จากนั้น refer โค้ดบรรทัดแรกกับไฟล์ที่เราสร้างไว้เข้าไปที่ไฟล์ html ของเรา ซึ่งแนะนำว่าให้อยู่ด้านบนสุดของทุกๆ script นะคะ
8. หลังจากจัดการกับโค้ดเรียบร้อยแล้วก็เข้าสู่การ upload หรือ deploy ขึ้น host โดยคลิกที่แท็บ Hosting ตรงเมนูด้านซ้ายมือค่ะ
คลิกที่ GET STRAT
จะได้หน้าต่าง set up hosting ขึ้นมา
9. คลิกที่ start window ของเราแล้ว search Node.js command prompt จากนั้นเปิดขึ้นมา จะได้หน้าตาแบบนี้
10.Set up ตามที่หน้าต่าง set up hosting บอก ขั้นแรกคือ install firebase tools ก่อน เพื่อที่เราจะได้สามารถใช้คำสั่งของ firebase ได้
พิมพ์ใน command > npm –g firebase-tools แล้วกด enter
รอโหลดให้เสร็จ
โหลดเสร็จแล้วจะมีคำว่า success ขึ้นมาแบบนี้
11. กลับไปที่หน้าต่าง set up hosting แล้วคลิก CONTINUE แล้วพิมพ์คำสั่งตามนี้ทีละ step
Sign in เข้า google ก่อน พิมพ์คำสั่ง firebase login แล้วกด enter
จะเจอคำถามว่าจะอนุญาตให้ใช้ anonymous CLI ไหม ตรงนี้ พิมพ์ Y แล้วกด Enter ไปเลยค่ะ
ทีนี้ก็จะเด้งหน้าต่างให้เรา login google account ขึ้นมา ก็ทำการ login ด้วย account ที่เราสร้าง project ไว้ เมื่อทำการ login เรียบร้อยแล้วจะได้หน้าตาแบบนี้ขึ้นมา เย้! Login ได้แล้ว ไปลุยกันต่อเลยค่ะ
12. ต่อไปจะเป็นการ set เกี่ยวกับ project เรา พิมพ์คำสั่ง firebase init แล้วกด enter
ทีนี้จะเจอคำถามว่า พร้อมจะดำเนินการหรือยัง พิมพ์ Y แล้วกด Enter ไปเลยค่
จากนั้นเขาก็จะถามว่าเราอยากจะ set อะไรบ้าง ตรงนี้ให้เลือก Database กับ Hosting
อย่าลืมกด space bar ให้ขึ้นเป็นเครื่องหมาย * แบบนี้ จากนั้นกด Enter
ทีนี้เขาก็จะให้เราเลือก ว่าจะ upload ขึ้น host ของ project ไหน เราก็เลือก project ที่เราสร้างไว้ก่อนหน้านี้ แล้วกด Enter ค่ะ
จากนั้นเขาจะถามว่าไฟล์ไหนที่จะใช้สำหรับ Database ในที่นี้ถ้าเรายังไม่มีก็กด Enter ไปเลยค่ะ ระบบจะสร้างไฟล์ database.rules.json ขึ้นมาให้เราเอง
จากนั้นระบบจะถามว่าเราต้องการใช้ Folder ไหน upload ไฟล์ขึ้นไป ถ้าเราไม่ระบุชื่อ folder ระบบจะสร้าง folder ที่ชื่อว่า public มาให้ค่ะ ซึ่งส่วนใหญ่แล้ว folder ที่ถูกสร้างขึ้นมาจะไปอยู่ที่ folder user ในเครื่องเราค่ะ
ยกตัวอย่างของอายจะระบุชื่อ Folder ไปเลยนะคะ คือ project 1 นั่นเองค่ะ จากนั้นกด Enter
จากนั้นระบบจะถามว่าจะให้รวมทุกอย่างไว้ที่ไฟล์ index.html เลยหรือไม่ ซึ่งถ้าเรามีหลายๆ ไฟล์ ไม่อยากรวมไว้ที่เดียวก็พิมพ์ N ไปค่ะ ส่วนใครที่มีอยู่ไฟล์เดียวก็พิมพ์ Y แล้วกด Enter ไปได้เลยค่ะ
สำหรับใครที่มีไฟล์ index.html อยู่แล้ว ระบบจะถามว่าจะให้บันทึกไฟล์ทับเข้าไปเลยรึเปล่า อันนี้ต้องบอกก่อนว่า เมื่อเราทำการ set เรียบร้อย ระบบจะสร้างไฟล์ index.html มาให้เราหนึ่งไฟล์ หลังจากนั้นเราค่อยเอาไฟล์เราไปทับทีหลังค่ะ ในที่นี้ของอายมันซ้ำกันเนาะ อายก็จะพิมพ์ N ไปก่อน เพื่อที่เขาจะได้ไม่บันทึกทับของเรา
เย้! ตั้งค่าเสร็จเรียบร้อยแล้ว จะขึ้นแบบนี้
13. ทำการ upload หรือ deploy กันเล้ยยยย พิมพ์คำสั่ง firebase deploy แล้วกด enter
Deploy complete!
14.เปิดเว็บบน host ที่เราเพิ่ง deploy ไปขึ้นมาดูด้วยคำสั่ง firebase open
เลือก Hosting: Deploy Site แล้วกด Enter
จะได้หน้าตาแบบนี้ขึ้นมา ไม่ต้องตกใจว่าทำไมไม่เป็นหน้าเว็บเรา นี่เป็นหน้าแรกที่ระบบสร้างขึ้นมา จะเป็นไฟล์ index.html เดี๋ยวเราจะเอาไฟล์เรามาวางทับแล้วค่อย deploy ใหม่ค่ะ
15. เอาไฟล์ที่เราต้องการ upload ขึ้น host วางไว้ในโฟลเดอร์ที่เราตั้งค่าไว้ข้างต้น แล้วใช้คำสั่ง firebase deploy ใหม่ จากนั้นให้เปิดดูด้วยคำสั่ง firebase open>Hosting: Deploy Site เหมือนเดิม
ทีนี้ก็จะได้หน้าตาเว็บของเราขึ้นมาแล้วค่ะ (อายยกตัวอย่างหน้า login เนอะ)
ถ้าใครไม่อยากใช้คำสั่ง firebase open ก็สามารถเข้าไปดูที่ Hosting ใน console ของเราก็ได้ค่ะ จะมี link เว็บ hosting ของเราอยู่ สามารถคลิกเข้าไปได้เลย
จบแล้ววว สำหรับการ upload เว็บไซต์ของเราขึ้น host แบบฟรีๆ กับ Firebase Hosting ถ้าใครติดขัดตรงไหนสามารถ comment เข้ามาถามได้เลยนะคะ หรือถ้าใครทำตามแล้วได้ผลยังไงก็มาเล่าให้กันฟังบ้างน้าา แล้วเจอกันใหม่บทความหน้าค่ะ
