はじめに
Javaのフレームワーク SpringBootを仮想環境のコンテナDockerとともにシンプルな環境構築をしたのち、
今回は下記の資料を参考にアプリを作っていきます。
まだ環境構築出来ていない方は、前回まとめた下記の記事をご覧ください
https://qiita.com/jiantaiyiteng1/items/f4afb3503e79fb3f32bf
環境構築までできたら、まずはweb画面で「Hello World」を表示できるかを試していきます。
Javaがインストールされているか確認
ターミナル上で最新版のJavaがインストールされているか確認します。
java -version
コントローラーの作成
demo/src/main/java/com/example/demo/HelloController.java を追加して、以下のようにします。
package com.example.demo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
@GetMapping("/")
public String hello() {
return "Hello World";
}
}
これを追加すると、前回環境構築したポートにより、
http://localhost:8081 で「Hello World」と表示されます。
この後は、本題のSpringboot＋Dockerで簡単なアプリを作っていきます。
ディレクトリの構成は下記のようにしていきます。
.
├── demo
│ ├── Dockerfile
│ ├── README.md
│ ├── controller
│ ├── form
│ ├── pom.xml
│ ├── src
│ │ └── main
│ │ ├── java
│ │ │ └── com
│ │ │ └── example
│ │ │ └── demo
│ │ │ ├── DemoApplication.java
│ │ │ ├── controller
│ │ │ │ └── HelloController.java
│ │ │ └── form
│ │ │ └── HelloForm.java
│ │ └── resources
│ │ ├── application.properties
│ │ └── templates
│ │ └── hello.html
│ └── target
│ ├── classes
│ │ ├── application.properties
│ │ ├── com
│ │ │ └── example
│ │ │ └── demo
│ │ │ ├── DemoApplication.class
│ │ │ ├── controller
│ │ │ │ └── HelloController.class
│ │ │ └── form
│ │ │ └── HelloForm.class
│ │ └── templates
│ │ └── hello.html
│ ├── generated-sources
│ │ └── annotations
│ └── maven-status
│ └── maven-compiler-plugin
│ └── compile
│ └── default-compile
│ ├── createdFiles.lst
│ └── inputFiles.lst
└── docker-compose.yml
pom.xmlに依存関係を追加
以下の依存関係を追加することで、Webアプリケーションの基本機能やテンプレートエンジン（Thymeleaf）を簡単に利用できるようになります。
</dependency>
<!-- dependencies配下に下記を追加 -->
<!-- Spring Web: Webアプリケーション構築に必要 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Spring DevTools: 開発中のホットリロードを有効にする -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<!-- Thymeleaf: テンプレートエンジン -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
コントローラー側のコード記述(バックサイド側)
HelloController.java
フォームを処理するコントローラクラスを修正します。
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import com.example.demo.form.HelloForm;
// コントローラークラス
@Controller
public class HelloController {
// "/"へのGETリクエストを処理するメソッド
@GetMapping("/")
public String helloForm(Model model) {
// 初期値として空のHelloFormオブジェクトをビューに渡す
model.addAttribute("form", new HelloForm());
// "hello.html"テンプレートをレンダリング
return "hello";
}
// "/send"へのPOSTリクエストを処理するメソッド
@PostMapping("/send")
public String submitForm(@ModelAttribute HelloForm form, Model model) {
// 受け取ったフォームデータをビューに返すためにModelに設定
model.addAttribute("form", form); // フォームオブジェクトを再度ビューに渡す
// 入力された名前を利用してメッセージを生成し、Modelに設定
model.addAttribute("message", "Hello, " + form.getName() + "!");
// "hello.html"テンプレートを再度レンダリング
return "hello";
}
}
コントローラー側のコード記述
HelloForm.java
フォームデータを保持するクラスを作成します。
package com.example.demo.form;
public class HelloForm {
private String name;
// ゲッターとセッター
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
view画面のコード記述(フロントサイド側)
hello.html
このHTMLテンプレートは、ユーザーがフォームに入力した名前をサーバーに送信し、受け取ったメッセージを表示します。Thymeleafの th:value や th:text
を使って、動的な内容をページに反映しています。
src/main/resources/templates/hello.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Page</title>
</head>
<body>
<h1>フォーム入力</h1>
<form action="/send" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" th:value="${form.name}" />
<button type="submit">送信</button>
</form>
<h2>メッセージ:</h2>
<p th:text="${message}"></p>
</body>
</html>
Spring Bootの設定ファイルを記述
application.properties
Spring Bootの設定ファイルを記述します。
src/main/resources/application.properties
spring.application.name=demo
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
コンテナの起動
コンテナを立ち上げます。
# Docker Compose でコンテナを起動
$ docker-compose up --build
ブラウザで http://localhost:8081 にアクセスすると、Spring Boot のアプリが表示されます。