มาลองทำ Continuous Integration กัน

เชื่อว่าหลายคนคงจะเคยได้ยินคำว่า Continuous Integration หรือ CI กันมาแล้ว  เพราะสมัยนี้ ใครๆ เค้าก็พูดถึง และก็ทำกันใช่มะ

แต่ก็ยังมีอีกหลายๆ คนที่เคยได้ยินอย่างเดียว แต่ไม่เคยทำจริงจังสักที

งั้นวันนี้ เราจะมาทำความรู้จักกับ CI กัน และจะมาลองใช้เครื่องมือในการทำ CI ไปพร้อมๆ กัน และจะรู้ว่า มันไม่ได้ยากเลยยยย

Continuous Integration (CI) คืออะไร?

Continuous Integration แปลเป็นภาษาไทยแบบตรงๆ เลย ก็แปลว่าการรวบรวมอย่างต่อเนื่อง อ่านแล้วจะงงๆ หน่อย ว่าตกลงแล้วจะให้รวมอะไรกันนะ?

ลองนึกภาพ เราเป็น developer เรานั่งทำงานกับคนอื่นๆ ทำงานกันแบบเป็นทีม จะมีแนวทาง หรือเครื่องมือที่เราใช้ร่วมกัน เพื่อให้การทำงานในทีมของเรานั้นราบรื่นมากขึ้น?

ก็เริ่มตั้งแต่ เราใช้ version control เช่น git เพื่อให้ทุกๆ คนในทีมได้ code base ที่ตรงกันแต่ละคน และเราก็สามารถควบคุม version ของโค้ด ที่จะไปแสดงผลอยู่บนเครื่อง server ในแต่ละเครื่อง ไม่ว่าจะเป็น server สำหรับ test หรือจะมีเป็น server สำหรับใช้งานจริง (production server)

นอกจากนี้ เราก็ยังจะต้องเขียน unit test อีกด้วย เหตุผลก็เพื่อมาเช็คการทำงานของฟังก์ชันต่างๆ ของโค้ดที่เราเขียน ให้มั่นใจว่าฟังก์ชันที่เราเขียนนั้น ทำงานถูกต้องตามที่เราคิดว่ามันจะเป็น

ซึ่งหลังจากที่เราเลือกงานใดงานหนึ่งมาทำแล้วเนี่ย..​ เราก็จะแยก branch ออกมาจาก branch หลัก จากนั้นก็เขียนโค้ดของเราไปเรื่องๆ จนทุกอย่างทำงานได้อย่างถูกต้อง เสร็จสมบูรณ์แล้ว เราก็จะให้เพื่อนรีวิวโค้ด และ merge โค้ดของเรา เข้าไปที่ branch หลักไป ดีพลอยไปที่ test server เมื่อเทสต์ทุกอย่างเสร็จเรียบร้อยไม่มีข้อผิดพลาด ก็จะดีพลอยไปที่ production server

นี่แหละ คือ “Integration” 

ทีนี้ practice ที่ดีของ integration นี้ก็คือ การทำบ่อยๆ เทสต์บ่อยๆ ดีพลอยบ่อยๆ รับ feedback กลับมาพัฒนาเร็วๆ  ทีนี้กระบวนการของการจะเทสต์บ่อยๆ ดีพลอยบ่อยๆ นี่ เราทำยังไงกันดี?

ลองนึกภาพตามอีกรอบนึง ถ้าเกิดเราจะต้องมานั่ง shell เข้าไปที่เครื่อง test server แล้วก็ไปนั่งรัน unit test และ acceptance test ให้แน่ใจว่าไม่มีอะไรพัง เสร็จแล้วก็ดีพลอยไป server เครื่องถัดไป อาจจะเป็น staging server แล้วมานั่งรัน unit test กับ acceptance test อีก พอผ่านก็ดีพลอยไป production server แล้วก็ shell เข้าไปรัน unit test กับ acceptance test อีกที อ่านดูแล้วก็จะเหนื่อยๆ หน่อย  ขนาดแค่พิมพ์อธิบายความเจ็บปวดแบบนี้แล้ว ยังรู้สึกว่ามันเหนื่อยเลย

เอาล่ะ เราก็คงไม่อยากจะทำอะไร manual ไปซะหมด เพราะแค่คิดก็เหนื่อยแล้ว..

ก็เลยมีคนคิดค้นเครื่องมือในการช่วยทำ CI แบบ automated ขึ้นมานั่นเอง

หลายๆ ที่ก็จะเลือกใช้เครื่องมือที่แตกต่างกันออกไป เช่น JenkinsCI, Travis, CircleCI, etc… ตามแต่ใจเธอต้องการ

.

.

ในวันนี้.. เราได้เลือก CircleCI 2.0 มาลองเล่นรัน unit test กันดู

เหตุผลที่เลือก CircleCI ก็คือ ไม่จำเป็นต้อง host เอง, ฟรีในระดับที่ใช้งานได้, ต่อกับ github ได้แบบง่ายมากกกกก และยัง config ง่ายด้วย

Getting started with CircleCI 2.0

ก่อนอื่นเลย..​ เราต้อง sign up CircleCI ก่อน ซึ่งวิธีการก็สามารถทำได้ตาม https://circleci.com/signup/ ลิงค์นี้เลย

หลังจากเรากด Signup นี้ เราจำเป็นจะต้องมี account ของ Github หรือไม่ก็ Bitbucket นะคะ ถ้าใครยังไม่มี ก็สามารถสมัครกันก่อนได้เลย จากนั้นก็ค่อยมา Signup และ authorize CircleCI ให้สามารถเข้าถึงข้อมูลของ repository ของเราได้

เสร็จจากขั้นตอนการ authorize แล้ว เราก็จะเห็นหน้า CircleCI dashboard หน้าตาก็จะประมาณนี้

ไม่ต้องตกใจนะคะ ว่าทำไมชื่อ username เป็นชื่อนี้ 5555

จากนั้น ถ้าใครยังไม่มี repository ที่จะเอามาใช้งาน ก็ลอง folk repository hello-circleci มาที่ account ของตัวเอง

ใน repository นี้ ประกอบไปด้วยไฟล์ที่สำคัญคือ

  1. index.js ที่ข้างในมีฟังก์ชันบวกเลข 2 ตัว
  2. ไฟล์ test.js เป็น unit test ที่เทสต์ฟังก์ชัน add ของเรา

ทีนี้เดี๋ยวเรามาเริ่ม config CircleCI ไปพร้อมๆ กันดีกว่า ขอบอกผลลัพธ์สุดท้ายไว้ก่อนดีกว่า ว่าเราจะสามารถรัน unit test บน CircleCI ได้หลังจากที่เราเปิด Pull Request หรือ merge feature branch ของเราเข้า branch หลัก

.

.

CircleCI Configuration

ขั้นแรก เราจะต้องสร้าง directory ขึ้นมาที่ root project ของเรา ให้ชื่อว่า “.circleci” และข้างใน directory นี้ ก็จะต้องมีไฟล์ชื่อว่า “config.yml” ดังนั้น ถ้าเสร็จขั้นตอนนี้แล้ว เราก็จะได้ของข้างใน hello-circle หน้าตาประมาณนี้

hello-circleci
|__ .circleci
|   |__ config.yml
|__ index.js
|__ test.js
|__ ...

ขั้นสอง เรามาเริ่ม config ข้างในไฟล์ config.yml กันดีกว่า (เสร็จแล้วอย่าลืม push เข้า GitHub repository นะ)

version: 2 
jobs:  
  build:  
    docker:  
      - image: circleci/node:8.9.1 
    steps:  
      - checkout  
      - run:
          name: Install Dependencies
          command:
            yarn install
      - run:
          name: Run Tests
          command:
            yarn test

บรรทัด 1: version คือ เวอร์ชั่นของ CircleCI ซึ่งเราจะใช้ version 2.0 นั่นเอง

บรรทัด 2: jobs โดยเราสามารถ define job ที่ต้องการให้ CircleCI รันได้หลายๆ ตัว และสามารถตั้งชื่อให้ job ได้อีกด้วย

บรรทัดที่ 3: ส่วนใหญ่แล้วเราจะต้อง define job ที่ชื่อว่า “build” ด้วยเสมอ เพราะเป็น default entry-point ที่ CircleCI จะรันก่อนเป็นอันดับแรก แต่ถ้าเราต้องการเปลี่ยนชื่อจาก build เป็นชื่ออื่นๆ ก็ไม่ใช่ว่าจะทำไม่ได้ แต่จะต้องเขียน workflow อีกด้วย ใครสนใจอยากลองเล่นดูสามารถหาข้อมูลเพิ่มเติมได้ที่ document เลยค่ะ

บรรทัดที่ 4 – 5: docker เป็น option หนึ่งในการรัน job ซึ่งจะเป็นตัวกำหนด environment ของการรัน job นี้ โดยในตัวอย่างข้างบน เราจะใช้ docker image circleci/node:8.9.1

บรรทัดที่ 6 – 15: steps ก็คือสิ่งที่เราอยากจะให้เกิดขึ้นในการรัน job นี้

  • “checkout” อยู่ด้วย ความหมายก็คือการเอาโค้ดจาก repository มารันบน working directory ของ CircleCI นั่นเอง
  • “run” ก็คือ run command อะไรสักอย่าง สามารถตั้งชื่อ command ที่จะรันให้ high level ขึ้นมาได้อีก คือดีงาม เข้าใจง่าย

.

.

Add projects to CircleCI

และแล้วก็มาถึงขั้นตอนที่สำคัญอีกขั้นตอนหนึ่ง ก็คือการเอาโปรเจคบน GitHub มารันบน CircleCI เย่

อย่างแรกก็คงจะต้องเข้าไปที่หน้า dashboard ของ CircleCI กันก่อน ยังจำได้ไหม?

จากนั้นก็เลือก “ADD PROJECTS” ที่อยู่ทาง side bar ด้านซ้ายมือ

จากนั้นเราก็จะพบกับ repository ที่เราคุ้นเคย กดเลือกที่ “Setup Project” เลย

เมื่อเรามั่นใจกับ config ที่เราเขียนว่ามันอยู่บน repository แล้ว ก็ลองกดปุ่ม “start building” ได้เลย!

ผลลัพธ์ก็ควรจะออกมาหน้าตาประมาณนี้นะ~

เป็นอัน test ผ่านหมด สวยงามจริงๆ

ปล. เมื่อเราผ่านมาประมาณนี้แล้ว เราจะเขียน config.yml ที่จะช่วยให้ CircleCI ทำงานได้ดีขึ้น อย่างเช่น การทำ dependencies cache หรือการทำ workflow เป็นต้น

.

.

จะเห็นได้ว่า ไม่ยากเลยใช่ไหมกับการ setup CI ขึ้นมา เดี๋ยวนี้อะไรๆ ก็ดูง่ายขึ้นไปเสียหมด ถ้าง่ายอย่างนี้ ทำไว้ก็ไม่เสียหายอะไรใช่ไหมล่ะ?

ใครอยากอ่านรายละเอียดอะไรเพิ่มเติม สามารถอ่านเลยที่นี่ https://circleci.com/docs/2.0/ document ดีงาม

หวังว่าบล็อคนี้จะความยาวไม่ยาวจนเกินไป ฮ่าๆๆๆ กลับไปอ่านข้างบนอีกทีนี่แบบว่า ถ้าเป็นตัวเองตัวเองจะกลับมาอ่านไหมเนี่ยยย.. แต่ไม่เป็นไรหรอกเนอะ ความรู้ทั้งนั้น

ใครอ่านถึงจุดนี้ อยากจะกราบเบญจางคประดิษฐ์มากๆ เลยค่ะ จริงๆ แล้วบล็อคนี้ใช้เวลาเขียนพอสมควรเลย แล้วก็ตั้งใจอยากจะแชร์จริงๆๆๆๆๆ อ่านจบแล้วแสดงความคิดเห็นกันได้นะคะ หรือจะแชร์กันเยอะๆ ก็ไม่ว่าอะไรนะ โฮะๆๆๆๆๆ

ขอบคุณทุกคนค่ะที่อยู่เป็นเพื่อนกันจนถึงจุดนี้.. สาธุ

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s