Mavenを使ったWebアプリケーションの作成と実行

# はじめに
こんばんわ、きりです。
本記事は[Nablarchを使ってみよう](https://qiita.com/kirin1218/items/242ee0f174f1cb12ef17)のサブ記事として作成しております。

今回はNablarchの利用前に、MavenのテンプレートよりWebアプリケーションの作成を行ってみます。

本記事以外のコンテンツは[こちら](https://qiita.com/kirin1218/items/242ee0f174f1cb12ef17#nablarch%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A8%98%E4%BA%8B%E4%B8%80%E8%A6%A7)から閲覧可能です。

なるべく、初心者目線で作成するつもりですが、分かりづらい部分ありましたら、コメント頂きたいです。

# 動作環境
|種類|バージョン|
|---|---|
|OS|Windows Professional 20H2|
|Eclipse|2022 Full Edition|

※Eclipseのダウンロードについては、[こちら](https://qiita.com/kirin1218/items/02bfeb333335842c56ae)の記事をご確認ください。

# テンプレートプロジェクトの作成
メニュー>ファイル>新規>プMavenプロジェクトをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/59136059-a5ac-0fc1-01d7-39d1fbd16b08.png)

新規Mavenプロジェクトダイアログデフォルトのまま、次へボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/c3f1fc4b-0d76-b8ed-119b-cf25cecd10aa.png)

以下のアーキタイプを選択し、次へボタンをクリックします。
|項目|値|
|---|---|
|グループId|org.apache.maven.archetypes|
|アーティファクトId|maven-archetype-webapp|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/07038781-a7d8-e9d0-2834-52bcaf880b75.png)

※Mavenリポジトリからアーキタイプ(テンプレート）を取得するのに長くて10分くらいかかる場合があります（なぜか）。

以下の情報をクリックし、
|項目|値|例|
|---|---|---|
|グループId|任意の値|com.example|
|アーティファクトId|任意の値|web-app-sample|
|バージョン|任意の値|0.0.1-SNAPSHOT|
|パッケージ|任意の値|com.example.webappsample|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/4b6588f5-369f-611d-1c83-dc034939cd88.png)

# Javaバージョンを変更
プロジェクトのプロパティーからJavaのビルド・パスでJREシステム・ライブラリーを再登録
→今回はバージョン17を再登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/1acdf5ce-2548-c9d0-07bb-bfdf6d4730a5.png)

プロジェクトのプロパティーからJavaコンパイラーでコンパイラー準拠レベルを変更
→今回はバージョン17に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/86667c2e-2b31-7e12-879c-097d94eec93b.png)

# プラグインの追加
Webアプリケーションの実行確認を簡単に行うために「waitt」というプラグインを追加します

1. pom.xmlを開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/90ef7147-a88e-e27e-e3da-24dbba59b0ba.png)

2. pluginManagement > pluginsタグ内に以下を追加します
```
    	<plugin>
		  <groupId>net.unit8.waitt</groupId>
		  <artifactId>waitt-maven-plugin</artifactId>
		  <version>1.3.0</version>
		  <configuration>
		    <servers>
		      <server>
		        <groupId>net.unit8.waitt.server</groupId>
		        <artifactId>waitt-tomcat9</artifactId>
		        <version>1.3.0</version>
		      </server>
		    </servers>
		  </configuration>
		</plugin>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/f04f5799-6a45-f4e2-4e70-ad0a06670804.png)

※最新の情報は[リポジトリ](https://mvnrepository.com/artifact/net.unit8.waitt/waitt-maven-plugin)より確認してください
※使い方などは[こちら](https://github.com/kawasima/waitt)を参考にしてください

# Webアプリケーションを実行してブラウザで表示

プロジェクト名を右クリック > 実行 > 実行の構成　をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/3229d933-c90e-cde1-1069-58ad74a3deae.png)

以下の構成を追加し、実行します

|キー|値|例|
|---|---|---|
|種類|Maven ビルド||
|名前|任意の値|mvn-waitt-run|
|基底ディレクトリー|${project_loc:web-app-sample}||
|ゴール|waitt:run||

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/2003b0c5-e627-b0ce-408b-65ba37462ed2.png)

ブラウザが起動し以下の画面が表示されれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/9e3c74d3-1eda-0c3a-a10e-84a1f194f477.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/70abd390-8f16-8f7a-55e6-9521e121d69a.png)
# 最後に
MavenのアーキタイプよりWebアプリケーションを作成し実行しました。
次回はWebアプリケーションの設定を確認し、サーブレットの作成を行ってみようと思います。

他の記事については[こちら](https://qiita.com/kirin1218/items/242ee0f174f1cb12ef17#nablarch%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A8%98%E4%BA%8B%E4%B8%80%E8%A6%A7)から御覧ください。