ことばアルバム

にわかエンジニアのにわか備忘録

Spring Bootのプロジェクトで静的コンテンツの配信

Java

前回のエントリーの続きです。
Spring Bootはすごく便利なのですが、今までxmlでやってたことをどうやれば良いのかがよく分からなかった。
特に、cssやjavascriptといったいわゆる静的コンテンツの扱いをどうしたらいいのか何も分からなかったので調べてメモ。

準備

静的コンテンツの配信自体はここのドキュメントにふんわりと書いてありました。
どうやら、

デフォルトでは/staticのフォルダにあるやつを静的コンテンツとして扱います。
独自のフォルダにしたい場合はWebMvcConfigurerAdapterクラスのaddResourceHandlersメソッドをオーバーライドして使ってください。

との事らしいです。
この便利な自動設定自体はspring-boot-starter-webを依存関係に追加していれば自動的に反映されるようです。

 
なので、ディレクトリ構成をこんな感じにして、
(/staticが今回配信したい静的コンテンツ置き場です)

f:id:is4cafe:20140403233212p:plain

htmlの中からcssやjavascriptを呼ぶ場合はこんな感じにして、
(/staticは省略するようです)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <!-- css -->
    <link href="/css/hello.css" th:href="@{/css/hello.css}" rel="stylesheet"/>
    
    
</head>
<body>
    <p th:text="'Hello, ' + ${name} + '!'" />
    <div class="word">css</div>
    
    <!-- javascript -->
    <script type="text/javascript" src="/javascript/hello.js" th:src="@{/javascript/hello.js}"></script>
    
    
</body>
</html>

これで完成。

結果

こんな感じにcssとjavascriptが両方読み込めてればok!

f:id:is4cafe:20140403233425p:plain

 
ディレクトリ構成やファイルの読み込み方が最初ぜんぜん分からなくて困ってました＞＜