Windows版Docker Desktop

Windows上でLinux開発環境をセットアップするには、 Windows Docker Desktop使用して開発コンテナDev Container ）を作成し、その中で開発を行うことができます。プロジェクトでDockerも使用している場合は、開発コンテナ内にdocker-in-dockerまたはdocker-from-dockerをインストールできます。VS VSCodeエディタは開発コンテナの迅速な設定をサポートしているため、非常に便利です。

現在、 Windows版Dockerは、インストール時にHyper-VではなくWSL2バックエンドとして使用するようにデフォルト設定されています。WSL2 WSL2 、Microsoftが提供するWindowsサブシステムで、一般的なLinuxシステムをインストールできます。全体的に見て、 WSL2 Hyper-Vよりも高速に動作するため、バックエンドとしてWSL2使用することをお勧めします。

Next.jsのホットリロード失敗問題

Windows Docker Desktopを使用して開発コンテナDev Containerを作成した後、 Nextjsでホットリロードの問題が見つかりました。コードが変更されるたびに、変更を確認するためにコンテナを手動で再起動する必要がありました。この問題はnext.config.jsに次の設定を追加することで一時的に解決できますが、

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // 添加的配置
  webpack: (config, context) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300
    }
    return config
  }
}

module.exports = nextConfig

しかし、この設定ではNextjsのホットリロードが非常に遅くなります。コードを変更するたびに、その効果が反映されるまでに数十秒かかります。これは、この設定ではwebpackのウォッチモードを使用してファイルの変更を監視するようになっているためです。一方、最新バージョンのNextjsでは、コードのコンパイルにwebpack使用されず、代わりにRust SWCが使用されています。Rust SWC はwebpackより 6 ～ 7 倍高速です。

理由

私は通常、 Windows上でローカルにコードを取得し、それを開発Dev Containerこれにより、 Windows WindowsシステムがLinux版に変換され、コンテナのファイルシステムにvolumeとしてmount 。その後、開発コンテナ内でコードを修正します。こうすることで、変更内容がローカルのWindowsと同期されWindows gitを使用してローカルでコードをコミットできるようになります。

問題は、 WSL2 Linux上にmountファイルシステムの変更を監視する機能にあります。これは既知の未解決の問題であり、詳細はここを参照してください。簡単に言うと、 WSL2現在、 WindowsからLinuxにmountファイルシステムの変更を検出できないため、 Nextjsホットアップデートが機能しません。

解決

DockerのDev Containerを使わずに、 WSL2 Linuxに直接コードをプルすることができます。Windows Windows 、インストール済みのWSL2 Linuxファイルシステムをファイルエクスプローラーで直接開くことができるようになりました。そのため、ファイルエクスプローラーからLinuxディレクトリを直接開き、その中にプロジェクトコードを保存するためのフォルダーを作成できます。一般的に、コードが/mnt/c/Users/...のようなディレクトリに存在しないようにすれば、この問題は回避できます。

上記の操作は、 VSCode用のRemote - WSLプラグインを使用することでも簡単に実行できます。このプラグインを使用すると、 VSCode内でLinuxディレクトリとターミナルを直接開くことができます。

WSL2用のWindows Docker Desktopバックエンドをインストール済みの場合、 WSL Linuxでdockerコマンドを直接使用できるため、再度インストールする必要はありません。WSL WSL Linuxで起動したDockerコンテナは、 Windows Docker Desktopのコンテナ一覧に表示されます。これは、 Dev Containerのdocker_from_dockerの動作と同じです。

やっと、2つのシステムを切り替えなくても、ゲームをしながら開発作業ができるようになった（笑）。