สร้างเวปโฮสติ้งฟรีด้วย Firebase

สร้างเวปโฮสติ้งฟรีด้วย Firebase

ปรกติถ้าเราอยากมีเวปส่วนตัวหรือสำหรับบริษัทซักอันก็ต้องไป

1. จดชื่อเวปเช่น www.my_web.net ค่าจดก็ต่างกันไป .com, .net.org ฯลฯ
2. เช่าเวปเซิร์ฟเวอร์เป็นที่สำหรับวางไฟล์ ราคาก็ต่างกันไปตามเนื้อทีความสามารถ

เดี๋ยวนี้ไม่ค่อยมีเวปเซิร์ฟเวอร์ฟรีให้ใช้ซักเท่าไหร่ มักเป็นพวก blog ฟรีซะมากกว่า ของฟรีก็มักมีโฆษณาแทรก บางคนคงไม่ถูกใจเท่าใดนัก Firebase เป็นฐานข้อมูลแบบหนึ่ง มีเวปเซิร์ฟเวอร์ในตัว  เราวางได้แค่ไฟล์ static เวป พวก HTML,CSS,JS,JPG,PNG แต่ไม่สามารถเขียนโปรแกรมฝั่ง Server อย่าง ASP , PHP ฯลฯ ได้ 
    สำหรับ Firebase เราสามารถเขียนเป็นแอปมือถือหรือเวปแอป ซึ่งจะส่งข้อมูลหรือคำสั่งไปเก็บไว้ที่ Firebase และส่งต่อไปที่อุปกรณ์ IOT หรืออุปกรณ์ IOT ส่งข้อมูลจากเซนเซอร์กลับมาที่ Firebase แล้ว Firebase ส่งข้อมูลกลับมาที่แอป ในบทความนี้ไม่ได้สอนเขียนโปรแกรมแต่จะให้ทำเป็นเวปธรรมดาเท่านั้น ทำขั้นตอนนี้

1. สมัครเข้าใช้ firebase
2. สร้างโปรเจ็ก
3. ติดตั้ง Firebase Tools
4. วางไฟล์ HTML และเรียกใช้งานหน้าเวปทดสอบ
5. นำหน้าที่ทดสอบแล้วขึ้นเวปของเรา

สมัครเข้าใช้ firebase 

ต้องมี gmail เสียก่อน(ผู้ใช้ G-Suite สามารถใช้ได้ทันทึ) แล้วไปที่  https://firebase.google.com/

เลือกอันไหนก็ได้ (GET START, ไปที่คอนโซล ลงชื่อเข้าใช้) ถ้ายังไม่ sign-in เข้า gmail มันจะบอกให้ป้อนอีเมลล์และรหัสผ่าน หลังจากนั้นจะเข้าหน้าสร้างโปรเจ็ก

สร้างโปรเจ็ก

กดเครื่องหมาย + เพื่อเพิ่มโครงการ 

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

หลังจากกดปุ่ม ต่อไป ก็กดปุ่ม สร้างโครงการ

เรียบร้อยแล้วกดปุ่มต่อไป

เราสร้างโปรเจ็กสำหรับเวปเราสำเร็จแล้ว

ถ้ากดเข้าไปตรงที่ขีดเส้นแดงตามภาพจะมีข้อมูลของเวปเรา
authDomain: "oom-portfolio.firebaseapp.com",
databaseURL: "https://oom-portfolio.firebaseio.com"
เราได้เป็น เป็นลิงค์เวปของเรา แต่ยังใช้งานไม่ได้นะ เราต้องเอาไฟล์ HTML CSS JS ภาพไปใส่ก่อนถึงจะใช้งานได้

ติดตั้ง Firebase Tools

    เราจะเอาไฟล์ขึ้นเวปเซิร์ฟเวอร์ ต้องติดตั้งโปรแกรมช่วยก่อน เราทำได้ทั้ง Windows, Mac และ Linux ในตัวอย่างนี้จะทำบนวินโดว์  Mac และ Linux ใช้คำสั่งเดียวกัน
 Firebase Tools ติดตั้งผ่าน npm ต้องติดตั้ง Node.js เสียก่อน ไปที่ https://nodejs.org/en/download/ เลือกตัวติดตั้งให้ตรงกับระบบปฎิบัติการของคุณ หลังติดตั้งเสร็จให้เรียก Command Prompt ด้วยสิทธิ์ Administrator ตรงค้นหาของวินโดว์พิมพ์ cmd คลิ้กขวาเลือก Run as administrator สำหรับ Linux และ Mac ให้เรียก Terminal มาแทน



พิมพ์คำสั่งข้างล่างเพื่อติดตั้ง Firebase Tools ถ้าเป็น Mac/Linux ให้ใช้ sudo นำหน้าคำสั่งข้างล่าง

• npm install -g firebase-tools

หลังจากติดตั้งเสร็จเปิด cmd ขึ้นมาโดยไม่ต้องใช้สิทธิ์ของ Administrator ก็ได้
Login เข้าสู่ระบบ Firebase ด้วยคำสั่งด้านล่าง มันจะมีหน้าเวปเด้งออกมาให้เราทำการ Login ใส่ email และรหัสผ่านให้เรียบร้อย

• C:\Users\SorawitBholsithi>firebase login ? Allow Firebase to collect anonymous CLI usage and error reporting information? Yes Visit this URL on any device to log in: https://accounts.google.com/o/oauth2/auth?client_id=0123456md47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=709518962&redirect_uri=http%3A%2F%2Flocalhost%3A18642 Waiting for authentication... + Success! Logged in as my-login@my-email.com

สร้างโฟลเดอร์สำหรับโปรเจ็กของเรา สำหรับ Mac/Linux ใช้คำสั่ง md oom-portfolio
ตัวอย่างข้างล่างจะเป็นของวินโดว์

• C:\Users\SorawitBholsithi>cd Documents C:\Users\SorawitBholsithi\Documents>mkdir oom-portfolio C:\Users\SorawitBholsithi\Documents>cd oom-portfolio C:\Users\SorawitBholsithi\Documents\oom-portfolio>

เรียก firebase init ในโฟลเดอร์ oom-portfolio ดูให้แน่ใจว่าเราสร้างโปรเจ็กในโพลเดอร์ที่พึ่งสร้างขึ้นมา (oom-portfolio) แล้ว ตอบ Y

• C:\Users\SorawitBholsithi\Documents\oom-portfolio>firebase init ######## #### ######## ######## ######## ### ###### ######## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ######## ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## ######## ## ## ###### ######## You're about to initialize a Firebase project in this directory: C:\Users\SorawitBholsithi\Documents\oom-portfolio ? Are you ready to proceed? (Y/n)

กดปุ่มขึ้นลงและ Space Bar เพื่อเลือกฟังก์ชั่นที่จะติดตั้ง ถ้าต้องการใช้งานเป็น Web Hosting เลือกแค่ Hosting หลังจากนั้นกดปุ่ม Enter

• ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi rm your choices. ( ) 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

หลังจากนั้นจะมีรายชื่อโปรเจ็กที่เคยสร้างมาให้เลือก บางครั้งไม่มีรายการโปรเจ็กขึ้นมาให้เลือก(ไม่รู้ว่าทำไม) อาจจะต้องใช้คำสั่ง firebase use --add ช่วย

• === Project Setup First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project. ? Select a default Firebase project for this directory: [don't setup a default project] > oom-world (oom-world) [create a new project]

โฟลเดอร์ที่จะใช้เก็บไฟล์ของเวปชื่อตั้งต้นเป็น public ใช้ตามนั้นเลย โดยการกด Enter ผ่านไป ถ้าเลือกติดตั้งอย่างอื่นนอนกจาก Hosting ก็จะมีการถามชื่อไฟล์หรือโฟลเดอร์ให้เอาตามแนะนำให้ใช้ตามค่าตั้งต้น

• === Hosting Setup Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory. ? What do you want to use as your public directory? (public)

ถ้าเวปของเราเป็นแบบ Single Page ใหัตอบ y ถ้าไม่ใช่หรือไม่รู้ว่าคืออะไรให้ตอบ N หรือกด Enter ผ่านไป

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

เท่านี้ก็พร้อมใช้แล้ว

• + Wrote public/404.html + Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebaserc... i Writing gitignore file to .gitignore... + Firebase initialization complete! C:\Users\SorawitBholsithi\Documents\oom-portfolio>

ภายใต้โฟลเดอร์
C:\Users\SorawitBholsithi\Documents\oom-portfolio\public\
จะมีสองไฟล์ 404.html และ index.html เอาไฟล์ที่จะขึ้นเวปมาใส่ในโฟลเดอร์ได้เลย ทำการทดสอบเวปของเรา(ตอนนี้ใช้ไฟล์ index.html เดิม) พิมพ์คำสั่ง firebase serve จะเปิดเวปเซิร์ฟเวอร์ในเครื่องเราที่พอร์ต 5000

• C:\Users\SorawitBholsithi\Documents\oom-portfolio>firebase serve === Serving from 'C:\Users\SorawitBholsithi\Documents\oom-portfolio'... i hosting: Serving hosting files from: public + hosting: Local server: http://localhost:5000

เข้าใช้งานเวป http://localhost:5000 จะเห็นหน้านี้ 

เวลายกเลิกให้กด Ctrl+C จะขึ้น Terminate batch job (Y/N)? ให้ตอบ y

ถ้าแก้ไขเวปให้ดูดีเรียบร้อยแล้วให้เอาขึ้นโฮสของ firebase ให้ใช้คำสั่ง firebase deploy จะเป็นการเอาไฟล์ HTML ภาพ วีดีโอที่อยู่ใน public ขึ้นเวป

• C:\Users\SorawitBholsithi\Documents\oom-portfolio>firebase deploy

ไปดูที่  https://oom-world.firebaseapp.com/ ก็จะเห็นหน้าเวปของเราเอง แต่ URL ยังเป็น firebaseapp.com ถ้าจดชื่อของเวปของเราเรียบร้อยแล้วก็เข้าไปใน firebase console ในห้วข้อ Hosting จะมีปุ่ม เชื่อมต่อโดเมน ตั้งค่าให้เรียบร้อยเราก็จะมีเวปของตัวเอง  เป็นอันจบเรียบร้อย