IntelliJ IDEA Community Edition、Spring Boot、Kotlin、MavenでGAEにデプロイするまで

# 概要
Spring Boot 2.1.6、Kotlin、Mavenを、Spring Initializrという、SpringBootアプリケーションの雛形を作成できるサイトで作成し、IntelliJ IDEA Community Editionにインポート。その後ControllerとView（SpringBootではtemplate）を追加し、簡単なWebアプリをローカル実行。
その後、GAEにデプロイしてそちらでも問題ないことを確認するところまでを書く。

# 環境
- IntelliJ IDEA Community Edition 2019.1.3
- Spring Boot 2.1.6
- Kotlin 1.2.71
- Java 8
- Maven
- Google Cloud Platform
- Google App Engine Standerd Environment

# 事前準備
- GCP環境に、GAEのJavaランタイムでデプロイできること
- IntelliJ IDEAにCloud Codeプラグインをインストール済み
- IntelliJ IDEAをPleiades日本語化プラグインを用いて日本語化しておく<br>
（日本語化については好み）

# Spring Initializrで雛形作成
[Spring Initializr](https://start.spring.io/) 
以下の内容を指定して、Generate Projectボタンを押します。
クリック後、zipファイルがダウンロードされるので、zipを適当な箇所に解凍します。
（自分はCドライブ直下にコピーして、そこで解凍しています。）

- Project：Maven Project
- Language：Kotlin
- Spring Boot：2.1.6
- Project Metadata
    - Packaging：War
    - Java：8
    - それ以外については以下キャプチャ参照（Artifactとかは好みかと思います。）
<img width="946" alt="SpringInitializr1.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/1b65ce48-7848-5798-0ab1-47d7eac773c7.png">
- Dependenciesは以下を選択
（SQLに関しては今選択しなくても問題ないですが、将来的にDB接続するかもしれないため、今回は選択しています。）
    - Web
        - Spring Web Starter
        - Spring Web Service
    - Template Engines
        - Thymeleaf
    - SQL
        - MySQL Driver
        - MyBatis Framework
    - Google Cloud Platform
        - GCP Support
        - GCP Messaging
        - GCP Storage

# プロジェクト構成の確認
```
│  .gitignore
│  HELP.md
│  mvnw
│  mvnw.cmd
│  pom.xml
│
├─.mvn
│  └─wrapper
│          maven-wrapper.jar
│          maven-wrapper.properties
│          MavenWrapperDownloader.java
│
└─src
    ├─main
    │  ├─kotlin
    │  │  └─com
    │  │      └─example
    │  │          └─mavenkotlinwar
    │  │                  MavenkotlinwarApplication.kt
    │  │                  ServletInitializer.kt
    │  │
    │  └─resources
    │      │  application.properties
    │      │
    │      ├─static
    │      └─templates
    └─test
        └─kotlin
            └─com
                └─example
                    └─mavenkotlinwar
                            MavenkotlinwarApplicationTests.kt
```

# IntelliJ IDEAにプロジェクトをインポート
1. IntelliJ IDEAを起動して、ファイル ⇒ 新規 ⇒ 既存ソースからプロジェクトを選択します。
「インポートするファイルまたはディレクトリーの選択」ウインドウが出るので、対象プロジェクトのpom.xmlを選択し、OKボタンを押します。 

2. 「Maven プロジェクトを自動的にインポートする」のチェックボックスをチェックし、次へボタンを押します。

3. 「インポートする Maven プロジェクトの選択」では、デフォルトでチェックされているので、そのままで次へボタンを押します。

4. プロジェクトJDKについては人によると思いますが、自分はjdk1.9だったので、変更せず次へボタンを押しました。

5. 新規作成するIntelliJ IDEAプロジェクトの名前は、変更あれば変更し、なければそのままで完了ボタンを押します。

6. 新規プロジェクトウインドウが出るので、どちらかを選んでボタンを押します。
（自分は新規ウインドウで開いています。）
<img width="414" alt="SpringInitializr2.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/20a8a894-4afe-5457-e34a-2e60ebfe19eb.png">

新規ウインドウで、インポートが実行されます。
<img width="935" alt="SpringInitializr3.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/860533c4-0099-445b-c427-b423329bd000.png">

インポート完了後。
<img width="933" alt="SpringInitializr4.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/dd92de8e-6c22-6ce9-21ac-5ea8caa7e1ee.png">

# controllerを作成
1. src/main/kotlin/com/example/com/example/mavenkotlinwar配下にcontrollerパッケージを作成します。

2. 作成したcontrollerパッケージ配下に、TransitionTestControllerクラスを作成します。
<img width="252" alt="SpringInitializr5.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/19c566f9-f46b-9581-dc95-4e6707ccefaa.png">

ソースは以下の通りです。

```
import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.web.bind.annotation.RequestMethod
import org.springframework.web.bind.annotation.RequestParam

@Controller
@RequestMapping("transitionTest")
class `TransitionTestController` {

    @GetMapping("/input")
    fun input(
            @RequestParam(value = "name", required = false, defaultValue = "world") name: String,
            model: Model): String {
        model.addAttribute("name", name)
        return "transitionInput"
    }
    @RequestMapping("/output", method = arrayOf(RequestMethod.POST))
    fun output(
            @RequestParam(value = "user", required = true) user: String,
            @RequestParam(value = "age", required = true) age: String,
            model: Model): String {
        model.addAttribute("user", user)
        model.addAttribute("age", age)
        return "transitionOutput"
    }
}
```

# templateを作成
1. src/main/resources/template配下に、transitionInput.htmlを作成します。
<img width="254" alt="SpringInitializr6.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/272cca33-a2e2-3be2-f240-2f5808de8a5b.png">

ソースは以下の通りです。

```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" http-equiv="Content-Type" content="text/html" />
    <title>入力画面</title>
</head>
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
<form method="post" action="output">
    <span>入力値1: </span>
    <input type="text" name="input1" value="" />
    <br />
    <span>入力値2: </span>
    <input type="text" name="input2" value="" />
    <br />
    <input type="submit" value="send" />
</form>
</body>
</html>
```
　　
2. src/main/resources/template配下に、transitionOutput.htmlを作成します。
<img width="254" alt="SpringInitializr7.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/c9988fc7-3921-d112-0662-2695b1210831.png">

ソースは以下の通りです。

```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" http-equiv="Content-Type" content="text/html" />
    <title>出力画面</title>
</head>
<body>
<p th:text="'入力値1は、' + ${input1} + 'でした。'" />
<p th:text="'入力値2は、' + ${input2} + 'でした。'" />
</body>
</html>
```
# application.propertiesにjdbcドライバーをセット
（プロジェクト作成時、DependenciesのSQLを選択していないかたは読み飛ばしてください。）
application.propertiesに、以下を張り付けてください。

```
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306
```

# ローカル環境で、プログラムを実行
1. IntelliJ IDEAの表示 ⇒ ツール・ウィンドウ ⇒ Mavenを選択します。

2. Mavenウィンドウが表示されるので、Plugins ⇒ spring-boot ⇒ spring-boot:runで右クリックし、実行を押します。
<img width="284" alt="SpringInitializr18.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/a29222d0-c8af-b8f6-3d0c-e61e261e08ba.png">


3. spring-bootの実行ログに、Tomcat Startedとか、Started MavenkotlinwarApplicationKtと出ていることを確認します。
4. http://localhost:8080/transitionTest/input にアクセスし、入力画面が表示されることを確認します。
<img width="398" alt="SpringInitializr8.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/27c64c87-e5c5-e8fc-7469-c6a3e0d9dc56.png">

5. 適当な値を入力して、sendボタンを押します。
<img width="394" alt="SpringInitializr9.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/698e51c9-6985-acc9-dbcc-199cec710ccb.png">


6. 出力画面に遷移し、入力画面で入力した値が表示されていることを確認します。
<img width="375" alt="SpringInitializr10.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/dcc8733d-1c09-a4d3-8c15-8ca93c35bc63.png">

# GAEへのデプロイ準備
1. GAEデプロイのため、appengine-web.xmlを作成します。
ツール ⇒ Cloud Code ⇒ App Engine ⇒ Add App Engine Support ⇒ Google App Engine Standardを押します。

2. モジュールの選択ウィンドウが表示されたら、対象のモジュールを選択し、OKボタンを押します。
<img width="358" alt="SpringInitializr11.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/21db3fb8-27e1-b0f6-1642-d03a73c8d207.png">

3. ライブラリーはデフォルトのまま(Servlet APIにチェックされている)で、OKボタンを押します。
<img width="236" alt="SpringInitializr12.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/c473aeb9-f30e-6772-a3bb-be5e554e57bb.png">

4. src/main配下に、webapp/WEB-INFフォルダが新規作成され、appengine-web.xmlが作成されたことを確認します。
ファイルの中身は、初期作成のままで問題ないです。

# GAEへのデプロイ
1. ツール ⇒ Cloud Code ⇒ App Engine ⇒ App Engine へデプロイを押します。
押下後、Create Deployment Configurationウィンドウが表示されます。
<img width="416" alt="SpringInitializr13.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/ab523692-1f6a-72fc-4980-1486232831e0.png">

2. プロジェクト: Google Cloud プロジェクトの選択を押し、設定したGoogleアカウントに紐づくGCPプロジェクトが表示された後、デプロイしたいプロジェクトを選択し、OKボタンを押します。
<img width="544" alt="SpringInitializr14改.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/05d44dad-4e10-ce9b-bcf9-03e4c4dd0bf9.png">


3. Create Deployment Configurationウィンドウが再表示され、プロジェクトに、先ほど選択した「プロジェクト名:アカウント名」が選択されていることを確認後、実行ボタンを押します。
<img width="415" alt="SpringInitializr15改.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/7963ff06-dc33-2eb4-8afe-52d2df6c909b.png">

# GAEへのデプロイ後の動作確認
1. デプロイ完了後、https://{GCPのプロジェクトID}.appspot.com/transitionTest/input にアクセスし、ローカル環境でspring-boot実行したとき同様の画面が表示されることを確認します。
<img width="421" alt="SpringInitializr改.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/b9b4a445-d2fa-4d35-99dc-3d1b60e85515.png">


2. 適当な値を入力してからsendボタンを押して、画面遷移することを確認します。
<img width="418" alt="SpringInitializr17改.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311571/df96eb85-e056-7497-1011-5ddbe274ff4e.png">

# 最後に
最初はgradleを使ってGAEにデプロイしようとしていましたが、GAEデプロイ時にデプロイ対象としてプロジェクトを選択できなかったため、mavenに変更しました。
gradleについてはもう少し調査が必要そうです。

以上、お読みいただきありがとうございました。