webpacker を使った Vue.js をステージング環境などでも devtools を使えるようにする
こんにちは、いっせいです。
Carely 開発では Vue.js を取り入れて開発しています。
Vue.js の確認に自分は devtools を使っています。
data や props の値が確認できるので便利です。
また社内動作確認環境（iCARE Dev チームでは QA 環境と呼んでいます。以下 QA 環境）を経て本番に Capistrano を使いデプロイされるようになっています。
QA環境で Vue.js を使って作成した機能を確認しようとすると以下のように表示され, devtools を使うことができません。
開発環境で再現できないバグなどが発生したときにつらかったので、devtools を使えるようにできないか試行錯誤してみました。
devtools が動かない理由
エラーメッセージに書いてありますね
- production mode でビルドがされている
- 意図的に無効化している
ソースコードに Vue.config.devtools = true をしこんでデプロイしても動かず、production mode でビルドされているためなのではと考えました。
development mode でビルドするには
Carely は現状 assets:precompile が webpacker:compile をフックする形で Vue.js のファイルをビルドしています。
webpacker のドキュメント をみると
NODE_ENV=development bundle exec rails assets:precompile と NODE_ENV=development を渡してあげれば development mode でビルドができるとあります。
しかし Capistrano で assets:precompile をオーバライドしようが、EC2 インスタンスに入って実行しようがうまくいかない。。。
webpacker の issue をみてみるとまさにそれという issue が...
issue に記されたソースコードの箇所を見てみると webpacker:compile は NODE_ENV=production が渡されるようです。
そりゃ devtools 動かないわ...
解決法
ということで workaround として assets:precompile のあとに development mode でビルドを行う bundle exec bin/webpack を production 以外では実行するようにしました。
都合２回ビルドすることになるので無駄はありますが、現状だと10秒くらいの差なので devtools を使えるメリットのほうが上回るとして妥協しました。
Capistrano の deploy.rb に以下を追記します
namespace :assets do
desc "webpack build for vue devtools on qa/stg"
task :webpack_build do
on roles(:app) do
within(release_path) do
execute(:bundle, "exec bin/webpack") unless fetch(:deploy_env) == 'production'
end
end
end
end
after 'deploy:assets:precompile', 'deploy:assets:webpack_build'
よりよいやり方をご存知の方はご教示ください！
記事にすると意外とさっくりしてますが、なんやかんや半日ほどかかってしまいました(；・∀・)
もっと早く問題解決ができるようになりたいものです。
みなさんの Vue.js 開発の力に少しでもなれたら幸いです。
またドハマリしたら共有したいと思います！ではまた！
