快捷導(dǎo)航

使用Docker進行node開發(fā)時實現(xiàn)熱加載功能

更新時間：2024年09月29日 10:36:23 作者：冷夜星光

這篇文章主要介紹了使用docker進行vue、react或者node開發(fā)時實現(xiàn)熱加載功能,即宿主機文件修改之后實時刷新或者實時重啟服務(wù),文中通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下

不使用docker

本地開發(fā)node程序的時候只需要配置 nodemon 啟動就可以了，例如
假設(shè)你有一個簡單的 Node.js 文件，名為 app.js，內(nèi)容如下：

const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200, {'Content - Type': 'text/plain'});
    res.end('Hello, World!\n');
});

server.listen(3000, () => {
    console.log('Server running on port 3000');
});

然后只需要運行以下命令

npm install -g nodemon
nodemon app.js

此時，當(dāng)你修改 app.js 文件內(nèi)容之后，nodemon 就會檢測到文件變化并自動重啟服務(wù)器，刷新頁面之后你就能立即看到修改后的效果。

使用docker

docker版本為 Docker version 27.1.1, build 6312585 ，且已經(jīng)配置好 dockerfile 文件的基礎(chǔ)之上。實現(xiàn)本地文件與容器內(nèi)文件的同步有多種方法。在這兒只介紹在compose.yaml配置的兩種方法，分別是：

1. 使用 watch 同步配置（推薦）：

services:
  server:
    build:
      context: .
    ports:
      - 3000:3000
    develop:
      watch:
        - path: ./package.json  # 監(jiān)聽當(dāng)前目錄下的package.json文件
          action: rebuild  # package.json文件變化時docker會重新構(gòu)建，與docker compose up --build等效
        - path: .   # 監(jiān)聽當(dāng)前目錄
          target: /usr/src/app  # 容器中的目標(biāo)路徑，將宿主機的當(dāng)前目錄與容器內(nèi)的/usr/src/app路徑相關(guān)聯(lián)
          ignore:   # 忽視的文件
            - node_modules/
          action: sync # 同步動作，docker會確保對主機上文件所做的任何更改自動與服務(wù)容器內(nèi)的相應(yīng)文件相匹配。
    command: nodemon app.js

請仔細看注釋，此時只需要運行 docker compose up --watch 命令即可實現(xiàn)熱更新。更多配置請前往官方文檔查看

2. 使用Bind Mounts綁定掛載（容器文件更改會同步到宿主機）：

services:
  server:
    build:
      context: .
    ports:
      - 3000:3000
    volumes:
      - .:/usr/src/app  # 綁定掛載宿主機當(dāng)前目錄到容器
      - /usr/src/app/node_modules   # 創(chuàng)建一個匿名卷用于存儲容器的node_modules，防止本地 node_modules目錄覆蓋容器中的依賴。
    command: nodemon --legacy-watch --polling-interval 1000 app.js  # 此處命令與上面不一致

請仔細看注釋，使用該配置運行 docker compose up 命令也能實現(xiàn)熱更新。

注意：

相信你也注意到了command命令和上面的 不一致，這是因為直接運行 nodemon app.js 在windows下會出現(xiàn)熱加載失效的情況。具體現(xiàn)象是在容器內(nèi)修改文件時，nodemon 能夠正確檢測到更改并熱加載應(yīng)用；但在宿主機修改文件時，盡管文件已經(jīng)同步到容器內(nèi)，nodemon 卻未能檢測到這些更改，從而無法觸發(fā)熱加載。

原因： 在 Docker 環(huán)境中，尤其是在 macOS 和 Windows 上，由于底層文件系統(tǒng)的差異，文件系統(tǒng)事件（如 inotify 事件）可能無法正確地從宿主機傳遞到容器。這導(dǎo)致 nodemon 無法檢測到宿主機上的文件更改。因此，盡管文件已同步到容器內(nèi)，nodemon 依然未能觸發(fā)熱加載。

解決方案： 配置 nodemon 使用輪詢，也就是 nodemon --legacy-watch --polling-interval 1000 app.js 命令實現(xiàn)熱加載功能。不過需要注意的是相較于默認模式，輪詢模式會消耗更多的 CPU 和 I/O 資源，尤其是在大規(guī)模項目或頻繁文件變更的時候。另外也可以嘗試使用 docker-sync 或 mutagen 等工具來解決這個問題，不過我沒試過。

總結(jié)

1.使用 `watch` 同步配置

優(yōu)點：

高級同步策略：可以針對特定文件或目錄設(shè)置不同的同步策略，例如僅在某些文件更改時觸發(fā)重建。
自動化流程：結(jié)合自動重建和同步，提升開發(fā)效率，減少手動操作。
靈活性：可以根據(jù)項目需求定制同步和重建的行為，適應(yīng)復(fù)雜的開發(fā)流程。

缺點：

維護成本：配置可能需要更多的維護，尤其是在團隊協(xié)作或項目規(guī)模擴大時。

適用場景：

大多數(shù)項目：適用于大多數(shù)項目，個人強烈推薦。

2.使用Bind Mounts綁定掛載

優(yōu)點：

實時同步：任何在宿主機上更改會立即在容器內(nèi)生效，反之亦然。
簡單直觀：配置簡單，直接映射宿主機目錄到容器目錄。

缺點：

性能問題：在某些操作系統(tǒng)（如 macOS 和 Windows）上，綁定掛載的性能可能較差，尤其是在大量文件操作時。另外在windows下文件系統(tǒng)事件可能無法及時傳遞。
路徑依賴：綁定掛載路徑依賴于宿主機的文件系統(tǒng)結(jié)構(gòu)，可能影響跨平臺的可移植性。
權(quán)限管理：需要確保宿主機和容器內(nèi)的文件權(quán)限一致，避免權(quán)限沖突問題。

適用場景：