[Bitbucket pipelines] คืออะไร มาดูวิธีทำ Auto deploy ไปที่ Firebase Hosting

Bitbucket pipelines คือ เครื่องมือการทำ CI/CD ตัวหนึ่งของทาง Bitbucket โดยสามารถ ใส่ script ต่าง ๆ เพื่อให้ทำงานที่ต้องการ ซึ่งหมายความว่า เราจะให้ทำการ Install หรือ Automated deploy หรือ Run test ก็ได้ครับ โดยเรา Subscribe ได้ว่าจะให้ทำงานเมื่อมีการเปลี่ยนแปลงที่ Branch ไหน โดยผู้เขียนจะใช้ Bitbucket pipelines สั่งให้ Automated deploy ไปที่ Firebase hosting และใช้ Source code เป็น ReactJS ครับ

Bitbucket pipelines สามารถใช้งานเบื้องต้นโดยไม่มีค่าใช้จ่าย โดยมีข้อจำกัดคือ จะให้เวลา 50 นาที/เดือน เท่านั้น โดยระยะเวลาต่อครั้ง จะนับเวลาจาก Script ที่เราสั่งให้ทำครับ

โดยเราจะเริ่มจากเตรียมการสิ่งเหล่านี้

• Firebase hosting
• Source Code (React.JS) ที่ใช้ Bitbucket

การใช้งาน Firebase hosting

สำหรับ Firebase hosting ให้ท่านผู้อ่านสร้าง Google Account และทำตามในบทความนี้ครับ

[Firebase Hosting] วิธีใช้ Hosting ของ Firebase

สร้างเว็บไซต์ด้วย ReactJS

เราจะทดสอบโดยการใช้เว็บไซต์ที่เขียนด้วย JavaScript library ครับ ซึ่งตัวนี้คือ ReactJS

สำหรับท่านผู้อ่านที่มาจาก [Firebase Hosting] ทดลองใช้ Hosting ของ Firebaseให้ลบ Project เดิมนะครับโดยลบทั้ง Folder เลยเดี๋ยวเราจะสร้าง Project ใหม่เป็น ReactJS และทำการ firebase init ใหม่อีกครั้งครับ

โดยขั้นตอน Install เจ้าตัว ReactJS นั้น ต้องมี Node.js ด้วยครับ หากท่านผู้อ่านยังไม่ได้ติดตั้ง Node.js ให้โหลดและติดตั้งก่อน เพราะเราจะ install โดยโหลดผ่าน NPM โดยสามารถโหลด Node.js ได้จาก ลิงค์นี้ ครับ

เมื่อ Install Node.js เสร็จแล้ว เปิด Terminal / cmd และรันคำสั่ง

$ npm install -g create-react-app 

เมื่อ Install เสร็จแล้ว ให้สร้าง Project ครับ โดยใช้คำสั่ง $ create-react-app <ชื่อ Project> เช่น

$ create-react-app myproject-jed

ซึ่งตอนแรกทางผู้เขียนอยากสร้างเป็นชื่อตาม camel case ครับ ชื่อว่า myProjectJed แต่ว่าเจ้าตัวติดตั้งมันไม่ยอมครับ ฟ้องแบบนี้

ก็เลยต้องสร้างเป็นชื่อ myproject-jed แทนครับ และเมื่อสร้างเสร็จแล้ว จะพบกับหน้าจอดังภาพด้านล่างครับ

เจ้า ReactJS เนี่ย ชอบแนะนำให้ใช้ yarn package เหลือเกิน ถ้าท่านผู้อ่านสนใจจะใช้ สามารถติดตั้งตามขั้นตอน ลิงค์นี้ ครับ

ต่อไปให้ทดสอบลอง run project โดยใช้คำสั่ง

$ cd myproject-jed && npm start หรือ $ cd myproject-jed && yarn start

จะพบกับหน้าจองาม ๆ ตามภาพด้านล่าง เป็นอันเสร็จสิ้นการสร้างเว็บไซต์ด้วย ReactJS ครับ

การใช้ Git ด้วย Bitbucket กับ Project ของเรา

สำหรับท่านผู้อ่านท่านใดที่ยังไม่ได้ติดตั้ง Git ให้ทำการดาวน์โหลดและติดตั้งได้ที่ ลิงค์นี้ ครับ

เข้าเว็บไซต์ Bitbucket และสร้าง Account หรือจะ Register ด้วย Google account ก็ได้ครับ

เมื่อเข้ามาหน้าหลักแล้ว ให้คลิกที่ปุ่ม “+” ที่ซ้ายมือครับ และเลือก Repository ครับ

จากนั้นก็กรอกข้อมูลตามต้องการได้เลยครับ เสร็จแล้วคลิก Create repository

เสร็จแล้วเราจะพบกับหน้าจอ Overview ดังภาพด้านล่าง ให้สนใจที่ Get started with command line >> I have an existing project ครับ เมื่อคลิกแล้วจะมีขั้นตอนการทำ Project ของเรา ให้ Connect กับ Bitbucket

สำหรับผู้ใช้งานครั้งแรก ก่อนจะเริ่มใช้งาน git ต้องสร้าง SSH key ก่อนครับ โดยวิธีการสร้าง สามารถดู Document ของ Atlassian เองเลย ได้จาก ลิงค์นี้ ครับ

กลับมาที่ Project เราครับ ให้เปิด Terminal / cmd และรันคำสั่งนี้ครับ

$ git init

จากนั้นรันคำสั่งที่ได้มา

$ git remote add origin git@****jed.git

จากนั้น ให้ commit และ push ด้วยคำสั่งทั้งหมดดังนี้ครับ

$ git add .
$ git commit -m "init project"
$ git push -u origin master

เมื่อเสร็จแล้วไปดูที่เมนู Source ของ Project ของเราที่ Bitbucket ครับ จะพบว่า Code ของเราได้เข้ามาแล้ว ถือว่าเป็นอันเสร็จครับ

การ Automate deploy ไปที่ Firebase hosting เมื่อมีการ merge source code เข้า Master branch

มาถึงจุดที่สนใจที่สุดของบทความนี้ ให้ทำการ firebase init ก่อนครับโดยใช้คำสั่งนี้

$ firebase init

หากท่านผู้อ่านลืมวิธี สามารถดูได้ที่ [Firebase Hosting] ทดลองใช้ Hosting ของ Firebaseได้ครับ

สำหรับคำถามที่ขี้นมาให้ตอบ ให้ตอบตามนี้ครับ

เมื่อเสร็จแล้วทดสอบ deploy ดูครับ

$ firebase deploy

แล้วเปิด Web browser ไปที่ URL ของเราครับจะพบผลลัพธ์ดังนี้

อ้าว เฮ้ยยยย คุณหลอกดาว ไม่เห็นมีไรเลย เพราะอะไรไปดู

กลับมาที่ project เราอีกครั้ง เพราะว่าการจะ Deploy สำหรับ ReactJS นั้น ต้อง build ก่อนครับ โดยให้ใช้คำสั่งนี้

$ npm run build หรือ $ yarn build

เมื่อเสร็จแล้วเราจะได้ Folder ใหม่ขึ้นมาด้วยชื่อว่า build จะได้ดังภาพด้านล่าง

จากนั้นเปิดไฟล์ firebase.json ขึ้นมา แก้ path สำหรับการ Deploy ครับ เปลี่ยนเป็นดังภาพด้านล่าง

และ firebase deploy อีกครั้ง จะได้ผลลัพธ์งาม ๆ ดังนี้

เมื่อทุกอย่างพร้อมแล้ว ไปจัดการเมนู Pipelines ที่ Bitbucket กันครับ เมื่อเข้ามาที่เมนู Pipelines แล้ว จะมีคำแนะนำให้ครับ

ให้กลับมาที่ Project ของเรา และสร้างไฟล์ชื่อว่า bitbucket-pipelines.yml และใส่ Code ดังนี้

**ข้อควรระวัง** การ space แต่ละคำนั้นมีผลหมดนะครับ ขอให้ space ตามนี้เป๊ะ ๆ

คำอธิบาย

• image: node:8.9.4 คือ เราต้องการใช้ image ของ node.js นั่นเอง โดยสามารถระบุ Version ได้ ขอแนะนำให้ใช้ Version เดียวกันกับเครื่องของท่านผู้อ่านครับ (ผู้เขียนเคยใช้คนละ Version มาแล้วเจอ Error ครับ)
• pipelines->branches->master คือ ให้สนใจที่ Master branch ครับ
• pipelines->branches->master->step->script คือ คำสั่งสำหรับ Terminal / cmd ที่เราจะใช้ครับ โดยจะทำงานหลักจาก Master branch มีการกระทำครับ

สร้างไฟล์แล้วให้ Commit และ Push ขึ้นไปครับ โดยใช้คำสั่งเดิมดังนี้

$ git add .
$ git commit -m "add bitbucket-pipelines.yml"
$ git push

ส่วนใหญ่แล้ว เราจะไม่ทำการใด ๆ กับ Master branch โดยตรงนะครับ แต่ในกรณีนี้เพื่อความสะดวก ผมจะ set up ทุกอย่างที่ branch นี้ครับ

เมื่อ push code เสร็จแล้วให้เข้าไปที่หน้า Pipelines ของ Bitbucket อีกครั้งครับ จะพบว่า หน้านั้นมีการเปลี่ยนแปลง ให้ท่านผู้อ่านคลิกที่ “Enable” ครับ

เมื่อคลิกแล้ว ระบบทำงานทันทีก่อนครั้งแรก และจะพบว่า Error เนื่องจากว่า ผู้เขียนยังไม่ได้ใส่ Script Deploy ในหน้า package.json ครับ

ให้เปิด Terminal / cmd ขึ้นมาและพิมพ์คำสั่งสำหรับการ Firebase deploy โดยใช้ Token ครับ โดยรันคำสั่งดังนี้

$ firebase login:ci

เมื่อรันแล้วจะมีการ Authen ที่ Web browser เกิดขึ้น ก็ทำไปตาม Step ครับ และจะได้ผลลัพท์ดังนี้

ย้อนกลับมาดู Terminal ก็จะได้ Token ให้เรา copy เจ้า Token ที่ได้ในช่องสีเขียวไปใช้ครับ

นำไปใช้ที่ไหน นำไปใช้ที่นี่ครับ เข้าไปที่เมนู Settings ที่ Project ของเรา และเลือก Environment variables ครับ และทำการ Add ไปได้เลยดังภาพ

เกือบเสร็จแล้ว !!! กลับมาที่ไฟล์ package.json ครับ เปิดขึ้นมาและ Add Script Deploy และระบุ devDependencies คือ firebase-tools ดังภาพด้านล่าง

ต่อไปเราจะทำการสร้าง Dev branch ขึ้นมาเพื่อทดสอบครับ ว่าเมื่อเรา update code ในโปรเจคเราที่ Branch อื่น และ pull request เพื่อทำการ merge เข้า Master branch แล้วอะไรจะเกิดขึ้น โดยการสร้าง Dev branch ใช้คำสั่งตามนี้ครับ

$ git checkout -b dev

จากนั้นให้ใช้คำสั่งสำหรับการ commit และ push ครับ ดังนี้

$ git add .
$ git commit -m "Update package.json"
$ git push --set-upstream origin dev

จากนั้นไปที่หน้าเว็บเพื่อทำการ Pull request ครับ เข้าไปที่เมนู Pull request จากนั้น ให้ Create ทำการ Merge ดังภาพด้านล่าง

เมื่อ Merge เข้า Master branch แล้วให้ไปที่เมนู Pipelines จะได้ผลลัพธ์ดังภาพครับ

นั่นคือ พอเรา Merge เข้า Master แล้วจะเกิดรายการเพิ่มขึ้นมา 1 รายการมี Status เป็น in progress ครับ เมื่อรอจนเสร็จจะเปลี่ยนเป็น Successful ครับ (สังเกตุว่า เรามีรายการเพิ่มขึ้นมาแค่รายการเดียว ทั้งที่เราสร้าง Branch ใหม่และ Push ขึ้นมาแล้ว นั่นแสดงว่า มีผลต่อ Master branch เท่านั้นครับ)

ถ้าท่านผู้อ่านอยากรู้ว่าใช้เวลา Build ไปเท่าไหร่แล้ว จะครบ 50 นาที / เดือนหรือยัง ก็ให้คลิกที่ Usage ครับ จะมีหน้าตาดังนี้

สำหรับบทความนี้ค่อนข้างยาว แต่ทางผู้เขียนคิดว่าอยากทำให้ละเอียดเข้าไว้ครับ ท่านผู้อ่านที่เข้ามาจะได้ทำตามได้ทุกขั้นตอน ขอขอบคุณที่ติดตามและอ่านจนจบนะครับ

มีบทความของคุณ Nitipat Lowichakornthikun ที่เขียนเกี่ยวกับการใช้ Bitbucket Pipelines ใช้งานกับ DigitalOcean ด้วยครับน่าสนใจมาก ท่านผู้อ่านที่สนใจเพิ่มเติมสามารถดูได้ที่ลิงค์ด้านล่างครับ

ลองทำ CI/CD ด้วย Bitbucket Pipelines + DigitalOcean

หากท่านผู้อ่านมีคำถามหรือข้อสงสัย หรือมีคำแนะนำ อยากติชม สามารถติดต่อผู้เขียนได้เลยครับ