前提
- Spring Boot 1.3
- Parent POMとしてspring-boot-starter-parentを使用
- Thymeleaf 2.1.4
やりたいこと
ローカル環境と開発・本番環境で、js/cssを見に行くパスを変えたい
環境ごとに、以下のように参照するコンテンツを切り替えたい。
- ローカル環境 : jarにincludeされたコンテンツ
-
classpath:static
配下のコンテンツ
-
- 開発・本番環境 :
http://example.com/hoge
以下のコンテンツ
経緯
- 事情により、本番環境では特定ドメイン(
http://example.com
)の指定されたディレクトリ配下(/hoge/*
)にjs/cssを配置する必要がある- この特定ドメインは、アプリケーションのドメインとは異なるので、jar内のjs/cssを参照させることができない
- そのため、ローカルでアプリケーションを起動して確認するために、開発環境のサーバにjs/cssをいちいち置く必要がある
- その際、他のメンバーが同じファイルをいじってると、「あれ、動かない?デグレ?」となって混乱する
- ローカルで開発してるのにDEVで何かやらなきゃいけないとか面倒すぎる
- 一応ローカル環境で
http://example.com
のためにProxy設定を施せば、jar内のjs/cssを参照するようにできるが、開発メンバー全員にいちいちそんなことさせるの面倒
-> ローカルで動かしたときと開発・本番環境で動かしたときで、js/cssのパスが変わればいいのに!!
アプローチ
property + environment.getProperty('property.code')
まずは、application.propertiesに下記を追加。
application.properties
testapp.static-file.path=http://localhost:8080/testapp
application-dev.properties
testapp.static-file.path=http://example.com/hoge
(application.propertiesに記述するのは、profile依存のファイルで手っ取り早かったから)
次に、対象のcssを読み込むために、linkタグを以下のように記述
(th:href
については公式ドキュメントで詳解されている)
solved.html
<link rel="stylesheet" type="text/css"
th:href="@{${@environment.getProperty('testapp.static-file.path')}/css/style.css}"/>
こうすることによって、以下のようにhrefの値が設定される。
- ローカル環境(profile指定なし) :
http://localhost:8080/testapp/css/style.css
- 開発環境(spring.profile.active = dev) :
http://example.com/hoge/css/style.css
@environment.getProperty()
読み込んだpropertyの値を取得することができる。
↓のリンクにも記載があるけど、システム環境変数を取得することもできる模様。
c.f. ThymeleafでSpringの環境変数を使う | Tagbangers Blog
Utility Objectを使って、もっと使いやすく
- 別件で、もう一つpropertyの値をURLに付記したくなった
- そうすると、
th:href
の記述が超長くなる&全てのjs/cssに書かなくちゃいけなくて冗長
という理由でmacro(helper)を作りたくなったので、
最終的に、Utility Objectを使って以下のようになった。
solved2.html
<link rel="stylesheet" type="text/css" th:href="@{${#pathBuilder.build('/css/style.css')}}"/>
(Utility Objectの作り方についてはThymeleaf Springのpropertyを利用したUtility Objectを作るを参照のこと)