LoginSignup
3

More than 5 years have passed since last update.

NextJS + dockerでhmrが効かない時の対処方法メモ

Posted at

概要

nextjs + typescriptをdockerとkubernetesを用いて動かすため、minikubeを使ってローカル環境で諸々を試していてhmrが効かないということに遭遇したので、その対処方法を備忘録としてメモ。

環境

  • os x 10.11.6
  • nextjs 6.1.1
  • minikube v0.28.2
  • virtualbox 5.2.16

何をしていたか

  • nextjs + typescriptのアプリケーションを公式を参考に最低限動作させた
  • yarn dev起動し、簡単にhmr導入できるなーと感動していた
  • Dockerfileを作って↑をimage化
  • docker runでも動くことを確認
  • minikube、kubectl、helmを入れて諸々ゴニョゴニョ
  • minikubeのhypervisorとしてはvirtualboxを使う
  • helmのdeploymentでホストディレクトリをマウント
  • helm installでアプリケーションが動くところまで漕ぎ付ける
  • 達成感に浸っていた

何が起きたか

↑で作成したアプリケーションのテンプレート内の文字列を変えてみたところ、hmrが効かないことに気づく

原因

virtualbox上のコンテナにホストディレクトリをマウントしているわけですが、
NFS(Network File System)というファイルシステムを用いてマウントしている場合Watchが効かないらしい。。

webpackの公式に以下が。

If watching does not work for you, try out this option. Watching does not work with NFS and machines in VirtualBox.

対処方法

nextjsの設定ファイルであるnext.config.jsにpollingするwatch optionを追加
具体的には以下

watchOptions: {
  // ミリ秒ごとにチェック
  poll: 1000
}

合わせて以下の設定もしておくと捗るかも

// 遅延時間.最初の変更からこの期間中に行われた変更は1回の再構築に集約される.ミリ秒
aggregateTimeout: 300,

// 除外ディレクトリ
ignored: [ 'node_modules' ]

できたnext.config.jsは以下(serverConfigあたりは省略)

next.config.js
const withTypescript = require('@zeit/next-typescript')

module.exports = withTypescript({
  webpack: (config) => {
    return config
  },
  webpackDevMiddleware: config => {
    config.watchOptions = {
      aggregateTimeout: 300,
      poll: 1000,
      ignored: [ 'node_modules' ]
    };

    return config
  },
})

まとめ

これで自分のところでは、virtualbox上で動いているアプリがhmrになったことを確認できました。が、ここまでやって身も蓋もないですが、結局のところminikubeを使って動作確認するのはservice間連携などに限定しようかと思いました。

というのも、開いているブラウザがもっさりしてて、ゴリゴリ開発するフェーズでは、単純にyarn devでアプリを立ち上げて開発をした方が効率が良さそうだと感じたためです。
(自分のPCが非力ってのはありますが)

そもそもあまり問題にならないことかもしれませんが何かの役に立てばと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3