Redmine 2.x→3.xへVerUpした時に画面レイアウトが崩れる症状に対する対応方法

Redmine 2.x→3.xへVerUpした時に画面レイアウトが崩れる症状が発生して、困っていた。
この対応方法について、@netazone さん、@g_maedaさんに教えてもらったのでメモ。
二人に感謝。

【参考１】
Defect #24617: Browser js/css cache remains after upgrade - Redmine

neta＠とんこつしかたべないさんのツイート: "バージョンアップ後のRedmine 3.3 の表示が崩れる、と思ったら再読み込みでなおる。 →つまりブラウザ側のキャッシュか。 Redmineのセッションクリアはやったと思うんだが、これはどうしようもないんかな"

MAEDA, Goさんのツイート: "@netazone パッチが出てます https://t.co/12AcycptT2"

neta＠とんこつしかたべないさんのツイート: "@g_maeda @akipii 件のパッチを本番反映してみました。ブラウザ履歴からバージョンアップ前に開いたチケットをいくつか開いてみましたが、発生していません。別PCで1回だけ崩れましたが、ブラウザ開きっぱの端末だったので怪しいです。明日騒ぎにならなければ効いたといえそうです"

MAEDA, Goさんのツイート: "@netazone @akipii 崩れるときはバージョンアップ前に開いたページでなくても崩れます。HTMLのソースの中で読み込んでいるCSSやJSのファイル名の後ろに ?1486805824 みたいに数字がついてればOKです。"

neta＠とんこつしかたべないさんのツイート: "@g_maeda @akipii ソース表示で確認できました。ありがとうございます。 Redmine 3.3.2で適用は以下やりました。 ・パッチ適用 ・tmp:cache:clear tmp:sessions:clear(念のため) ・Redmine再起動 https://t.co/4nbGURiyOf"

【参考２】
Redmine3.3で表示崩れする件で色々教えていただいた | UCWD-Studio - @matsuoka_UCWDjp 's Private Projects.

【状況】
Redmineを2.x→3.xにVerUpした時、ローカルPC上では全く問題なのに、サーバー上でVerUP後、画面レイアウトが崩れてしまう。
その原因がどうしても分からず、結局、リストアせざるを得なかった。
サーバー上でキャッシュクリア、クライアントでクッキーをクリアしても、再現してしまうみたい。

【原因】
@g_maedaさんに教えてもらった下記チケットによれば、VerUp時にjs/cssのキャッシュが残ってしまうのが原因みたい。

Defect #24617: Browser js/css cache remains after upgrade - Redmine

本来は、画面ソース上では、
＜script src="/redmine/javascripts/application.js?1481777729"＞＜/script＞
のように、JSやCSSにセッションIDらしき数字がURLに付加されるのに、なぜか、Ver3.3にVerUpすると、
＜script src="/redmine/javascripts/application.js"＞＜/script＞
のように表示されてしまう。

【対応方法】
Defect #24617: Browser js/css cache remains after upgrade - Redmineにあるパッチを当てればいい。

cd redmine/config/initilizers
wget http://www.redmine.org/attachments/download/17275/0001-Adds-asset_id-parameters-to-assets.patch
↓
patch -p1 < 0001-Adds-asset_id-parameters-to-assets.patch
10-patches.rb　を入力
↓
念の為にキャッシュクリア
bundle exec rake tmp:cache:clear tmp:sessions:clear
↓
Apache再起動
↓
チケット画面のソースを開くと、JSやCSSにセッションIDらしき数字がURLに付加されている

色々試してみると、下記のパターンになるみたいだ。

・Ver2.xの時は、JSやCSSにセッションIDらしき数字がURLに付加されている
　⇒問題なし

・Ver2.x→3.xへパッチを当てずにVerUpすると、JSやCSSにセッションIDらしき数字は付加されない
　⇒画面レイアウトが崩れる

・Ver2.x→3.xへパッチを当ててVerUpすると、JSやCSSにセッションIDらしき数字は付加される
　⇒問題なし

【疑問】
なぜ、こういう症状が発生したのか？
上記チケットの下記リンクを見ると、Ver4.2.7で廃止されたrails_asset_idメソッドから作ったパッチを当てると、解決できるらしい。

rails_asset_id (ActionView::Helpers::AssetTagHelper) - APIdock

さらに@marutosijpさんのコメントを読むと、Redmineのconfig/application.rbのasset pipeline がdisabledになっているのが原因みたいらしい。

Patch #13927: Reduce coupling between plugins and the "plugins/" directory - Redmine

config/application.rbの下記の箇所になる。

# Enable the asset pipeline
config.assets.enabled = false

/trunk/config/application.rb - Redmine

Railsの仕様を完全に理解していないので、調べてみる。

【追記１】
下記の意見もあるので、この症状に再現性があるかどうか分からない。

松岡　孝さんのツイート: "@akipii @g_maeda 今のところ問題を感じる挙動には遭遇してません。なお、3.x系は 2.6.xから3.1.1→3.1.3→3.2.1→3.2.3→3.3.2を経由してまして、その間も特に不具合に遭遇してないつもりです(除: 今回のUI部分)"

下記のBlogで原因と対処を詳細に記載してくれてます。

Redmine3.3で表示崩れする件で色々教えていただいた | UCWD-Studio - @matsuoka_UCWDjp 's Private Projects.

(引用開始)
これは Redmine 3.0.0 から Rails のバージョンが 4.2 へ移行した際に、CSS や JavaScript などの静的ファイルに付与されていた GET パラメータが付与されなくなったため、前バージョンの静的ファイルをブラウザ側がキャッシュとして持っていること(＝そちらが表示に利用されている)が原因のようです。
(引用終了)

つまり、Ver2.x→3.xではcssなどで大きなUI変更があったために、前バージョンのキャッシュが残ったために画面レイアウトが崩れた。
一方、Ver3.3.1→3.3.2では、大きなUI変更がなかったために、前バージョンのキャッシュが残っていたとしても、画面レイアウトが崩れることはなかった、と推測される。

【追記２】
クライアント側では、ブラウザのスーパーリロードで対応できるらしい。

ブラウザの super reload でゆけそうな気がする。職場の Redmine も 2.x から 3.x 系に移行して更に 3.x で数回更新しているが毎回 super reload するよう案内してる。 - akabekobeko のコメント / はてなブックマーク

君は3つのリロードを知っているか？ - os0x.blog
(引用開始)
ブラウザによっては、スーパーリロードという機能を備えています。IEの場合Ctrl+F5(Ctrl+更新ボタン)、Firefoxの場合Ctrl+F5(Shift+更新ボタン)、Chromeの場合Shift+更新ボタン(Ctrl+Shift+R)などでスーパーリロードを呼び出すことができます。
(中略)
リロードは大元のHTMLを受け取ったら、そのページ内のリソースについてレスポンスヘッダを確認しに行っています。その結果304 Not Modifiedが帰ってきて、実際にはキャッシュを使っています。
対してスーパーリロードはキャッシュに関係なく、すべてのリソースを取得しなおしています。
(引用終了)

【追記３】Redmineを2.6から3.3にアップデートした - Qiita
(引用開始)
無事起動を確認できた…のだが、どうも一部の表示がおかしい
タブやボタンなどが重なっていたり２重になっていたりする
ん～レスポンシブルデザインでスマホで見れるようになったのが個人的に嬉しくてアップデートしたのだけれど…
デフォルトテーマにしても同様の様子、またCSS見てみるか
データは全然問題なかったので一安心

追記：
chromeだと崩れてedgeだと正しく表示された
メインPCのchromeのみで崩れるようなので、調べてみた所、chromeのキャッシュクリアで治った
(引用終了)

2.6→3.3へのVerUpなので、今回と同じ症状（タブやボタンの配置が崩れる）が出ている。
Chromeのスーパーリロード処理を実行して直った、と思われる。
Edgeで画面レイアウトが崩れなかった理由は、今までEdgeを使っておらず、初めて使用したので、古いバージョンのCSSやJSのキャッシュがなかったためと思われる。

【追記４】
まとめ記事がある。

QA #301: Redmine 2.x→3.xへVerUpした時に画面レイアウトが崩れる場合がある - Unofficial Redmine Cooking - redmine.tokyo

【追記5】
Ver3.4にパッチが取り込まれたので安心した。