Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@PPVholiday

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

Last updated at Posted at 2019-07-12

概要

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日本語化プラグインを用いて日本語化しておく

    （日本語化については好み）

Spring Initializrで雛形作成

Spring Initializr
以下の内容を指定して、Generate Projectボタンを押します。
クリック後、zipファイルがダウンロードされるので、zipを適当な箇所に解凍します。
（自分はCドライブ直下にコピーして、そこで解凍しています。）

  • Project：Maven Project
  • Language：Kotlin
  • Spring Boot：2.1.6
  • Project Metadata
    • Packaging：War
    • Java：8
    • それ以外については以下キャプチャ参照（Artifactとかは好みかと思います。）
SpringInitializr1.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. 新規プロジェクトウインドウが出るので、どちらかを選んでボタンを押します。
    （自分は新規ウインドウで開いています。）

SpringInitializr2.PNG

新規ウインドウで、インポートが実行されます。
SpringInitializr3.PNG

インポート完了後。
SpringInitializr4.PNG

controllerを作成

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

  2. 作成したcontrollerパッケージ配下に、TransitionTestControllerクラスを作成します。

SpringInitializr5.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を作成します。
SpringInitializr6.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を作成します。
SpringInitializr7.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で右クリックし、実行を押します。

SpringInitializr18.PNG
  1. spring-bootの実行ログに、Tomcat Startedとか、Started MavenkotlinwarApplicationKtと出ていることを確認します。
  2. http://localhost:8080/transitionTest/input にアクセスし、入力画面が表示されることを確認します。
SpringInitializr8.PNG
  1. 適当な値を入力して、sendボタンを押します。
SpringInitializr9.PNG
  1. 出力画面に遷移し、入力画面で入力した値が表示されていることを確認します。
SpringInitializr10.PNG

GAEへのデプロイ準備

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

  2. モジュールの選択ウィンドウが表示されたら、対象のモジュールを選択し、OKボタンを押します。

SpringInitializr11.PNG
  1. ライブラリーはデフォルトのまま(Servlet APIにチェックされている)で、OKボタンを押します。
SpringInitializr12.PNG
  1. src/main配下に、webapp/WEB-INFフォルダが新規作成され、appengine-web.xmlが作成されたことを確認します。
    ファイルの中身は、初期作成のままで問題ないです。

GAEへのデプロイ

  1. ツール ⇒ Cloud Code ⇒ App Engine ⇒ App Engine へデプロイを押します。
    押下後、Create Deployment Configurationウィンドウが表示されます。
SpringInitializr13.PNG
  1. プロジェクト: Google Cloud プロジェクトの選択を押し、設定したGoogleアカウントに紐づくGCPプロジェクトが表示された後、デプロイしたいプロジェクトを選択し、OKボタンを押します。
SpringInitializr14改.PNG
  1. Create Deployment Configurationウィンドウが再表示され、プロジェクトに、先ほど選択した「プロジェクト名:アカウント名」が選択されていることを確認後、実行ボタンを押します。
SpringInitializr15改.PNG

GAEへのデプロイ後の動作確認

  1. デプロイ完了後、https://{GCPのプロジェクトID}.appspot.com/transitionTest/input にアクセスし、ローカル環境でspring-boot実行したとき同様の画面が表示されることを確認します。
SpringInitializr改.PNG
  1. 適当な値を入力してからsendボタンを押して、画面遷移することを確認します。
SpringInitializr17改.PNG

最後に

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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?