Zenn
🐥

docker-compose 下で Java + Spring Boot + Thymeleaf を試す

2020/12/17に公開
Java
Spring Boot
tech

次回はデータベースに接続してみたいと思いますと言ったな？ あれは嘘だ。
いや、先にテンプレートエンジンさわっておこうと思いまして……💦

TL;DR

Thymeleaf とは

Thymeleaf とは、Spring Bootで使用が推奨されているテンプレートエンジンです。
Ruby on Rails でいうところの ERB、
ASP.NETCore でいうところの Razor Pages みたいなものですね。

Spring Boot を WebAPIサーバ としてだけ使うのではなく
テンプレートエンジンを利用したビューの作成もするのなら利用する事になると思います。

docker-compose.yml を用意する

cd your_project
mkdir server
touch docker-compose.yml

docker-compose.yml

docker-compose.yml
version: '3.6'
services:
  app:
    image: openjdk:15
    ports:
      - 8080:8080
    tty: true
    volumes:
      - ./server:/srv:cached
    working_dir: /srv

Gradleプロジェクト作成

今回も Spring Initializr というサイトで作ってしまいます。

前回の記事との違いは赤枠の部分です。
前回の記事から継続して行う場合は、server/build.gradle に
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
を追記だけでもイケます。

server/build.gradle
dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
...

入力が終わったら GENERATE してダウンロードします。
ダウンロードしたら展開したものを
your_project/server 配下に配置します。

配置したら今回は
server/src/main/java/com/example/api/ApiApplication.java はそのままOKです。

とりあえずテンプレートエンジンThymeleafを簡易に試す

server/src/main/resources/templates/index.html というファイルを作成し
以下のように編集してみてください

touch server/src/main/resources/templates/index.html
server/src/main/resources/templates/index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>SpringBoot</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1 th:text="'これはThymeleafですか？'">ｈｔｍｌ－見出し１</h1>
    <p>はい、SpringBootで推奨されています。</p>
</body>
</html>

Docker コンテナを起動してGradleビルド, アプリケーション起動

docker-compose up -d
docker-compose exec app bash
bash-4.4# pwd
/srv
bash-4.4# sh gradlew build
...
BUILD SUCCESSFUL in 6m 37s
6 actionable tasks: 6 executed
bash-4.4# java -jar build/libs/api-0.0.1-SNAPSHOT.jar

起動したら http://localhost:8080/ へアクセスして確認です。

ルーティングも何も設定していないのに表示されましたね。
この辺りのルーティングも Thymeleaf がいい感じにやってくれるようです。
（試しに Thymeleaf なしで index.html を用意しましたがルーティングエラーになりました）

では一度 Ctrl+c でアプリケーションを終了させましょう。

コントローラ経由でビューを表示してみる

mkdir server/src/main/java/com/example/api/controllers
touch server/src/main/java/com/example/api/controllers/IndexController.java
server/src/main/java/com/example/api/controllers/IndexController.java
package com.example.api.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {

    @RequestMapping({ "/", "/index" })
    public ModelAndView get(ModelAndView mav) {
        mav.addObject("target", "Thymeleaf");
        mav.setViewName("index");
        return mav;
    }
}

server/src/main/resources/templates/index.html 側も少し編集します。

server/src/main/resources/templates/index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
  <title>SpringBoot</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <h1 th:text="'これはThymeleafですか？'">ｈｔｍｌ－見出し１</h1>
    <p>はい、SpringBootで推奨されています。</p>
    <!-- 以下の行を追加 -->
    <div th:text="'Hello, ' + ${target} + '!!'"></div>
</body>
</html>

コンパイル後、再度表示してみましょう。

bash-4.4# sh gradlew build
bash-4.4# java -jar build/libs/api-0.0.1-SNAPSHOT.jar

今度は Controller 側で ModelAndView にsetした値が表示されていますね！
おつかれさまでした。

参考

今回のリポジトリはこちら
https://github.com/JUNKI555/java_spring_boot_practice01

Discussion