※この記事は2018年9月6日に投稿されたものです

こんにちは、いっせいです。

Carely 開発では Vue.js を取り入れて開発しています。
Vue.js の確認に自分は devtools を使っています。

github.com

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 が...

github.com

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 開発の力に少しでもなれたら幸いです。

またドハマリしたら共有したいと思います！ではまた！