iCARE公式ブログ

世界一のヘルスケアカンパニーを目ざす株式会社iCAREの公式ブログです。

webpacker を使った Vue.js をステージング環境などでも devtools を使えるようにする

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

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

github.com

data や props の値が確認できるので便利です。

また社内動作確認環境(iCARE Dev チームでは QA 環境と呼んでいます。以下 QA 環境)を経て本番に Capistrano を使いデプロイされるようになっています。

QA環境で Vue.js を使って作成した機能を確認しようとすると以下のように表示され, devtools を使うことができません。

f:id:icareofficial:20180906113217p:plain

開発環境で再現できないバグなどが発生したときにつらかったので、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:precompileNODE_ENV=development を渡してあげれば development mode でビルドができるとあります。

しかし Capistrano で assets:precompile をオーバライドしようが、EC2 インスタンスに入って実行しようがうまくいかない。。。

webpacker の issue をみてみるとまさにそれという issue が...

github.com

issue に記されたソースコードの箇所を見てみると webpacker:compileNODE_ENV=production が渡されるようです。 そりゃ devtools 動かないわ...

解決法

ということで workaround として assets:precompile のあとに development mode でビルドを行う bundle exec bin/webpack を production 以外では実行するようにしました。

都合2回ビルドすることになるので無駄はありますが、現状だと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 開発の力に少しでもなれたら幸いです。

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