Nablarch Webアプリケーションのデバッグ方法について

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

[Nablarchを使ったWebアプリケーションの作成](https://qiita.com/kirin1218/items/c537cb8a444ee59763cd)にて、NablarchのWebアプリケーションのテンプレートプロジェクトをダウンロードし、実行までを行いました。

今回は開発作業のお友達、デバッグの方法を整理します。
いくつか方法はあると思いますが、今回は
* waittコマンドを使ったデバッグ
* tomcatを利用したデバッグ

について整理します。

本記事以外のコンテンツは[こちら](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|
|7-Zip|21.07|

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

# デバッグの方法
## waittコマンドを使ったデバッグ
### ブレークポイントを作成
./src/main/java/com/exampleSampleAction.javaを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/257ebdeb-d90b-6c8c-9fb5-04ff6bcbdf2f.png)

indexメソッド行番号（今回は35）をダブルクリックしブレークポイントを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/a10f35f6-94fa-628b-90e0-6b52ca133dbd.png)

### デバッグを実行する
プロジェクト名を右クリック>デバッグ>デバッグの構成をクリックし、[Nablarchを使ったWebアプリケーションの作成](https://qiita.com/kirin1218/items/c537cb8a444ee59763cd)にて、作成した「waitt:run」の構成を選択し、デバッグボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/2165f737-36a2-ab53-b9ae-36f17a793548.png)

実行が開始され、ブレークポイントで停止しデバッグが行えることが確認できました。
※ デバッグ中の操作などは[こちら](https://qiita.com/kirin1218/items/76d6ee9cfa284bb49165#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0)をご確認ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/7d3d6734-6bd1-c9b6-8ad1-5e1ba8b0354f.png)

# tomcatを利用したデバッグ
こちらはいくつかの手順が必要となりますので、１つずつ説明していきます。

## warファイルの作成
実行構成を作成し「mvn package」コマンドを実行します。

|キー|値|例|
|---|---|---|
|名前|任意の値|mvn-package-web|
|基底ディレクトリー|${project_loc:myapp-web}||
|ゴール|package||

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/82f0c2b2-f264-6c1b-c789-165fb766eeb0.png)

実行が成功すると、./targetフォルダにwarファイルが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/be5672d2-0eb3-6439-bf5e-a379d50bf5b4.png)

実行後、F5ボタンを押さないと表示が更新されない場合がありますので、F5ボタンを押してみましょう。

## warファイルからlibフォルダを抽出
作成されたwarファイルを解凍します。
※warファイルは実体はzipファイル

拡張子を.zipに変更すればエクスプローラから解凍できますが、今回は拡張子.warのまま、7-zipで解凍します。
warファイルを右クリック > 7-Zip > 開くをクリックします。
※7-Zipはzipの圧縮・解凍ツールです、[こちら](https://sevenzip.osdn.jp/download.html)よりダウンロードできます。
　解凍せずともzipの中身のファイルを開けるので、jarやwarファイルを扱うときに便利です。ReZipもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/83a2bad2-55cb-255a-bb86-885c4279d958.png)

7-Zipのビュー内で、WEB-INFを開くと、libフォルダが存在するため、このlibフォルダごとプロジェクトフォルダ直下にコピーします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/28144b7a-8bd8-022a-d98f-a53468093579.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/e851b1f5-1c23-8a8b-4f07-919f841d163b.png)

上記で何をしているかといいますと、今回のプロジェクトを実行するにはいくつかの依存関係ライブラリ(jarファイル）が必要となるのですが、warファイルを作成するとそれらのライブラリをてっとり速くlibフォルダに用意してくれることがわかったので、warファイルを作成して抽出した感じです。

その他にも、「mvn dependency:copy-dependencies -DoutputDirectory=./lib」といったMavenコマンドを実行しても、同じように依存関係のあるライブラリ(jar)をダウンロードしてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/9e199432-7360-a85e-e79c-aa138690b7f2.png)


## 依存ライブラリフォルダを追加する
プロジェクト名 > プロパティー > Javaのビルド・パス　> ライブラリー　> クラスパスを選択し、外部クラス・フォルダーの追加をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/7a8dc108-e7ef-1b96-d3e8-d039bfe5eb0d.png)

[warファイルからlibフォルダを抽出](##warファイルからlibフォルダを抽出)でコピーしたlibフォルダを指定します。
適用してダイアログを閉じます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/c7b55ee9-9761-5bc6-a92a-66cb0fcfcc9b.png)

## プロジェクト・ファセットへ変換
操作の意味はしっかりはわかってないのが現状なのですが、EclipseのGUI操作でtomcatを実行するために、以下の手順でプロジェクトの構成を変更します。
プロジェクト名を右クリック > プロパティー > プロジェクト・ファセットを選択　> ファセット・フォームへ変換　をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/9a90a2de-2f0c-1b6b-71f1-ed9ca3113b51.png)

動的Webモジュールを選択し、より詳しい構成が使用可能をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/c2860452-feca-f6f7-636d-1adab46f0f7d.png)

ファセット・プロジェクトの変更ダイアログでOKボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/cc5dac59-b93b-3326-76fc-47cc0094bafc.png)

適用して閉じるボタンをクリックします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/14e1b324-70a8-b882-1b84-899212135f06.png)

確認画面でOKボタンをクリックします。（再ビルドが走ります）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/175c7fda-c1ea-1ec8-8400-1228da10e49a.png)

## H2Databaseファイルの配置
NablarchのテンプレートではH2 Databaseと呼ばれる、ファイルが管理のデータベースを利用しています。
※設定により、MySQLやOradle Databaseへの切り替えも当然可能です。
※H2Databaseの簡単な操作方法については、[Nablarch開発におけるH2 Databaseの利用方法](https://qiita.com/kirin1218/items/fc73ef052869248cbf66)を御覧ください。

Mavenから実行する場合はプロジェクトフォルダの./h2/db/SAMPLE.h2.dbというファイルが使用されるのですが、
tomcatから実行する場合は、tomcatの作業フォルダが起点になるためファイルの場所を変更する必要があります。

作業フォルダはeclipse.exeが存在するフォルダ、私の場合は「C:\Program Files\pleiades-2022-03\eclipse」になっているようで、「C:\Program Files\pleiades-2022-03\eclipse\h2\db\SAMPLE.h2.db」ファイルを探しているようです。

そのため、プロジェクトフォルダ内のh2フォルダを「C:\Program Files\pleiades-2022-03\eclipse」にコピーするという方法が１つあります。

ただし、Program Filesに開発で利用するデータファイルを配置するのが気持ち悪かったので、私は以下のようにしました。

ユーザーフォルダ直下にh2Databaseフォルダを作成し、その中にh2フォルダをコピーする。

```
C:/Users/
└ユーザー名
 └h2Database
  └h2
   └db
    └SAMPLE.h2.db
```

pom.xmlの設定を以下のように変更します。
```pom.xml
    <nablarch.db.url>jdbc:h2:~/h2Database/h2/db/SAMPLE</nablarch.db.url>
```

もともと、./h2/db/SAMPLEとなっており作業フォルダ直下からの相対パスとなっていたところを~/h2/db/SAMPLEとすることで、ユーザーフォルダからの相対パスに変更しています。


## サーバーで実行
これまでの作業でやっとTomcat上でWebアプリを実行する準備ができました。
さっそく、実行してみましょう。

プロジェクト名を右クリック > 実行 > サーバーで実行　をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/101eb198-ea21-f5c5-3e71-6a8e94bb6550.png)

Tomcat9_Java17を選択し、次へボタンをクリックします。
※選択する項目名は実行するJavaバージョンによって変更してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/dfd2e683-38a9-84bc-5f4e-a79fc98fc7eb.png)

構成済みにmyapp-webが登録されていることを確認して、完了ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/494baecb-f2a6-6178-9420-580fd148a99b.png)

tomcatが実行し、NablarchのWebアプリケーションが実行されているログがコンソールに表示されます。
また、ブラウザが起動して、以下の画面が表示されれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/7fcfc344-42b3-0904-edcf-d89d3ae9bebf.png)

## tomcatの停止
サーバービューを表示し、停止対象のサーバー名を右クリック > 停止ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/e47e7cd3-1c4d-ebae-eff0-32143ab57262.png)

※サーバービューが見当たらない場合は、メニュー>ウィンドウ>ビューの表示より、「サーバー」を選択します。
※JavaEEパースペクティブになっていない場合は、パースペクティブの切り替えるのもおすすめです。メニュー>ウィンドウ>パースペクティブ>パースペクティブを開く>その他よりJava EEを選択します。一度表示するとEclipse右上に切り替えタブのようなものが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/3398216f-6c71-c2d2-1c85-eca51c03b1a5.png)

## デバッグ
プロジェクト名>デバッグ>サーバーでデバッグ　もしくは　サーバービューにて、対象のサーバーを右クリックし、デバッグを選択します。
ブレークポイントが作成されている場合は、tomcatでWebサーバー実行、操作後、ブレークポイントの行で停止します。

## ポートを変更する
tomcatはデフォルトで8080ポートを利用します。
別のアプリが既に8080を利用していると（Dockerあたりが怪しいです）、期待通り動作しません(実行が失敗する気がします）。

そのため、必要に応じて以下の手順で使用ポートを変更します。

サーバービューの対象のサーバー名をダブルクリックします。
概要というタイトルの画面が表示されます。
画面右のポートのうち、8080となっている場所クリックして任意の値に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/a61fc129-b5e9-89c0-e715-afbd5ddd88df.png)

ポートが変更されているかはブラウザ表示時のURLより確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/b63af2f4-dcc7-26ab-3ea9-c4694ac3c358.png)


# 最後に
今回はNablarchのWebアプリケーションのデバッグ方法について、整理しました。

waitt:runを利用する方法と、tomcat上で実行する方法の２つについて説明しました。
tomcatの方は準備にいくつかの手順が必要でしたが、一度準備してしまえばwaitt:runより使いやすのかなと感じましたが、どちらが最適化の判断はしばらく使ってみて判断したいと思います。