เขียน Angular เชื่อมต่อ Firebase emulator ใน docker
Angular Firebase with emulator in docker
ทำไมเราถึงใช้ Firebase Emulator เพราะว่า Firebase Emulator ช่วยให้เราสามารถรัน Firebase บนเครื่องคอมพิวเตอร์ของเรา เพื่อพัฒนา Web หรือ Application ได้อย่างรวดเร็วและปลอดภัย
มาทำความรู้จัก Docker กันก่อนดีกว่า
Docker เป็น engine ตัวหนึ่งที่ใช้ในการเป็นตัวจำลอง server บนเครื่องคอมพิวเตอร์ของเรา ซึ่งมีการทำงานคล้ายคลึงกับ Virtual Machine เช่น VMWare, VirtualBox, XEN, KVM แต่มีข้อแตกต่างกันอย่างชัดเจนคือ Virtual Machine ที่รู้จักกันก่อนหน้านี้เป็นการจำลองทั้ง hardware ของ server ซึ่งหากต้องการใช้ ก็ต้องทำการติดตั้ง OS นั้นๆทั้งหมดบน server จำลองแต่สำหรับ Docker แล้วจะใช้ container ในการจำลองที่ระดับ OS เพื่อใช้งานสำหรับ 1 application โดยไม่ต้องมีส่วนของ hardware และ OS จริงๆมาเกี่ยวข้อง
สามารถศึกษาเพิ่มเติมได้ที่ ลิงก์ข้างล่างเลยครับ
ขั้นตอนในการพัฒนา
- สร้างโปรเจ็กต์ใน Firebase
- เตรียม Docker ให้พร้อมในการรัน server
- สร้างโปรเจ็กต์ Angular สำหรับเชื่อมต่อ Firebase emulator
- วิธีการแก้ไขปัญหา Firebase Emulator รัน Localhost ไม่ได้
1. สร้างโปรเจ็กต์ใน Firebase
- ใครยังไม่มี Account Gmail สมัครกันก่อนนะครับ
- เข้าไปยัง https://firebase.google.com/
แล้วเลือก Go to console
เข้ามาที่หน้า Console แล้วให้เลือกไปที่ สร้างโปรเจ็กต์ กันเลย
ให้เราตั้งชื่อ โปรเจ็กต์ ที่เราต้องการจะสร้าง แล้วกด ฉันยอมรับข้อกำหนดในการให้บริการของ Firebase จากนั้นกด ต่อไป เลยครับ
กด ดำเนินการต่อ เลยครับ
เลือก สถานที่ตั้ง Analytics ซึ่งผมจะเลือกเป็น ประเทศไทย แล้วกดยอมรับ จากนั้นกด สร้างโปรเจ็กต์
สร้างโปรเจ็กต์เสร็จสิ้น จากนั้นกด ดำเนินการต่อ เลยครับ
ตอนนี้เรามีโปรเจ็กต์ที่มีชื่อว่า TestFirebase เป็นที่เรียบร้อยแล้ว
2. เตรียม Docker ให้พร้อมในการรัน Server
- Docker Desktop ที่เราแนะนำคือรุ่น Edge เพราะว่ารุ่น Edge จะมีการอัพเดตเดือนละครั้ง ซึ่งจะมีการอัพเดตคุณสมบัติใหม่ๆและแก้ไขข้อบกพร่องอยู่ตลอด
สามารถโหลดได้ที่ https://www.docker.com/products/docker-desktop - ขั้นตอนการติดตั้ง Docker สามารถเข้าไปดูที่
https://docs.docker.com/docker-for-windows/install/
ใครที่ติดปัญหา Windows ไม่รองรับ สามารถอ่านวิธีแก้ได้ที่บทความ ติดตั้ง Docker Desktop บน Windows 10 Home x64
หลังจากที่เรา Install Docker เสร็จเรียบร้อยแล้วให้เปิด Docker Desktop ขึ้นมา แล้วทำการ Login ให้เรียบร้อย
- สามารถเช็คได้ว่า Docker ทำงานอยู่จริง ให้สังเกตจะแสดง(สีเขียว)แล้วเขียนว่า Docker running แสดงว่า Docker กำลังทำงานอยู่
- วิธีตรวจสอบอีกวิธีคือให้เปิด Terminal ขึ้นมาแล้วพิมพ์คำสั่ง
Docker --version
- แสดงว่า Docker สามารถใช้งานได้
ขั้นตอนการเตรียม Docker
- ขั้นตอนที่ 1 : การสร้าง Dockerfile
โดยการเปิด Visual Studio Code(vscode) ขึ้นมา จากนั้นให้สร้าง Folder ที่มีชื่อว่า docker แล้วสร้าง dockerfile ข้างใน Folder ดังรูปภาพที่ 1
- ขั้นตอนที่ 2 : เขียน dockerfile ที่จำเป็นในการใช้งานในโปรเจ็กต์นั้นๆซึ่งในรูปภาพที่ 2 คือสิ่งที่จำเป็นในการสร้าง Firebase Emulator ทั้งหมด
# อธิบาย Code ข้างบน #
บรรทัดที่ 1 คือการ set docker version ให้กำหนด Alpine และ Node.js version จะได้ไม่มีปัญหาเมื่อมีการ update version
บรรทัดที่ 2 คือคำสั่งการเปิด Port ของ Firebase Emulator ต่างๆถ้าไม่เปิดก็จะไม่สามารถใช้งาน Port ของ Emulator ต่างๆได้
บรรทัดที่ 3 คือคำสั่งการอัพเดตแพ็กเกจทั้งหมดใน Alpine Linux จะช่วยให้เพ็กเกจที่มีการอัพเดจนั้นให้อัพเป็นปัจบันก่อนที่จะลงแพ็กเกจอื่น
บรรทัดที่ 4 คือคำสั่งติดตั้ง Git ซึ่งใน Alpine จะไม่มีคำสั่งของ Git ให้เราใช้ ซึ่งเราจำเป็นจะต้องใช้ในการ Config โปรเจ็กต์กับ Git เราจำเป็นจะต้องลงแพ็กเกจตัวนี้ก่อน
บรรทัดที่ 5 คือคำสั่งการติดตั้ง Angular และ Firebase โดยจะติดตั้งแบบ Global ซึ่งจะมาสามารถทำให้เราเรียกคำสั่งหรือแพ็กเกจจากที่ไหนก็ได้
บรรทัดที่ 6 คือคำสั่งติดตั้ง Openjdk8 ซึ่งจำเป็นต้องใช้ในการรัน Firebase Emulator ถ้าไม่มี จะไม่สามารถรันได้
บรรทัดที่ 7–8 คือการ Set Path ของ JAVA JDK ถ้าไม่ได้ Set Path โปรเจ็กต์ก็จะรู้ว่า Java JDK ในเรื่องเรานั้นอยู่ตรงไหน ก็จะไม่สามารถเรียนใช้ Java JDK จากเครื่องของเราได้
- ขั้นตอนที่ 3 : ทำการ Build ไฟล์ dockerfile ให้เป็น Docker image โดยใช้คำสั่งข้างล่าง
***จุดที่ต้องระวังคือตำแหน่งของ dockerfile ต้องอยู่ใน Folder docker ก่อน จึงจะใช้คำสั่งนี้ได้ ถ้าไม่ได้อยู่ใน folder ต้อง Set Path ก่อน***
docker build -t <ImageName>:<Tag> .
- ขั้นตอนที่ 4 : หลังจาก Build เสร็จจะได้ image มาหนึ่งตัว เราสามารถเช็คได้ว่า image ที่เราสร้างขึ้นมานั้นมีอยู่จริงหรือเปล่าโดยใช้คำสั่ง
docker images
- ขั้นตอนที่ 5 : พอเราได้ image เราจะทำการสร้าง container โดยใช้คำสั่ง
docker run --name <name> -it -v <path>:/usr/src -p 4000:4000 -p 5001:5001 -p 9000:9000 -p 8080:8080 -p 8085:8085 -p 5000:5000 -p 4200:4200 <NAME>:<TAG> sh
3. สร้างโปรเจ็กต์ Angular สำหรับเชื่อมต่อ Firebase Emulator
ขั้นตอนการสร้างโปรเจ็กต์ Angular
อันดับแรกเราต้องอยู่ที่ตำแหน่งในการแชร์ไฟล์ ระหว่าง Docker กับคอมพิวเตอร์โดยใช้คำสั่ง cd usr/src
ขั้นตอนที่ 1 : สร้างโปรเจ็กต์ Angular
ก่อนที่จะสร้างโปรเจ็กต์ก่อนอื่นให้ Config Git ก่อนนะครับ เพื่อที่จะให้โปรเจ็กต์ภายในเครื่องเราเชื่อมต่อกับ Github จะง่ายในการเก็บโปรเจ็กต์ของเราไปไว้ใน Github ครับ
“you@example.com” คือ Email ที่เชื่อมต่อกับ Github
“Your Name” คือ ชื่อของ Github
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
จากนั้นเราสามารถสร้างโปรเจ็กต์ Angular โดยใช้คำสั่งng new <Project name> ซึ่ง Project name เราสามารถตั้งเป็นอะไรก็ได้
ng new <Project name>จากการรันคำสั่งข้างบนจะขึ้นข้อความถามว่าจะให้เพิ่ม Angular routing หรือไม่
ให้พิมพ์ Yes แล้วกด Enter แล้วเลือกสไตล์ที่เราต้องการซึ่งในโปรเจ็กต์นี้ผมจะใช้ Less ในการเขียน จากนั้นกด Enter ในการเลือก
ขั้นตอนที่ 2 : เชื่อมต่อโปรเจ็กต์กับ Firebase login
หลังจากที่เรา Config เสร็จ ให้ cd เข้าไปใน folder โปรเจ็กต์ที่เราสร้างขึ้นมา จากนั้นเราจะทำการเชื่อมต่อ โปรเจ็กต์กับ Firebase โดยใช้คำสั่ง
firebase login --no-localhostจากนั้นพิมพ์ yes เพื่อบอกว่าอนุญาติให้ Firebase และ CLI รายงานข้อมูลข้อผิดพลาดหรือไม่ หลังจากนั้น เราจะได้รับลิงก์ให้เราคลิกเข้าไป Login ด้วย Google Account เพื่อเชื่อมต่อกับ Firebase และนำ Code ที่ได้ในขั้นตอนสุดท้ายมาวางใน terminal เพื่อยืนยันการ Login
ขั้นตอนที่ 3 : ทำการ Init ให้โปรเจ็กต์รู้จักกับ Firebase
เราจะทำการ init ด้วยคำสั่งfirebase init
ให้เรากด Spacebar เพื่อเลือกตัวที่เราจะทำการ Config ตัวโปรเจกต์กับ Firebase
เลือกภาษาที่ใช้ในการเขียน มีอยู่ 2 ตัวเลือกให้เลือก
- JavaScript
- TypeScript
ในตัวอย่างจะเลือก TypeScript แล้วกด Enter
หลังจากเลือกภาษาที่จะใช้ในการเขียนแล้ว ให้เลือก Yes ต่อแล้วกด Enter
จากนั้นรอการ Install สักครู่
ขั้นตอนนี้คือเราจะต้องเลือกตัวที่เราจะ setup ใน Firebase emulators
วิธีเลือกคือกดแป้น Spacebar ในการเลือก ในโปรเจ็กต์นี้เราจะเลือกแค่
Function, Firebase, Hosting จากนั้นกด Enter ในการยืนยัน
หลังจากเลือกเสร็จแล้ว ขั้นตอนต่อไปคือการเลือก Port โดยจะมีค่า Default มาอยู่แล้ว ให้เรากด Enter เลย
ขั้นตอนที่ 4 : ทำการรัน firebase emulator โดยใช้คำสั่ง
firebase emulators:startเมื่อรันคำสั่งข้างบนแล้ว ทำตามรูปภาพที่ 3 หรือคลิกที่ http://localhost:5000/
เมื่อกดคลิกเข้ามาจะได้หน้าตาแบบนี้เพราะว่าในโปรเจ็กต์เรายังไม่ได้ไปเซต host ในไฟล์ firebase.json ซึ่งเราจะต้องทำตามขั้นตอนต่อไป
4. วิธีการแก้ไขปัญหา Firebase Emulator รัน Localhost ไม่ได้
หลังจากที่เราได้รันคำสั่ง start แล้วแต่ยังไม่สามารถรัน localhost ได้เราจึงมาทำขั้นตอนต่อไปนี้
firebase init emulatorsหลังจากกด Enter แล้ว ให้เลือกตัวที่เราจะ setup ใน Firebase emulators
วิธีเลือกคือกดแป้น Spacebar ในการเลือกจากนั้นกด Enter ในการยืนยัน
หลังจากเลือกเสร็จแล้ว ขั้นตอนต่อไปคือการเลือก Port โดยจะมีค่า Default มาอยู่แล้ว ให้เรากด Enter เลย
ให้เข้าไปที่ไฟล์ firebase.json ที่อยู่ในโปรเจ็กต์ แล้วเพิ่ม
"host": "0.0.0.0", ใน emulators ดังภาพที่ 3
จากนั้นให้ทดสอบโดยการรันใหม่อีกครั้ง
firebase emulators:start
เมื่อคลิกลิงก์ Local server ผลลัพธ์จะออกมาเป็นดังรูปภาพที่ 5
แต่ไม่ต้องตกใจไป ให้เราเปลี่ยนจาก 0.0.0.0 เป็น localhost ดังรูปภาพที่ 6
หรือ สามารถกดดูที่ http://localhost:5000/
สรุปก็คือ เมื่อสร้างโปรเจ็กต์ใน Firebase เสร็จแล้ว ให้เตรียมไฟล์ Dockerfile ให้พร้อมสำหรับการสร้างโปรเจ็กต์ แล้วรัน Container จากนั้นสร้างโปรเจ็กต์ Angular แล้วทำการเชื่อมต่อกับ Firebase Emulator เมื่อทำตามขั้นตอนทุกอย่างเสร็จแล้ว จะทำการรันเลยไม่ได้ ต้องไปเพิ่ม
"host":"0.0.0.0",ในไฟล์firebase.jsonเพื่อช่วยให้เปิด localhost ใน container ได้ หรือสามารถรันได้นั้นเอง ^_^
เอาล่ะ! หลังจากได้ทำมาทั้งหมดแล้ว หวังว่าทุกคนจะสามารถสร้าง Angular ให้เชื่อมต่อกับ Firebase Emulator ใน Docker ได้แล้ว และช่วยให้ทุกคนที่เข้ามาอ่านบทความนี้ได้พัฒนา Web หรือ Application ได้อย่างรวดเร็วและปลอดภัยขึ้นครับ
