มาลอง deploy create-react-app ขึ้น Firebase hosting และทำ CI/CD ด้วย Travis-ci กันเถอะ
สวัสดีทุกคนที่หลงเข้ามาอ่านบทความนี้นะครับ ^^
บทความนี้ผมจะมาแนะวิธีการ deploy web app ที่สร้างจาก create-react-app cli ไปยัง Firebase hosting พร้อมทั้งทำ CI/CDโดยใช้ Travis-ci (อยากให้ลองอ่านไปทำตามไปนะครับ)
ติดตั้ง create-react-app เพื่อสร้างโปรเจคที่พร้อมให้เรา dev ด้วย React.js
- ติดตั้ง create-react-app cli
npm install -g create-react-app - หลังจากติดตั้งเสร็จแล้วให้ทำการสร้างโปรเจคด้วยคำสั่ง
create-react-app <ชื่อแอพ>
ตัวอย่างเช่น ผมจะตั้งชื่อโปรเจคว่า deploy-react-firebase-example ให้รันคำสั่งcreate-react-app deploy-react-firebase-example
- ลองรันโปรเจคดูว่าใช้งานได้มั้ย โดยให้เข้าไปในโปรเจคที่พึ่งสร้างขึ้น หลังจากนั้นทำการรันด้วยคำสั่ง
npm startเพื่อทำการ start server
- ลองทดสอบดูว่าเว็ปเราสามารถรันได้รึเปล่า ทำการเปิด browser เข้าไปที่ url “http://localhost:3000” ถ้าเห็นหน้าตาเว็ปประมาณนี้แสดงว่า ผ่าน!
มา deploy web ของเราขึ้น Firebase hosting กัน
- เข้าไปที่ https://console.firebase.google.com/ ทำการสมัครให้เรียบร้อย
- เมื่อเข้าไปยัง Firebase dashboard ให้ทำการสร้างโปรเจคใหม่ โดยกดท่ี Add project -> ทำการตั้งชื่อโปรเจค โดยผมจะใช้ชื่อโปรเจคว่า “deploy-react-firebase-example”
- เปิด terminal/cmd พิมพ์คำสั่ง
npm install -g firebase-toolsเพื่อทำการลง firebase cli หลังจากลงเสร็จเรียบร้อยแล้ว ให้พิมพ์คำสั่งfirebase loginเพื่อ login เข้าสู่ระบบ firebase - คราวนี้กลับมาที่ project React ของเรา หลังจากนั้นพิมพ์คำสั่ง
firebase initเพื่อทำการสร้างค่า config เริ่มต้นของ firebase โดยในขั้นตอน “Select a default Firebase project for this directory” ให้เลือกโปรเจคที่เราสร้างใว้ใน ตอนแรก เช่นของผมคือ “deploy-react-firebase-example” เมื่อเสร็จแล้วเราจะได้ไฟล์มาสองไฟล์คือ firebase.json และ .firebaserc
- ให้ทำการ config ที่ไฟล์ firebase.json เพื่อกำหนด public path ดังนี้
{ "hosting": { "public": "build" }}
- สังเกตว่าตอนนี้โปรเจคเรายังไม่มี folder build เนื่องจากเรายังไม่ได้ build source code ให้เราทำการพิมพ์คำสั่ง
npm run buildเพื่อทำการ build source code ของเรา ซึ่งเราจะได้ code ที่ถูก build จะอยู่ใน folder build
- ขั้นตอนนี้เป็นขั้นตอนสำคัญ เรากำลังจะ deploy web ของเราขึ้น firebase hosting แล้วนะ เย้! ให้เราพิมพ์คำสั่ง
firebase deployรอจนคำสั่งทำงานจบถ้า deploy สำเร็จมันจะขึ้นว่า “Deploy complete!” เพียงเท่านี้เราก็จะได้เว็ปไซต์ที่สามารถนำไปอวดชาวบ้านได้แล้วครับ XD
- ทดสอบว่าเว็ปที่เราพึ่ง deploy ขึ้นไปใช้งานได้รึเปล่า โดนให้เข้าผ่าน url ที่ใน console บอกตอนที่เรา deploy สำเร็จ สำหรับของผมคือ https://deploy-react-firebase-example.firebaseapp.com (เห้ยย ขึ้นด้วยย)
- นอกจากนี้เราสามารถเข้าไปดูสถานะการ deploy การ roll back และ ทำการเชื่อมต่อกับ domain name ของเรา ผ่าน firebase console(บทความหน้าจะมาสอนเรื่องการเชื่อมต่อกับ domain name นะครับ)
จบแล้วครับสำหรับวิธีการ deploy react app ของเราขึ้น firebase จะเห็นว่าเพียงไม่กี่ขั้นตอนเองก็สามารถขึ้นเวปไซต์ได้แล้ววว :)
มาทำ CI/CD ด้วย Travis-ci กันเถอะ
จากขั้นตอนที่ผ่านมาจะสังเกตได้ว่า ถ้าเราต้องการ deploy app ของเรา เราก็ต้องรันคำสั่ง firebase deploy ใช่มั้ยครับ ซึ่งทุกครั้งๆที่เรามีการแก้โค้ดแล้วอยาก deploy เราก็ต้องรันคำสั่ง firebase deploy ตลอด เป็นไปได้มั้ยที่เราแค่ push code ของเราไปที่ branch ซักที่นึง(เช่น master) แล้วให้มันทำการ build และ deploy ให้เราอัตโนมัติ คำตอบคือ “เป็นไปได้ครับ!” โดยเราจะใช้ travis-ci นี่แหละเป็นตัวช่วยเรา
โดย flow การทำงานจะประมาณนี้ครับ
มาเริ่มกันเลยดีกว่า!
- เข้าไปที่ https://travis-ci.org/ ให้ทำการ sign in ด้วย github account
- หลังจาก sign in สำเร็จจะเห็นหน้า dashboard ที่แสดงโปรเจคทั้งหมดใน github ของเรา ซึ่งในตัวอย่างผมได้ทำการสร้างโปรเจคใน github ชื่อ deploy-react-firebase-example
- ให้ทำการคลิก check box ให้เป็นเครื่องหมายถูกสีเขียว
- กดคลิกเข้าไปที่ชื่อโปรเจค หลังจากกดเข้าไปจะเจอหน้านี้ครับ
- ให้เราทำการกลับไปที่โปรเจคและทำการสร้างไฟล์ .travis.yml ย้ำ! อย่าลืม . หน้า travis นะครับ ย้ำอีกครั้ง “.travis.yml” นะครับ โดยในไฟล์ .travis.yml ให้ทำการเขียน script ดังนี้ ทำการ commit และ push code ไปที่ master
- ทำการ generate firebase token เพื่อนำไปใส่เป็นค่า environment variable ใน travis-ci โดยพิพม์คำสั่ง
firebase login:ciเราจะได้ firebase token ออกมา
- กลับมาที่หน้าเว็ป travis-ci นำค่า token ที่ได้ไปใส่ใน environment variable โดยให้กดไปที่ tab settings ไปที่ Environment Variables ให้ทำการใส่ค่าดังนี้
FIREBASE_TOKEN: ค่าที่ได้หลังจากการใช้คำสั่ง login:ci
PROJECT_ID: ดูได้จาก firebase dashboard
- การ config ทั้งหมดก็มีเท่านี้ครับ คราวนี้เรามาลองเทส ci ของเรากันว่าใช้งานได้รึเปล่า ผมจะเข้าไปแก้รูป logo react หมุนๆให้เป็นหน้าผมหมุนๆแทน 555 แล้วลอง push ขึ้น branch master นะครับ
- ลองกลับไปที่ travis-ci จะเห็นว่าตอนนี้เริ่มมีการเปลี่ยนแปลง คือจะเห็นว่ามีการทำ auto build หลังจากที่ผม push code ขึ้น master โดยจะแสดงข้อมูลเบื้องต้นคือ เลข commit, commit message และ status การ build เป็นต้น
ถ้า deploy หรือ build failed จะขึ้น status บอกเลยว่า failed และ failed เพราะอะไร โดยดูที่ job log
ถ้า build ผ่านแล้วจะขึ้นเป็น status passed
นอกจากนี้เราสามารถดู Build History ได้ด้วยว่าเรา deploy อะไรผ่าน หรือสามารถ restart build ที่ commit ที่เราต้องการจะ build ใหม่ได้ด้วย
ลองเข้าไปดู firebase hosting ว่ามีการ deploy จริงรึเปล่า
อ๊ะ! deploy จริงด้วย ไหนมาดูหน้าตาเว็ปหน่อยสิ๊ https://deploy-react-firebase-example.firebaseapp.com
ปล. นอกจาก travis-ci จะช่วยในการทำ auto build และ deploy แล้ว เรายังสามารถนำมาช่วยทำเทสเมื่อมีคน pull request ได้ด้วย โดยขั้นตอนการทำงานจะประมาณนี้ครับ
จบแล้วครับ
ขอบคุณมากนะครับทุกคนที่เข้ามาอ่าน หวังว่าบทความนี้จะมีประโยชน์กับคนที่ต้องการ deploy app ที่สร้างจาก create-react-app ขึ้น firebase hosting หรือคนที่กำลังจะลองทำ ci/cd จาก github ผ่าน travis-ci
เนื่องจากบทความนี้เป็นบทความแรกในชีวิตของผม ถ้ามีข้อผิดพลาดประการใดก็ขออภัยด้วยนะครับ ยินดีรับทุกข้อเสนอแนะมาเพื่อใช้ในการปรับปรุงให้ดียิ่งขึ้น
God bless & have fun with coding :)
Reference:
- https://travis-ci.org/
- https://firebase.google.com/docs/
- https://medium.com/a-man-with-no-server/setting-up-a-ci-cd-pipeline-with-travis-ci-for-a-serverless-app-e98b0e57d30c/
- https://github.com/facebookincubator/create-react-app/
- https://styled-components.com/
