ในตอนนี้เราจะมาดูการส่วนที่เป็นหัวใจของ Azure DevOps กันก่อนเลยนะครับ คือ Azure Pipelines โดยตัว Azure Pipelines นี้ เป็น CI/ CD (Continuous Integration / Continuous Deployment ) service ที่สามารถใช้ได้กับทั้ง repository ของ Azure DevOps เอง หรือ repository อื่นๆ ภายนอก เช่น GitHub หรือ Bitbucket ในตัวอย่างนี้เราจะใช้ code ที่ Azure Repos เอง
Code ตัวอย่างที่เราใช้ build เป็น React application ทั่วที่ใช้สร้างโดย CRA (Create React App) โดย step คือเราจะ build application ออกมาเป็น static file ทั้งหมดแล้วก็ publish ไปที่ Azure blob storage ที่ทำการ setup ให้เป็น static site hosting เพียงแค่นี้เราก็สามารถทำ CI/CD application เราได้แล้ว ส่วนใครที่มี code ของ app ตัวเองอยู่แล้ว ก็สามารถ connect CI เข้าไปที่ repository นั้นได้เลยครบ
- ก่อนอื่นเราก็ต้องไปสร้าง storage account เพื่อทำ static web site ก่อนนะครับ
- อย่างแรกก็ต้องเข้าไปสร้าง storage account ใหม่ ใน Azure Portal ที่สำคัญคือ ต้อง enable public access ด้วยนะครับ
- แล้วก็ enable static web site
- เมื่อ enable แล้วจะมี $web container ขึ้น ลองทดสอบด้วยการเอา file index.html ไปวางใน $web container ก่อน ก็จะสามารถดูได้จาก browser
- Copy SAS URL เอาไว้เพื่อใช้การ publish file ตอนหลัง
- [Optional] จริงๆแล้วเราสามารถใช้ Azure CDN เพื่อทำ cache ให้กับ static web site ของเราได้ด้วย แล้วก็ทำ custom DNS ได้อีกต่างหาก แต่ผมว่าอันนี้มันเกินจุดประสงค์ของ blog นี้ไปแล้ว
- ขั้นตอนสำหรับคนที่ยังไม่มี application code อยู่แล้วก็สามารถ สร้าง repo แล้ว ใช้ CRA สร้าง code ตัวอย่าง
- git clone <URL ของ repo ที่เราสร้างใน Azure DevOps>
- npx create-react-app cra-static-samples
- npm install
- npm run start
- ก็จะได้ web ตัวอย่างประมาณนี้
- เสร็จแล้วก็ push code เข้าไปที่ git
- git add .
- git commit -m “Init with CRA”
- git push origin master
- สร้าง Variable group ใน Azure Pipeline เพื่อเก็บ SAS_URL เพราะว่าใน SAS_URL มี SAS_TOKEN ที่เป็นความลับอยู่ เราไม่ควรเอา SAS_URL นี้ไปเก็บไว้ใน pipeline โดยตรง เอา SAS_URL ที่เรา copy เก็บไว้มาใส่ในนี้ แล้วก็ต้องแก้นิดนึงเพราะว่าเราต้อง copy file ไปไว้ใน root director ของ $web container เราก็ต้องเพิ่มเข้าไปเป็นแบบนี้
- สร้าง pipeline ใน Azure Pipelines สามารถใช้ azure-pipelines.yml ข้างล่างนี้ได้เลย
- สร้าง pipeline ใหม่
- เลือก Azure Repos เป็น source repository
- เลือก repo ที่เราจะใช้
- เลือก starter pipeline
- Paste yml ข้างล่างนี้เข้าไปแทน
- Save & Run
- ลอง trigger build
- ถ้าทุกอย่างถูกต้องเราก็จะเห็นว่า มี file ใหม่ อยู่ที่ storage account แล้ว
- ลอง refresh browser ที่ access URL ดู ก็จะเห็นว่า application ของเราถูก deploy มาแล้ว
เพียงแค่นี้เราก็สามารถทำ CI / CD แบบง่ายๆให้กับ React web application ของเราได้แล้วนะครับ ถ้าเป็นแบบที่ใช้งานจริงๆ ก็คงจะต้องมีการเพิ่ม step อื่นๆ เช่น การทำ static analysis, run unit test, integration test ตามที่เราต้องการ ถ้าสนใจจะทำแนวๆนี้สามารถหลังไมค์มาคุยกันได้นะครับ
ในคราวหน้า เราจะมาดูกันว่าจะขยาย Azure Pipelines เพื่อให้รับกัน requirements ที่ ซับซ้อนขึ้น เช่น approval ได้อย่างไร
