เริ่มต้น Jenkins part 3: Maven project

part นี้ผมจะพามารู้จักกับภาพรวมของการทำงานร่วมกันระหว่าง Git, Github, Jenkins และ Maven ครับ เราจะสร้างโปรเจกต์จาวาด้วย Maven แล้ว deploy มันบน Apache Tomcat

เนื่องจากหารูปภาพไม่ได้ ก็วาดเองซะเลย

หลังจากที่เพื่อนๆได้อ่าน part 2 และได้ทดลองติดตั้งพร้อมทั้งรัน Jenkins บนเครื่อง (local) ของตัวเองแล้ว

เริ่มต้น Jenkins part 2: บนเครื่องตัวเอง

part นี้ผมจะพามารู้จักกับภาพรวมของการทำงานร่วมกันระหว่าง Git, Github, Jenkins และ Maven ครับ ผลลัพธ์สุดท้ายเราจะได้ไฟล์นามสกุล .war

Work Offline

ทำความเข้าใจภาพข้างต้นก่อน ให้เราเป็นโปรแกรมเมอร์ที่อยู่ด้านขวาสุดของภาพ งานของเราก็คือเขียนโค้ด ให้เป็นว่าเขียนโปรแกรมจาวาก็แล้วกัน แต่เขียนจาวาเพียวๆเป็นโปรเจกต์ที่มีความซับซ้อนมากๆก็ไม่ไหว เราจึงเลือกใช้เครื่องมือที่ช่วยจัดการไลบรารีต่างๆของจาวา ชื่อของเขาคือ Maven หรือพูดว่านี่เป็นโปรเจกต์ Maven ก็ได้

หลังจาก Maven ทำงานเสร็จ มันจะให้ผลลัพธ์เป็นไฟล์นามสกุล .war ไฟล์นี้เราจะนำไป deploy บน web server ที่เข้าใจการทำงานของมัน เราสามารถติดตั้ง web server ไว้ภายในเครื่องได้ ในที่นี้ผมจะเลือก Apache Tomcat

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

เอาล่ะ ทั้งหมดที่กล่าวมานี้ยังอยู่ในเครื่องคอมฯของเรา ขอเรียกว่า work offline

Work Online

Git ที่ดูแลโปรเจกต์ของเราต่อไปจะถูกสร้างหรือจะให้คัดลอกจากโปรเจกต์ของเราไปไว้บนอินเตอร์เน็ต ผู้ให้บริการด้านนี้มีหลายจ้าว จ้าวดังที่ให้บริการแหล่งเก็บ Git ชื่อว่า Github

เมื่อ Git ภายในโปรเจกต์ของเรา ​(local) ได้รู้จักกับ Git ภายในโปรเจกต์เดียวกันบน Github (server) แล้ว การส่งคำสั่ง push จะเป็นการ update สิ่งที่เปลี่ยนแปลงจาก Git local ไปยัง Git server เกิดสิ่งที่เรียกว่า change

Jenkins จะถูกติดตั้ง plugin ของ Git และเชื่อมเส้นทางไปยัง Github เพื่อทุกครั้งที่เกิด change พ่อบ้านก็ทราบในทันทีว่าจะต้อง build โปรเจกต์ใหม่หรือทำตามคำสั่งใดๆที่เราได้กำหนดไว้

ในที่นี้เราจะติดตั้ง plugin ของ Maven ให้แก่ Jenkins ด้วย เพื่อที่พ่อบ้านจะได้รันคำสั่งของ Maven ให้เกิดการสร้าง .war

เรียกว่าใช้งานต่อกันเป็นทอด

ในที่สุด .war จะถูกนำไป deploy บน web server ที่เข้าใจการทำงานของมัน ในที่นี้ผมจะเลือก Apache Tomcat เช่นกัน

Let Get Started

มาสร้างโปรแกรมจาวาเว็บแบบบ้านๆ “Hello Jenkins!” ตั้งชื่อโปรเจกต์ว่า HelloJenkins โดยใช้ Maven มาจัดการโปรเจกต์

เราสามารถสร้าง​โปรเจกต์ Maven ได้หลายวิธี ไม่ว่าจะเป็น command line (ดิบๆ) หรือใช้พวก tool generator ก็ได้ เช่น Spring Boot Initializr, Eclipse, Netbeans, IntelliJ IDEA หรืออื่นๆ

ตัวอย่าง Spring Boot Initializr

Google ไปว่า spring boot initializr

อย่างไรขอให้ใช้ที่ถนัดนะครับ ขึ้นโปรเจกต์จาวาเว็บให้ได้ “Hello Jenkins!” ถือว่าสำเร็จผลทั้งสิ้น

หรืออยากทำไปพร้อมกับผมก็ได้นะ แต่จะดิบหน่อย

Create Maven Project แบบดิบๆ

ขั้นแรกตรวจสอบก่อน เครื่องลง maven ไว้หรือยัง

mvn --version

ผมได้

Apache Maven 3.6.0

มีแล้วก็จัดสด บอก mvn ขอโปรเจกต์หน่อย เป็นเว็บนะเธอ

mvn archetype:generate -DgroupId=com.pros -DartifactId=HelloJenkins -DarchetypeArtifactId=maven-archetype-webapp

ได้โครงสร้างโปรเจกต์แล้ว เย้

เปิดด้วย VS Code

ให้ Terminal เปิดไปที่โปรเจกต์ แล้วรัน

mvn package

มาแบบสวยๆ

หึหึหึ

ผลลัพธ์ที่ได้คือ HelloJenkins.war

อ้างอิง

Maven - Maven Getting Started Guide

ติดตั้ง Apache Tomcat

โปรแกรม server ที่เข้าใจและสามารถจัดการ request กับ response ได้เรียกว่า web server แน่นอนว่า Apache Tomcat คือหนึ่งในประเภทนี้

Google หาสิ

apache tomcat download

พิจารณาเวอร์ชัน อื่ม…

โอเคร โหลด Tomcat 7 แล้วกัน เลือกเป็นไฟล์ .zip

จากนั้นย้ายไปที่ home directory ก็ดูเรียบร้อยหน่อย

แล้วเข้าไปยัง apache-tomcat-7.0.96/bin

ผมใช้ macOS ผมสนใจไฟล์ชื่อ catalina.sh แต่หากเพื่อนๆใช้ Windows ก็อาจสนใจไฟล์ชื่อ startup.bat และ shutdown.bat

macOS จะต้องให้อนุญาตไฟล์ catalina.sh สามารถ execute ได้ พิมพ์

chmod +x catalina.sh

ต่อด้วย

./catalina.sh

เจอ

permission denied: ./catalina.sh

งั้น

sudo ./catalina.sh

ปรากฏ

ทีแรกไม่เข้าใจว่ามันคืออะไร แต่พอดูดีๆ อ่อ

./catalina.sh run

สำเร็จ!

ดังนั้นเปิด Browser แล้วพิมพ์ localhost:8080

แหม ร้ายกาจ

Deploy .war (to local server)

ขอเน้นว่าที่เราทำอยู่ ได้ทำในเครื่องคอมฯของตนเองล้วนๆ (local server) ซึ่งเวลานี้เรามี .war และ Apache Tomcat web server พร้อมปฏิบัติการ

เอาแบบง่ายๆก่อน จาก home directory ตรงไปยัง

cd apache-tomcat-7.0.96/webapps

จากนั้นคัดลอก HelloJenkins.war มาวางไว้ด้านใน

เมื่อวางลงไปแล้ว .war จะถูกแยกออกโดยอัตโนมัติ (เพราะ web server รันอยู่) หากไม่เป็นตามนี้ให้ restart web server

เปิด Browser ใส่ / ตามด้วยชื่อ HelloJenkins แบบนี้

เป็นอันว่าที่ local server สามารถ deploy ไฟล์ .war บน Apache Tomcat web server ได้สำเร็จ!

แต่เอ้~ ถ้าจะขอแก้ไขข้อความเป็น “Hello Jenkins!” ล่ะ จะทำอย่างไร? ถูกต้องแล้ว เราก็ต้องแก้โค้ด ทำ .war แล้ว deploy ขึ้น server ใหม่ ทำอย่างนี้เรื่อยไป เบื่อใช่ไหม มาถูกทางแล้ว เดี๋ยวบอกให้

อะไรนะ? อยากได้ตัวอย่าง อะอะ ก็ได้

ตัวอย่าง สมมติว่าต้องการเพิ่ม servlet จัดการ request และ response ตอบกลับไปยัง client (แบบง่ายๆ)

เปิดไฟล์ pom.xml แท็ก dependencies เพิ่ม

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>
</dependency>

บันทึก

เปิดไฟล์ web.xml เพิ่ม

<servlet>
  <servlet-name>hello</servlet-name>
  <servlet-class>com.pros.example.HelloServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
  <servlet-name>hello</servlet-name>
  <url-pattern>/hello</url-pattern>
</servlet-mapping>

ทีนี้สร้างคลาส HelloServlet.java โดยวางไว้ใน com.pros.example

mkdir -p src/main/java/com/pros/example

ต่อด้วย

cd src/main/java/com/pros/example
touch HelloServlet.java

เขียนจ้า

package com.pros.example;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HelloServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String name = req.getParameter("name");
    if(name == null) {
      name = "Jenkins!";
    }
    response.getWriter().println("Hello " + name);
  }
}

ทีนี้รันสิ

cd /Users/pros/works/maven/HelloJenkins
mvn package

error

Source option 5 is no longer supported. Use 7 or later.

Target option 5 is no longer supported. Use 7 or later.

เปิด pom.xml เพิ่ม

<properties>
  <maven.compiler.source>1.8</maven.compiler.source>
  <maven.compiler.target>1.8</maven.compiler.target>
</properties>

รัน

mvn package

ก็จะได้ HelloServlet.class

ก่อนจะคัดลอก HelloJenkins.war ไป deploy ลองมาดูอีกวิธีหนึ่ง ผ่าน UI กันบ้าง

Apache Tomcat: deploy ผ่านเมนู Manager App

เมื่อเรียกไปที่ localhost:8080 (Apache Tomcat เวอร์ชัน 7) มองตรงเมนูทางขวา จะเจอปุ่ม Manager App

กดเลย

มันจะถาม username กับ password อื่ม… จำไม่ผิดจะยังไม่สามารถทำได้นะ งั้นให้ไปที่

apache-tomcat-7.0.96/conf

มองหาไฟล์ tomcat-users.xml

เพิ่ม role ชื่อ manager-gui กำหนด username เป็น admin และ password เป็น 1234 หรือตามใจฝัน

บันทักแล้ว restart web server

ขอไป localhost:8080 จากนั้นกดปุ่ม Manager App

ซึ่งเราสนใจส่วนนี้

หมายเหตุ โปรดอย่าลืมว่าวิธีนี้ไฟล์ .war ต้องอยู่บนเครื่อง server แล้วนะครับ

แล้ว deploy

ปรากฏว่ามีตัวเก่า

FAIL — War file [HelloJenkins.war] already exists on server

เช่นนั้นกดปุ่ม Undeploy แล้วไป deploy ใหม่

ทดสอบเรียกไป

http://localhost:8080/HelloJenkins/hello

งดงาม

ลองใส่ name parameter เป็น ProS

http://localhost:8080/HelloJenkins/hello?name=ProS

นายทำได้เห็นไหม

เป็นว่าเตรียมโปรเจกต์เสร็จแล้ว เจอกันใหม่ part หน้าครับเพื่อนๆ