แบบฝึกหัด - สร้างเว็บแอป Tomcat Java อย่างง่าย

  • 10 นาที

แอปพลิเคชันเว็บถูกใช้อย่างแพร่หลายในการจัดการงานในโลกแห่งความเป็นจริง เช่น การจัดการสินค้าคงคลัง ฟอร์มออนไลน์ และพอร์ทัลที่ลูกค้าเผชิญ ในโมดูลนี้ คุณจะได้เรียนรู้วิธีการสร้างและปรับใช้เว็บแอปพลิเคชัน Java โดยใช้ Apache Tomcat ซึ่งเป็นเซิร์ฟเวอร์โอเพนซอร์สที่ได้รับความนิยม

สมมติว่าคุณเป็นนักพัฒนาที่ทํางานในโครงการเพื่อสร้างแอปพลิเคชันเว็บแบบไดนามิกที่ผู้ใช้สามารถป้อนข้อมูลและโต้ตอบกับแพลตฟอร์มของคุณแบบเรียลไทม์ ไคลเอ็นต์ของคุณต้องการให้แอปนี้พร้อมใช้งานภายในเครื่องสําหรับการทดสอบ และบนระบบคลาวด์เพื่อให้เข้าถึงได้ง่าย การตั้งค่านี้ช่วยให้คุณทดสอบบนเครื่องภายในเครื่องของคุณก่อน และจากนั้น ปรับใช้กับสภาพแวดล้อมแบบไลฟ์เป็นการเปลี่ยนที่ราบรื่น การสร้างการตั้งค่านี้ตั้งแต่เริ่มต้นช่วยให้คุณมีความยืดหยุ่นสําหรับการปรับปรุงและการกําหนดค่าในอนาคต

ในโมดูลนี้ คุณสํารวจขั้นตอนที่จําเป็นสําหรับการสร้างและปรับใช้เว็บแอป Java ด้วย Tomcat คุณมีสองตัวเลือก: โคลนที่เก็บโครงการที่มีอยู่สําหรับการปรับใช้ทันทีหรือสร้างโครงการใหม่ตั้งแต่เริ่มต้นด้วย Maven โมดูลนี้ครอบคลุมถึงการตั้งค่าโครงการ Maven ของคุณ การกําหนดค่า Tomcat การปรับใช้แอปภายในเครื่อง และการใช้เครื่องมือเช่น Maven เพื่อจัดการการขึ้นต่อกันและแพคเกจ

ในตอนท้ายของโมดูลนี้ คุณจะสามารถสร้างและปรับใช้แอปพลิเคชันเว็บที่ใช้ Java บน Tomcat เตรียมคุณเพื่อสนับสนุนการปรับใช้แอปพลิเคชันเว็บทั้งในเครื่องและในสภาพแวดล้อมที่โฮสต์บนคลาวด์

สร้างเว็บแอป Java Tomcat

ในแบบฝึกหัดนี้ คุณสร้างแอปพลิเคชันเว็บ Java น้อยที่สุดที่รับข้อมูลป้อนเข้าและแสดงผลลัพธ์บนหน้าจอ จากนั้นคุณปรับใช้เว็บแอปภายในเครื่องบนคอมพิวเตอร์ของคุณโดยใช้ Tomcat คุณมีสองตัวเลือกดังต่อไปนี้:

  • ตัวเลือกที่ 1: โคลนที่เก็บตัวอย่างและปรับใช้เว็บแอปของคุณทันที
  • ตัวเลือกที่ 2: สร้างโครงการ Maven Tomcat ตั้งแต่เริ่มต้น

ตัวเลือกที่ 1: โคลนที่เก็บตัวอย่างและปรับใช้เว็บแอปของคุณทันที

เพื่อลอกแบบ repo ใช้ขั้นตอนต่อไปนี้:

  1. โคลน repo โครงการตัวอย่างโดยใช้คําสั่งต่อไปนี้:

    git clone https://github.com/MicrosoftDocs/simple-tomcat-maven-app.git

  2. นําทางไปยัง repo โครงการที่ถูกโคลน โดยใช้คําสั่งต่อไปนี้:

    cd simple-tomcat-app

ใช้ขั้นตอนต่อไปนี้เพื่อกําหนดค่าเซิร์ฟเวอร์ Tomcat ภายในเครื่องของคุณเพื่อให้คุณสามารถปรับใช้ภายในเครื่องไปยัง Tomcat:

คำเตือน

การจัดเก็บชื่อผู้ใช้และรหัสผ่านโดยตรงในไฟล์การกําหนดค่าเช่น tomcat-users.xml และ settings.xml ของ Maven ในข้อความธรรมดาไม่ถือว่าปลอดภัยและเรามักไม่แนะนําแนวทางปฏิบัตินี้โดยเฉพาะอย่างยิ่งสําหรับสภาพแวดล้อมการผลิต อย่างไรก็ตามทางเลือกอื่น ๆ อยู่นอกขอบเขตของโมดูลการฝึกอบรมนี้ อย่าใช้ชื่อผู้ใช้และรหัสผ่านจริงของคุณ!

  1. แก้ไข การประชุม/tomcat-users.xml ของไฟล์การกําหนดค่า Tomcat เพื่อให้มีลักษณะดังตัวอย่างต่อไปนี้:

    <tomcat-users>
    <user username="your-tomcat-username" password="your-tomcat-password" roles="manager-script"/>
</tomcat-users>

  2. เพิ่มข้อมูลประจําตัวของคุณไปยังไฟล์ Maven ~/.m2/settings.xml โดยใช้ตัวอย่างต่อไปนี้ ที่ซึ่งคุณแทนที่ your-tomcat-username ด้วยชื่อผู้ใช้ และ your-tomcat-password ด้วยรหัสผ่าน:

    <servers>
    <server>
        <id>TomcatServer</id>
        <username>your-tomcat-username</username>
        <password>your-tomcat-password</password>
    </server>
</servers>

  3. ใช้คําสั่งต่อไปนี้เพื่อจัดแพคเกจและปรับใช้เว็บแอปของคุณ:

    mvn clean package cargo:deploy

หลังจากการปรับใช้ คุณสามารถเข้าถึงแอปของคุณได้ที่http://localhost:8080/simple-tomcat-app

ตัวเลือกที่ 2: สร้างโครงการ Maven Tomcat ตั้งแต่เริ่มต้น

หากต้องการสร้างโครงการ Maven Tomcat ตั้งแต่เริ่มต้น คุณทํางานตามขั้นตอนหลายอย่างเริ่มจากการสร้างโครงการ Maven และลงท้ายด้วยการปรับใช้เว็บแอปของคุณไปยัง Tomcat

สร้างโครงการ Maven

หากต้องการสร้างโครงการ Maven สําหรับแอปพลิเคชันเว็บ Java ของคุณ ให้ใช้คําสั่งต่อไปนี้:

mvn archetype:generate \
    -DgroupId=com.example \
    -DartifactId=simple-tomcat-app \
    -DarchetypeArtifactId=maven-archetype-webapp \
    -DinteractiveMode=false

เอาต์พุตต่อไปนี้เป็นเรื่องปกติ:

[INFO] ----------------------------------------------------------------------------
[INFO] Parameter: basedir, Value: /home/XXXXXXXX/LearnProjects/simple-tomcat-maven-app
[INFO] Parameter: package, Value: com.microsoft.azure.samples
[INFO] Parameter: groupId, Value: com.microsoft.azure.samples
[INFO] Parameter: artifactId, Value: azure-javaweb-app-simple
[INFO] Parameter: packageName, Value: com.microsoft.azure.samples
[INFO] Parameter: version, Value: 1.0-SNAPSHOT
[INFO] project created from Old (1.x) Archetype in dir: /private/tmp/TMP/azure-javaweb-app
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  1.657 s
[INFO] Finished at: 2024-10-18T12:39:41-07:00
[INFO] ------------------------------------------------------------------------

ตอนนี้คุณมีโครงการเว็บ Maven ใหม่ในโฟลเดอร์ที่ชื่อว่า simple-tomcat-app ขณะนี้มีไฟล์และไดเรกทอรีต่อไปนี้:

└── simple-tomcat-app
    ├── pom.xml
    └── src
        ├── main
        │   ├── java
        │   ├── resources
        │   └── webapp
        │       ├── index.jsp
        │       └── WEB-INF
        │           └── web.xml
        └── test
            ├── java
            └── resources

ปรับเปลี่ยนไฟล์ Maven pom.xml

ปรับเปลี่ยนไฟล์ pom.xml โดยใช้ขั้นตอนต่อไปนี้:

  1. เปิด pom.xml และตั้งค่าเวอร์ชัน Java เป็น 21 โดยใช้ตัวอย่างต่อไปนี้:

    <java.version>21</java.version>
<maven.compiler.source>21</maven.compiler.source>
<maven.compiler.target>21</maven.compiler.target>

  2. เพิ่มปลั๊กอินการปรับใช้ Tomcat และ Azure โดยใช้ตัวอย่างต่อไปนี้:

    <!-- Tomcat 10 Maven Plugin -->
<plugin>
  <groupId>org.codehaus.cargo</groupId>
  <artifactId>cargo-maven3-plugin</artifactId>
  <version>1.9.9</version>
  <configuration>
    <!-- Container Configuration -->
    <container>
      <containerId>tomcat10x</containerId>
      <type>remote</type>
    </container>
    <!-- Configuration for Remote Deployment -->
    <configuration>
      <type>runtime</type>
      <properties>
        <cargo.remote.uri>http://localhost:8080/manager/text</cargo.remote.uri>
        <cargo.remote.username>cargo</cargo.remote.username>
        <cargo.remote.password>your-cargo-password</cargo.remote.password>
      </properties>
    </configuration>
    <!-- Deployable Artifact Configuration -->
    <deployables>
      <deployable>
        <groupId>${project.groupId}</groupId>
        <artifactId>${project.artifactId}</artifactId>
        <type>war</type>
        <properties>
          <context>${project.artifactId}</context>
        </properties>
      </deployable>
    </deployables>
  </configuration>
</plugin>

นี่คือเนื้อหาทั้งหมดของไฟล์ pom.xml :

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
                             http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.example</groupId>
  <artifactId>simple-tomcat-app</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>simple-tomcat-app</name>
  <properties>
    <java.version>21</java.version>
    <maven.compiler.source>21</maven.compiler.source>
    <maven.compiler.target>21</maven.compiler.target>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>
  <dependencies>
    <dependency>
      <groupId>jakarta.servlet</groupId>
      <artifactId>jakarta.servlet-api</artifactId>
      <version>6.0.0</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>
  <build>
    <finalName>simple-tomcat-app</finalName>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.10.1</version>
        <configuration>
          <source>${java.version}</source>
          <target>${java.version}</target>
        </configuration>
      </plugin>
      <!-- Tomcat 10 Maven Plugin -->
      <plugin>
        <groupId>org.codehaus.cargo</groupId>
        <artifactId>cargo-maven3-plugin</artifactId>
        <version>1.9.9</version>
        <configuration>
          <!-- Container Configuration -->
          <container>
            <containerId>tomcat10x</containerId>
            <type>remote</type>
          </container>
          <!-- Configuration for Remote Deployment -->
          <configuration>
            <type>runtime</type>
            <properties>
              <cargo.remote.uri>http://localhost:8080/manager/text</cargo.remote.uri>
              <cargo.remote.username>cargo</cargo.remote.username>
              <cargo.remote.password>your-cargo-password</cargo.remote.password>
            </properties>
          </configuration>
          <!-- Deployable Artifact Configuration -->
          <deployables>
            <deployable>
              <groupId>${project.groupId}</groupId>
              <artifactId>${project.artifactId}</artifactId>
              <type>war</type>
              <properties>
                <context>${project.artifactId}</context>
              </properties>
            </deployable>
          </deployables>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

สร้างอินเทอร์เฟซเว็บ

หากต้องการเพิ่มเว็บเพจ แก้ไขไฟล์ src/main/webapp/index.jsp โดยใช้ตัวอย่างต่อไปนี้:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Tomcat App</title>
</head>
<body>
    <h1>Welcome to the Simple Tomcat App</h1>
    <form action="hello" method="get">
        <label for="name">Enter your name:</label>
        <input type="text" id="name" name="name">
        <button type="submit">Submit</button>
    </form>
</body>
</html>

สร้างบริการ

servlet เป็นคลาสการเขียนโปรแกรม Java ที่ใช้เพื่อขยายความสามารถของเซิร์ฟเวอร์โดยการจัดการคําขอและสร้างเนื้อหาแบบไดนามิก Servlets ทํางานบนฝั่งเซิร์ฟเวอร์ภายในคอนเทนเนอร์เว็บ - เช่น Apache Tomcat - และใช้เพื่อประมวลผลคําขอ HTTP ในเว็บแอปพลิเคชันเป็นหลัก เมื่อไคลเอ็นต์ - ตัวอย่างเช่น เว็บเบราว์เซอร์ - ส่งคําขอไปยังเว็บเซิร์ฟเวอร์ บริการจะประมวลผลคําขอ บริการดําเนินการตรรกะทางธุรกิจที่จําเป็น - ตัวอย่างเช่น การเข้าถึงฐานข้อมูลหรือเรียกบริการอื่น ๆ - แล้วสร้างการตอบกลับ - มักจะอยู่ในรูปแบบของ HTML - เพื่อส่งกลับไปยังไคลเอ็นต์ Servlets ช่วยให้นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันแบบไดนามิกและเป็นอิสระจากแพลตฟอร์มโดยใช้ Java

เมื่อต้องสร้าง servlet ใช้ขั้นตอนต่อไปนี้:

  1. อัปเดตโครงสร้างไฟล์เพื่อเพิ่ม servlet โดยใช้คําสั่งต่อไปนี้:

    mkdir -p src/main/java/com/example && touch src/main/java/com/example/HelloServlet.java

  2. อัปเดตเนื้อหาของไฟล์ HelloSeverlet.java โดยใช้ตัวอย่างโค้ดต่อไปนี้:

    package com.example;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        response.setContentType("text/html");
        response.getWriter().write("<h1>Hello, " + name + "!</h1>");
    }
}

โครงสร้างไฟล์ใหม่ของคุณจะมีลักษณะดังนี้:

└── simple-tomcat-app
    ├── pom.xml
    └── src
        ├── main
        │   ├── java
        │   │   └── com
        │   │       └── example
        │   │           └── HelloServlet.java
        │   ├── resources
        │   └── webapp
        │       ├── index.jsp
        │       └── WEB-INF
        │           └── web.xml
        └── test
            ├── java
            └── resources

ปรับใช้กับ Tomcat ภายในเครื่อง

ใช้ขั้นตอนต่อไปนี้เพื่อกําหนดค่าเซิร์ฟเวอร์ Tomcat ภายในเครื่องของคุณเพื่อให้คุณสามารถปรับใช้ได้:

คำเตือน

การจัดเก็บชื่อผู้ใช้และรหัสผ่านโดยตรงในไฟล์การกําหนดค่าเช่น tomcat-users.xml และ settings.xml ของ Maven ในรูปแบบข้อความธรรมดาไม่ปลอดภัยและไม่แนะนําโดยทั่วไปโดยเฉพาะอย่างยิ่งสําหรับสภาพแวดล้อมการผลิต อย่างไรก็ตามทางเลือกอื่น ๆ อยู่นอกขอบเขตของโมดูลการฝึกอบรมนี้ อย่าใช้ชื่อผู้ใช้และรหัสผ่านจริงของคุณ!

  1. แก้ไข การประชุม/tomcat-users.xml ของไฟล์การกําหนดค่า Tomcat โดยใช้ตัวอย่างต่อไปนี้:

    <tomcat-users>
    <user username="your-tomcat-username" password="your-tomcat-password" roles="manager-script"/>
</tomcat-users>

  2. เพิ่มข้อมูลประจําตัวของคุณไปยังไฟล์ ~/.m2/settings.xml ของ Maven โดยใช้ตัวอย่างต่อไปนี้ แทน your-tomcat-username ด้วยชื่อผู้ใช้และ your-tomcat-password ด้วยรหัสผ่าน:

    <servers>
    <server>
        <id>TomcatServer</id>
        <username>your-tomcat-username</username>
        <password>your-tomcat-password</password>
    </server>
</servers>

ปรับใช้เว็บแอปของคุณกับ Tomcat

ใช้คําสั่งต่อไปนี้เพื่อจัดแพคเกจและปรับใช้เว็บแอปของคุณ:

mvn clean package cargo:deploy

หลังจากการปรับใช้ แอปของคุณจะพร้อมใช้งานที่http://localhost:8080/simple-tomcat-app