快捷導(dǎo)航

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

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

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

不使用docker

本地開發(fā)node程序的時(shí)候只需要配置 nodemon 啟動就可以了，例如
假設(shè)你有一個(gè)簡單的 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');
});

然后只需要運(yùn)行以下命令

npm install -g nodemon
nodemon app.js

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

使用docker

docker版本為 Docker version 27.1.1, build 6312585 ，且已經(jīng)配置好 dockerfile 文件的基礎(chǔ)之上。實(shí)現(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文件變化時(shí)docker會重新構(gòu)建，與docker compose up --build等效
        - path: .   # 監(jiān)聽當(dāng)前目錄
          target: /usr/src/app  # 容器中的目標(biāo)路徑，將宿主機(jī)的當(dāng)前目錄與容器內(nèi)的/usr/src/app路徑相關(guān)聯(lián)
          ignore:   # 忽視的文件
            - node_modules/
          action: sync # 同步動作，docker會確保對主機(jī)上文件所做的任何更改自動與服務(wù)容器內(nèi)的相應(yīng)文件相匹配。
    command: nodemon app.js

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

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

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

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

注意：

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

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

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

總結(jié)

1.使用 `watch` 同步配置

優(yōu)點(diǎn)：

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

缺點(diǎn)：

維護(hù)成本：配置可能需要更多的維護(hù)，尤其是在團(tuán)隊(duì)協(xié)作或項(xiàng)目規(guī)模擴(kuò)大時(shí)。

適用場景：

大多數(shù)項(xiàng)目：適用于大多數(shù)項(xiàng)目，個(gè)人強(qiáng)烈推薦。

2.使用Bind Mounts綁定掛載

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

適用場景：