มา deploy เว็บจาก create-react-app บน firebase hosting กันเถอะ

firebase มี hosting ให้เราใช้ฟรีอยู่ซึ่งเราสามารถ deploy เว็บของเราที่เป็น static file ขึ้นไปได้

ก่อนอื่นติดตั้งnodejs และ สมัครเข้าใช้งาน firebase

ติดตั้ง create-react-app จาก npm

npm install create-react-app -g

สร้างโปรเจคของเรา

create-react-app <ชื่อโปรเจคของเรา>

เมื่อลงเสร็จเราจะได้หน้า boillerplate ของ create-react-app มาซึ่งจะมีหลายๆอย่างติดตั้งมาให้เรา ตรงนี้สามารถไปดู รายละเอียดเพิ่มเติมได้ที่ https://github.com/facebookincubator/create-react-app

ลองรันเว็บบนเครื่องของเรา ที่ localhost:3000

npm start

มาถึงส่วนของ firebase

คราวนี้เราจะ deploy เว็บของเราขึ้นไปบน firebase hosting ให้เราไปสร้าง project -ของเราบนเว็บของ firebase ผ่าน firebase console ก่อน

ติดตั้ง ตัว firebase-tools

npm install -g firebase-tools

login firebase ในเครื่องเรา

firebase login

ติดตั้ง firebase เข้ากับ project ของเรา

firebase init

จากนั้นจะขึ้นให้เลือก project ที่เราจะสร้างบนเว็บของ firebase หรือจะเลือก create new จากจุดนี้ก็ได้

ไม่ต้องเลือกให้สร้าง public ใหม่ เพราะเราใช้ของที่ได้มากจาก create-react-app

เสร็จแล้วเราจะได้ไฟล์ firebase.json database.rules.json .firebaserc มาส่วน directory public ขึ้นอยู่กับเราให้สร้างใหม่รึเปล่า

เมื่อติดตั้งเสร็จให้ไปแก้ไฟล์ firebase.json ให้ deploy จาก product ของเรา

{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "build"
}
}

ลอง build เว็บของเรา

npm run build

จากนั้น deploy ขึ้น hosting เลย

firebase deploy

จะมี url ของ เว็บเราขึ้นมา แสดงว่าเว็บเราถูก deploy เรียบร้อยแล้ว

เข้าไปตาม url ก็จะเจอเว็บตามนี้เลยครับ

ถ้าวันหนึ่งเราต้องการเอาเว็บลงจาก hosting ของ firebase ก็สามารถสั่ง disable ได้

firebase hosting:disable