개요

rails와 vue의 조합으로 제품 환경에서 화면이 하얗게 변하는 증상을 만났다.

관련

이걸 찾지 못하면 더 고통스러울 거야.
마지막 논평은 작년 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 🎉

그렇구나, 그런 설정이 필요하다고 생각해서 추가해서 개발 환경에서 문제 없이 일하고 있다.
그러나 제품에서 depro가 있는 곳은 아무것도 보이지 않았고 constore에서도 오류 표시가 없었다. 다만 바디가 갑자기 비어버렸다.

웹 패키지 문제 발견

크롬의 개발자 tools를 더 많이 보면 Sources 탭으로 되돌아오는 js의 내용이 모두 하늘로 변합니다.

나는 웹 페이지의 설정 등에 이상한 점이 있다고 생각해서 불평하는 방식을 바꾸고 앞에서 언급한 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

이렇게 설정하면 제품에서도 정상적으로 작동할 수 있습니다.
config/initializers/content_security_policy.rb

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

이렇게 아무렇지도 않은 곳에 푹 빠진 사람을 늘리지 않기 위해 저도 기사를 냈습니다.
두 시간 정도 날았어요.