rails+vue+webpackerでproductionが真っ白になった件

概要

railsとvueの組み合わせで、production環境で画面が真っ白になるという症状に出くわしました。

関連issue

これを見つけなかったらもっと苦しんでいたと思います。

最終コメントは去年の12月なので割と最近ですね。

railsにvueをインストール

この環境で

Rails 5.2.2
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin16]

vueをインストールすると

rails webpacker:install:vue

最後にこういう警告が出ます。

You need to enable unsafe-eval rule.
This can be done in Rails 5.2+ for development environment in the CSP initializer
config/initializers/content_security_policy.rb with a snippet like this:
if Rails.env.development?
  policy.script_src :self, :https, :unsafe_eval
else
  policy.script_src :self, :https
end
Webpacker now supports Vue.js 🎉

なるほどこういう設定が必要なのかと納得して追加し、開発環境では問題なく動作していました。

しかしproductionにデプロイしたところ何も見えない状態になり、consoleにもエラー表示などなく、ただしれっとbodyが空になっていました。

webpackerがおかしいことに気づく

chromeのdeveloper toolsをさらにいろいろ見ていたら、Sourcesタブで返されるjsの中身が全て空になっていました。

これはwebpackerの設定などが何かおかしいのかと思いググり方を変えたところ、前出のissueを見つけることができました。

設定を変更

issueにも書いていますが

こうではなく、

config/initializers/content_security_policy.rb

if Rails.env.development?
  policy.script_src :self, :https, :unsafe_eval
else
  policy.script_src :self, :https
end

こう設定することで無事にproductionでも動作するようになりました。

config/initializers/content_security_policy.rb

if Rails.env.development?
  policy.script_src :self, :https, :unsafe_eval
end

こんなどうでもいいところでハマる人を増やさない為にも記事にしました。

二時間ぐらい飛びました。