サーブレット/JSPの学習環境をVSCodeで構築

ショコラ

脱Eclipse
動作確認環境　macOS Sonoma 14.5
2024/06/28 一部改訂
2024/07/02 ミドルウェアのバージョン改訂


1. 必要なツールのインストールとPATH設定

  • JDK 21 のインストール： インターネットから落としてきてください。https://www.oracle.com/java/technologies/downloads/

  • Maven 3.9.6 のインストール：Maven をダウンロードし，解凍して任意のディレクトリに配置してください。https://maven.apache.org

  • Tomcat 10.1.25 のインストール： Tomcat をダウンロードし，解凍して任意のディレクトリに配置してください。https://tomcat.apache.org/download-10.cgi

  • PATH設定： /Users/ユーザ名/.zshrcを編集して，JDK，Maven，TomcatのPATHを通します。以下は例です。

# Java path
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk-21.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

# Maven path
export PATH=~/apache-maven-3.9.6/bin:$PATH

# Tomcat path
export CATALINA_HOME=~/apache-tomcat-10.1.25
export PATH=$CATALINA_HOME/bin:$PATH

  • .zshrcは隠しファイルなので，finderでShift + cmd + . で表示させることができます。

  • Finderでファイルを右クリックしてoptキーを押すと，Pathがコピーできます。

  • Windowsの場合はhttps://www.javadrive.jp/start/install/index4.htmlなどを参考に実施してください。

  • PATHが通っているか，以下のコマンドで確認することができます。


$ java -version
$ mvn -version

2. VSCodeの拡張機能のインストール

VSCodeに拡張機能をインストールして，種々の設定を行ってください。

  • Java Extension Pack

    • フォーマッタを利用するために，VSCodeの設定を次のように変更しておくと良いでしょう。

    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "java.format.settings.url": "https://raw.githubusercontent.com/google/styleguide/gh-pages/eclipse-java-google-style.xml",
    "java.format.settings.profile": "GoogleStyle",

  • Community Server Connector

    • 次の設定をしておいてください。

    "rsp-ui.enableStartServerOnActivation": [
        {
            "id": "redhat.vscode-community-server-connector",
            "name": "Community Server Connector",
            "startOnActivation": true
        }
    ],

  • JSP Language Support

    • 次の設定をしておいてください。

"emmet.includeLanguages": {
    "jsp": "html"
}

3. Mavenプロジェクトの作成

  • ターミナルで，作業したいディレクトリに移動してください。

  • $ code . でVSCodeを立ち上げてください。もしくは，VSCodeを立ち上げてから，Open Folderでフォルダを開いてください。

  • コマンドパレットを開いくてください（Cmd + Shift + P）。

  • Maven: Create Maven Project を検索して選択してください。

  • Archetype maven-archetype-webapp -> version 1.4 を選択してください。

  • Group Id com.example -> Artifact Id classroom など，任意のIDを設定してください。

  • VSCodeのターミナルで'version'を訊かれるのでそのままEnterを押下してください。

  • Comfirm properties configuration もそのままEnterを押下してください。

  • BUILD SUCCESSしたらEnterで抜けてください。


4. デバッグ起動用のTomcatサーバの設定（Community Server Connectorを使用）

  • VSCode左側にあるエクスプローラの「SERVERS」タブを開いてください（もしなければ，3点リーダから✔を入れる）。

  • Community Server Connectorを右クリック -> Create New Server

  • No, use server on disk

  • ダウンロードしたapache-tomcat-10.1.25 のディレクトリを選択

  • Server NameをTomcat 10.1.25 にしてFinish


5. Mavenプロジェクトの構成

  • pom.xml ファイルを開き、以下のように変更または追記してください。

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>21</maven.compiler.source>
    <maven.compiler.target>21</maven.compiler.target>
  </properties>

  • 保存すると右下にメッセージ（A build file was modified. Do you want to synchronize the Java classpath/configuration?）が出るので，Yesを選択してください。

<dependencies>
  <!-- https://mvnrepository.com/artifact/jakarta.servlet/jakarta.servlet-api -->
  <dependency>
      <groupId>jakarta.servlet</groupId>
      <artifactId>jakarta.servlet-api</artifactId>
      <version>6.0.0</version>
      <scope>provided</scope>
  </dependency>
</dependencies>

6. テスト用Servletの作成

  • src/main/java/jp/co/collasho/classroom ディレクトリを作成してください。jp 以下は何でも構いません

  • FruitServlet.java ファイルを作成してください。

package jp.co.collasho.classroom;

// Jakarta Servlet 6.0 API ~
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/FruitServlet")
public class FruitServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException {
        res.setContentType("text/html; charset=utf-8");
        try (PrintWriter out = res.getWriter()) {
            out.println("<html><body>");
            out.println("サーブレット: Hello Servlet World, Guys!<br>");
            out.println(getServletContext().getServerInfo());
            out.println("</body></html>");
        }
    }
}

  • VSCode左側にあるエクスプローラに「JAVA PROJECTS」が出来ていると思いますので，開いておいてください。基本的に，プロジェクトファイルの操作はここから行います。


7. プロジェクトのビルドとデプロイ

  • プロジェクトのビルド： VSCodeのターミナルで以下のコマンドを実行してください。

$ cd classroom
$ mvn clean package

  • VSCodeのサイドバーでCommunity Server ConnectorのTomcat 10.1.25 を右クリックし，Add Deploymentを選択してください。

  • classroom/target 直下に生成された classroom.war ファイルを選択してください。何か訊かれますが-> Noを選択してください。

8. アプリケーションの実行

  • Tomcat 10.1.25 を右クリックし，Start Server を実行してください。

  • もう一度右クリックし，Server Action -> Show in Brouser

    • http://localhost:8080/classroom/ を叩くとHello, World! メッセージが表示されます。

    • http://localhost:8080/classroom/FruitServlet を叩くとサーブレット: Hello Servlet World Guys! メッセージが表示されます。

  • サーブレットの内容を書き換えるなどして，再度 mvn clean package よりビルドし，ブラウザをリロードしてください。更新できていれば環境構築が完了です。

  • 関心がある人は応用編に進んでみてください。

文献

いいなと思ったら応援しよう！