10
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Thymeleaf 環境ごとにjsやcssのリンク先URLを切り替える

Last updated at Posted at 2016-03-08

前提

  • 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を作るを参照のこと)

10
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?