Servletアプリ開発のための環境構築

#概要
Servletアプリを作るための開発環境について一通りの流れを書きました。

#環境
###OS
macOS High Sierra

##インストールするもの一覧
###Eclipse ver.4.8(Photon)
自分はver.4.8使って開発しましたが、最新バージョンを使ってもらっても問題ないかと思います。
https://www.eclipse.org/photon/

###Tomcat
Servletを実行するためのコンテナです
https://tomcat.apache.org/download-90.cgi

###Java
JDK ver.10を使用したが、もうダウンロードできなくなっている模様。
https://www.oracle.com/technetwork/java/javase/downloads/index.html
最新版を使ってもらえればいいかと。

**ただし、サーバーに上げる際にサーバーにインストールするJavaのバージョンと
ローカルで開発を行う際のJavaのバージョンを一致させないと動作しないことがあるため注意!!
(Javaのバージョンによってクラスファイルバージョンが異り、正常に動作しない)**

###MySQL
データベースを使用したアプリを作るのであれば必要
デフォルト設定で[NEXT]押していけば正常にインストールできる。
https://dev.mysql.com/downloads/mysql/


##プロジェクト作成
###1.Eclipse起動
ワークスペースの場所は特にこだわりがなければこのままでOK
![スクリーンショット 2019-09-22 16.56.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/7768eea3-2fa1-5fe0-f0ad-2d0feee5284b.png)


###2.Tomcatサーバーの構築
EclipseからTomcatサーバーを使えるようにする


##Tomcatサーバーを追加
[ファイル]->[新規]->[その他]を選択
![スクリーンショット 2019-09-22 17.09.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/7be469c8-c69f-f53c-c528-8b9e050aeca1.png)

[サーバー]を選択し、[次へ]を選択
![スクリーンショット 2019-09-22 17.11.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/a8053ec7-94a8-7b9f-6de2-3477329b27fc.png)

[Apache]の中からTomcatサーバーのバージョンを選択(今回は最新のTomcat v9.0を選択)
その他の項目はDefaultのまま[完了]を選択

完了するとパッケージ・エクスプローラーの場所に[Servers]の項目が追加され
選択したバージョンのtomcatのサーバーが起動している
![スクリーンショット 2019-09-22 17.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/3fab4c58-ec75-cca2-bdd5-e9641f62c7c7.png)

###3.プロジェクト作成
[ファイル]->[新規]->[プロジェクト]を選択
![スクリーンショット 2019-09-22 17.01.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/bef1fe4e-b683-51c3-9957-3d5557b0acf3.png)

Webの中にある**動的Webプロジェクト**を選択し、[次へ]を選択
![スクリーンショット 2019-09-22 17.02.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/d17164d7-d4a4-be9b-1051-e102a1c4258b.png)

プロジェクト名の入力欄に作成するプロジェクト名を入力
ターゲットランタイムのバージョンを先ほど設定した[Tomcat9(Java10)]へ変更
構成の項目も[Tomcat9(Java10)デフォルト構成]へと変更
![スクリーンショット 2019-09-22 20.52.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/93988f92-652d-8008-e30f-a335529bb7f7.png)

プロジェクト作成が完了するとパッケージ・エクスプローラーの場所に[プロジェクト名]の項目が作成される。
![スクリーンショット 2019-09-22 20.54.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/859d0fda-fa45-ccd3-ccd8-0c279401f96e.png)

ひとまず何か表示させるためにhtmlファイルを作成
プロジェクト名のところで右クリックし、[新規]->[その他]を選択
[htmlファイル]を選択し[プロジェクト名/WebContent]の配下に作成(例:index.html)
![スクリーンショット 2019-09-22 20.57.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/a14ccce3-9e9e-1fbf-005e-dc89fd246f93.png)

index.htmlを↓の感じに変更

```HTML:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE!!!</title>
</head>
<body>
Qiita
</body>
</html>
```

これで一旦プロジェクト作成完了

###4.プロジェクトをサーバーへ追加
この時点では[サーバー]に関するウィンドウがEclipseの画面に存在してないので、ウィンドウを追加してあげます。
画面上部の[ウィンドウ]->[ビューの表示]->[その他]を選択
![スクリーンショット 2019-09-22 17.23.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/508909c1-608b-000b-2e42-96b96b964f7c.png)

[サーバー]を選択し、[開く]を選択
![スクリーンショット 2019-09-22 17.24.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/5001242c-9df4-10a9-fb9f-a255544625b8.png)

そうするとEclipseのトップページに[サーバー]のウィンドウが追加されます。
サーバーを右クリックで選択し[追加および除去]を選択
![スクリーンショット 2019-09-22 17.26.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/0776ac6a-56fe-6cdf-d444-d319bdccf1e7.png)

ここで、先ほど作成したプロジェクトを選択し、[追加]を選択し、[構成済み]の欄に移動できたら[完了]を選択
これによりプロジェクトがサーバーへと登録され、サーバー上で起動することができます。
![スクリーンショット 2019-09-22 17.27.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/ec77b3bb-1821-1eeb-5448-4b0bc7a8eb75.png)

サーバーのウィンドウから起動するサーバーを選択し、[サーバーを始動]を選択
![スクリーンショット 2019-09-22 21.01.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/6f170d1f-fea4-80f7-4ed6-cc36a8aa5943.png)

サーバーが起動してるのを確認したら、Google Chromeなり適当なブラウザを立ち上げて以下のURLを記入
http://localhost:8080/Qiita/index.html

そうすると以下のような画面が表示されれば成功

![スクリーンショット 2019-09-22 21.11.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137041/2ffdc4f1-58aa-5169-456c-486981b01964.png)

この通信の流れとしては
**localhost(自分のPC上)の8080ポート(tomcatで使われるポート)に対して
Httpでリクエストを投げて、Qiitaプロジェクトに含まれているindex.htmlの値が返され
その値をブラウザ上で表示する。**
といった流れになっています。

##まとめ
自分のPC上に開発環境を整え、ApacheTomcatサーバーを立ててブラウザからアクセスする一通りの流れを書きました。
ここまでできればあとはソースコードをゴリゴリ書いていくだけかと思います。