JSPやServlet(Java Webアプリ)を動かすための環境構築手順と用語のまとめ。
単にコンパイルするだけでなく、Webコンテナ(Tomcat)などの環境が必要となるらしい。
VScodeでの実践
1. 用語解説
Webアプリが動く仕組みのイメージ:
Apache (Webサーバー) → Tomcat (Webコンテナ) → Java (Servlet/JSP)
| 用語 | 説明 |
|---|---|
| JSP | HTMLの中にJavaを埋め込めるファイル(拡張子 .jsp)。表示周りの処理が得意。 |
| Servlet | Javaコードの中にHTMLを出力する処理を書くイメージ。Get / Post 通信などの制御処理が得意。 |
| Get / Post | Webリクエストの種類。フロント(画面)からバックエンド(サーバー)へデータを送る手段。 ネットワーク関係で結構重要なので、必要なら理解を深める必要あると思う |
| Tomcat | Webコンテナ。サーバー上でJavaのWebアプリを動かすためのエンジン。これがないとjavaが動かせないらしい。jakarta.servlet.http.HttpServlet; などを提供、実行する。 |
| Apache | Webサーバー。URLを受け取り、適切なファイルを返す役割(Tomcatの手前にいることが多い)。 |
| pom.xml | Mavenの設計図。依存関係(ライブラリ)やビルド手順を記述するXMLファイル。 |
| Maven | Javaのビルドツール。コンパイルやライブラリ管理を自動化してくれる。 |
2. 環境構築手順
① Apache Tomcat のインストール
実行環境(Webコンテナ)を整える。今回はバージョン 10.1.50 を使用。
-
公式サイト: Apache Tomcat® - Welcome!
-
手順: インストーラーをダウンロードし、基本的にはデフォルト設定のままインストールを完了させる。
② ディレクトリ構成の作成
Mavenプロジェクトの一般的なディレクトリ構造に合わせてフォルダを作成する。
プロジェクト名/
├── pom.xml ← (設定ファイル:Mavenの設計図)
└── src/
└── main/
├── java/ ← (Javaのソースコード置き場)
│ └── com/
│ └── example/ ← (パッケージ名:任意)
│ └── YourServlet.java
│
└── webapp/ ← (Web公開用ルート:HTML/CSS/JS)
├── index.jsp
├── input.html ← (★作成するHTML)
├── success.html
├── styles.css
├── scripts.js
└── WEB-INF/ ← (ブラウザから直接アクセスさせない場所)
└── web.xml ← (設定ファイル:省略可能な場合もあり)
③ pom.xml の配備
pom.xml に依存関係などを記述する。
- ※エディタ上で謎のエラーが出る場合は、pom.xml を右クリック → 「Reload Project」 で直ることが多い。
④ Maven のインストール
ビルドツールをPCに導入する。
⑤ VS Code への Tomcat 登録
VS Code上でTomcatを操作できるように設定する。
-
VS Codeの Servers パネルを開く。(サイドバー下部や拡張機能エリアにある)
-
「Create New Server」(またはサーバーアイコン)をクリック。
-
「No, use server on disk」 を選択。
-
解凍済みの
apache-tomcat-10.x.xxフォルダを選択する。 -
サーバーの種類で 「Apache Tomcat 10.x」 を選択。
-
「Finish」で完了。
Tips: サーバー起動時にPending状態で止まる場合は、ポート番号が競合している可能性があるため、Serverの設定(Edit Server)からポート番号を変更する。
3. ビルドと実行(デプロイ)
手順1:Mavenビルド
VS Codeの Maven パネルから実行する。
-
ctrl+shift+Pでコマンドパレットを表示
-
create java programs で検索し、maven を選択。
-
Maven パネルが出現するので展開し、プロジェクト名(
localAppsなど) > Lifecycle を開く。 -
cleanを実行(推奨:古いファイルを掃除)。 -
packageを実行(ビルド作成)。- 成功すると
targetフォルダ内に.warファイルが生成される。
- 成功すると
手順2:Tomcatへのデプロイ
-
Servers パネルで、登録した
Apache Tomcat 10.xを確認。 -
右クリックメニュー等から 「Add Deployment」 を選択。
-
「No, use server on disk」 →
targetフォルダ内の.warファイル を選択。
手順3:サーバー起動と確認
-
Apache Tomcat 10.xを右クリックして 「Start」。 -
デプロイしたアプリを右クリックして 「Publish Server (Full)」。
- 状態が
Started (Synchronized)になればOK。
- 状態が
-
ブラウザで以下のURLにアクセスして動作確認を行う。
Plaintext
http://localhost:8080/finalName/home.html
※ 8080 は設定したポート番号、learn は pom.xml の <finalName> で設定した名前。home.htmlは初期画面