SpringBoot 静的コンテンツを返す方法（html, js, css など）

Spring Boot の Webアプリで、静的コンテンツ（HTML, CSS, JS, 画像ファイルなど）を返す方法を書いていきます。

バージョン

SpringBoot 3.0.0
Java 17

1. 対応方法

src/main/resources の下に、static か public ディレクトリを作成して、静的コンテンツを配置します。

以下に、動作確認方法を書いていきます。

2. HTMLの作成

プロジェクトのフォルダ spring-static を作成して、その下に HTMLファイルを保存します。

src/main/resources/static/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルページ</title>
</head>
<body>
  <p>Hello World.</p>
</body>
</html>

3. ビルドファイルの作成

Maven のビルドファイルを作成します。

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>3.0.0</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <groupId>org.example</groupId>
  <artifactId>spring-static</artifactId>
  <version>1.0.0</version>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>17</java.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

4. Javaコードの作成

アプリを起動するプログラムを作成します。

src/main/java/org/example/SpringApp.java

package org.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringApp {
  public static void main(String[] args) {
    SpringApplication.run(SpringApp.class, args);
  }
}

5. 確認

アプリを起動して、以下の URL を開きます。

http://localhost:8080/index.html

以下の文言が表示されると成功です。

Hello World.

6. ディレクトリ階層について

static の下に、ディレクトリ階層を作って公開することもできます。

src/main/resources/static/
  - css/
    - style.css
  - js/
    - main.js

ローカルでアクセスする場合の URL は以下の通りです。

http://localhost:8080/css/style.css
http://localhost:8080/js/main.js

7. 注意事項

アプリを jar でパッケージングする場合は、src/main/webapp を使わないように注意します。

上のディレクトリは、war の場合に使うディレクトリになります。

プログラミングと投資

テクノロジーを使って、長期投資の分析をしています。