สวัสดีผู้อ่านทุกท่าน วันนี้เป็นเรื่องสั้นๆเกี่ยวกับ Flutter Web หากเพื่อนๆกำลังศึกษา Flutter อยู่ น่าจะเห็นข่าวคราวเรื่อง Flutter Web กันมาบ้างแล้ว ส่วนตัวผมยังไม่ได้ลองเล่นมากนัก จึงมีความคิดว่าอยากจะลองทำเว็บเล่นๆสักเว็บ เพื่อทำความคุ้นเคยกับ Flutter Web ให้มากขึ้น โดยจะทำเป็นเว็บ Portfolio ของผมเอง ตัว Host ของเว็บผมจะใช้ Firebase Hosting และจดโดเมนใหม่ที่ GoDaddy ชื่อว่า benznest.dev มาดูกันว่าเป็นยังไงบ้างครับ

เริ่มต้น

ก่อนอื่นผมสร้างโปรเจค Flutter เปล่าๆขึ้นมาใน Android Studio แล้วลองรันโปรเจค เลือกรันใน Chrome (Web)

จากนั้นเราจะได้ หน้าเว็บของแอปเรา โดย url จะเป็น localhost นั่นเอง

สังเกตว่าในโปรเจคของเราจะมีโฟลเดอร์ web เพิ่มขึ้นมา โดยโฟลเดอร์นี้จะเป็น code ส่วน html ที่เราสามามารถ custom ได้ เช่น เพิ่มไฟล์ js , เปลี่ยนชื่อ Title หรือไอคอนของเว็บ

หากใครยังไม่มีโฟลเดอร์ web ให้ ลองรันคำสั่งนี้ก่อน

flutter create .

Build โปรเจค

จากนั้นเราจะ build ตัว Flutter ที่เขียนด้วย dart ให้ออกมาเป็นไฟล์สำหรับเว็บแอป โดยใช้ command นี้

flutter build web

ไฟล์ web ของเรา จะอยู่ในโฟลเดอร์ build/web โดยไฟล์สำคัญที่เพิ่มเข้ามาคือ ไฟล์ที่ชื่อว่า main.dart.js ซึ่งจะเป็นการ compile dart มาเป็น javascript นั่นเอง

Firebase Hosting

ตอนนี้เราได้ไฟล์ web มาแล้ว ต่อมาคือการนำไป deploy ยัง host หรือ server ของเรา โดยผมเลือกใช้เป็น Firebase Hosting

ก่อนอื่นเข้าไปสร้าง Project ใน Console ของ Firebase ก่อน จากนั้นติดตั้ง Firebase CLI เพื่อให้เราสามารถใช้คำสั่ง command ของ Firebase ในเครื่องเราได้

ต่อมา สร้างโฟลเดอร์ของโปรเจคที่จะเก็บไฟล์เว็บแอป จากนั้นเปิด terminal และรันคำสั่งนี้ในโฟลเดอร์

เริ่มจาก login ก่อน

firebase login

แล้วก็รันคำสั่ง init จากนั้นก็มีให้เราเลือกว่าจะ ใช้อะไรบ้างในที่นี้ก็เลือก Hosting นั่นเอง

firebase init

ต่อมาก็ copy ไฟล์ Flutter Web ที่อยู่ใน build/web มาไว้ในโฟลเดอร์ firebase ของเรา

ได้เวลา deploy แล้ว รันคำสั่ง

firebase deploy

ลองดูที่ URL เว็บ firebase hosting ที่ทาง Firebase เตรียมไว้ให้ จะปรากฏหน้าเว็บที่ build จาก Flutter Web ของเราแล้ว ง่ายมากๆ

เพิ่ม Domain name

ทีนี้ผมอยากจะลองใช้ domain ของผมเองด้วย ดังนั้นผมจึงจด domain ที่ GoDaddy ราคา 630 บาท ชื่อว่า benznest.dev

เสร็จแล้ว มาที่ Firebase Hosting กด Add custom domain แล้วทำตามขั้นตอน

ขั้นตอนก็จะมีเพิ่มค่า A และค่า TXT ในหน้าตั้งค่าผู้ให้บริการ Domain ของเรา

กลับมาที่หน้า Firebase Hosting ก็จะขึ้น Pending

เมื่อลองเข้าไปที่หน้าเว็บ domain ใหม่ ตอนนี้ก็จะขึ้น Error เกี่ยวกับ cert ให้รอ 1-2 ชั่วโมง

กลับมาดูที่หน้าเว็บ domain ใหม่อีกครั้ง เย้! มาแล้วเว็บไซต์ใหม่ของผม

จบแล้ว

ขอบคุณที่อ่านจนจบครับ หวังว่าจะมีประโยชน์กับผู้อ่านที่สนใจจะ deploy Flutter Web ใน Firebase hosting ครับ มันง่ายมากๆเลย ส่วนเว็บ benznest.dev ของผม ผมก็จะนำมาลองเล่น Flutter Web นี่แหละ ได้ลองเล่น เรียนรู้อะไร ก็จะมาเขียนบล็อกครับ

(: