Whitelabel Error Page (404)だと...??!!!

はじめに

Spring Boot を使ってWebアプリを作成したく、
Javaを勉強しSpring Bootを使い
初めてHello Worldを実行しようとした、その時だった。。。

開発環境

Java 19
Spring Boot 2.7.5 maven project
macOS Ventura (CPU:Intel)

Spring Bootとは

Springプロジェクト群をパッケージ化し、シンプルに活用できるフレームワーク

環境構築

Spring Boot Tools を追加

Spring Initializr Java Support を追加

Maven Projectを選択

Spring Boot Version 2.7.5を選択

使用言語 Javaを選択

Group Idは初期のcom.example

Artifact Idも初期のdemo

Packageing typeはJarを選択

Javaのversionは19

toolを全て入れます。Spring Webは必須で

以下の様な構成になる

コード

src/main/java/com/exmaple/demo/HelloWorld.java

HelloWorld.java

package com.example.demo;

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.stereotype.Controller;
//import org.springframework.web.bind.annotation.RestController;

@Controller
public class HelloWorld {
    
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String Hello(Model model) {
        model.addAttribute("title", "Hello World");
        model.addAttribute("message", "Welcome to my site");
        return "hello";
    }

}

src/main/resources/templates/hello.html

hello.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
    <h1 th:text="${title}"></h1>
    <p>
        <div th:text="${message}" />
    </p>
</body>
</html>

実行結果

下記のコマンドで実行

./mvnw  spring-boot:run  #開発環境にも書いてますがmacなので./で実行しています

始まりました。

http://localhost:8080にアクセスします。

え？ファ？うん？ほぅ！！！！ほぅほぅ！！ムキィィィィ！！

原因

これは、ファイルのパスの位置は特に問題ないです。
404ということもあり、ソースコードが眼中にない様な感じなのです。
何が問題なのでしょうか。

Spring Bootを使っている方からすると、笑ってしまう
そう! このJavaのソースコードです。

実はこのコード、とりあえずHTMLに値を入れて動かしたいために無理やり書いた結果、この様なコードを書いてしまったのです。

解決方法

Spring群のパッケージ、ツールの内容をしっかりと把握・理解して書くことです。
今回、このコードで実行に成功したコードを書きます。
そこには、Spring Bootを動かすための大事なライブラリ等が追記されます。

依存関係問題

HTMLを埋め込むためにThymeleafというテンプレートエンジンを使用するコードになっています。ですので
pom.xmlに追記する必要があります。

pom.xml

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
        
    <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>

tyhmeleaf設定

thymleafを使用るためにhtmlファイルを使用する設定
src/main/resources/application.properties

application.properties

#thymeleafを使用する
spring.thymeleaf.mode=HTML

Javaコード

個人的にわからないところをコメントアウトで追記したコードです。

src/main/java/com/exmaple/demo/HelloWorld.java

HelloWorld.java

package com.example.demo;

import org.springframework.boot.SpringApplication; //

//tymeliefを使用する /src/templates/application/spring.thymeleaf.mode=HTML

import org.springframework.ui.Model; //Spring MVC thymeleafを使用するライブラリ addAtrributeを使ってvalueの値を代入

import org.springframework.web.bind.annotation.GetMapping; //GETリクエストされた際の

//import org.springframework.web.bind.annotation.RequestMapping; //数種のRequestのマッピング
//import org.springframework.web.bind.annotation.RequestMethod; //　RequestMappingの引数の中で使える. リクエストの受付種類を method =　 RequesrtMethod.GET/POST



import org.springframework.boot.autoconfigure.SpringBootApplication; //	Webページアプリ用,メソッドの戻り値が遷移先のview
import org.springframework.stereotype.Controller;
//import org.springframework.web.bind.annotation.RestController; //APIサーバーなどに使われる、XML JSON



@SpringBootApplication //このアノテーションで Spring Bootのアプリだと宣言します。
@Controller
public class HelloWorld {
    public static void main(String[] args) {
        SpringApplication.run(HelloWorld.class, args);
        }
    
    //リクエスト URL に対して、どのメソッドが処理を実行するか定義するアノテーション。GETでアクセスされたリクエストの場合
    //@RequestMapping(value = "/", method = RequestMethod.GET)

    //
    @GetMapping("/")
    public String Hello(Model model) {
        model.addAttribute("title", "Hello World");
        model.addAttribute("message", "Welcome to my site");
        return "hello";
    }

}

下記の関数でtitleという変数に代入してHTMLに渡すことができます

model.addAttribute("title", "Hello World");
model.addAttribute("message", "Welcome to my site");

src/main/resources/templates/hello.html

hello.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello</title>
</head>
<body>
    <h1 th:text="${title}"></h1> <!-- titleにHellowWorldが代入されている -->
    <p>
        <div th:text="${message}" />
    </p>
</body>
</html>

実行結果

下記のコマンドで実行

./mvnw  spring-boot:run  #開発環境にも書いてますがmacなので./で実行しています

よっしゃ！！
これでSpring Boot × tyhmeleafの環境構築が完成です。

最後に

Pythonの様にこれやればあれやればどうにか動くと思わないほうがいいと思いました。
仕組みをしっかり知ってこれからもJava と Springの勉強に励んでいきます。

参考資料

Spring Boot 入門 - リファレンスドキュメント

Spring Quickstart Guide