使用 Docker 搭建 Node.JS 開發環境是一種什么體驗？
前言
最近和一些小伙伴在溝通這個博客全棧項目時，會發現其中一些朋友在安裝依賴這個階段就出現問題了，總是會問我“為什么依賴安裝失敗？”這個問題可能是前端或者 node 領域最常見的問題了，基本上每個人都遇到過，拉取一個項目后，依賴都裝不成功，何談繼續使用呢？
依賴安裝階段就失敗，一部分原因來自于依賴版本鎖的寬松性，很多時候我們不會鎖死一個依賴的版本號，而是會采用^, ~ 這種范圍限制，這就會導致在npm install的時候，可能會嘗試去安裝一個更高版本的依賴，而這個更高版本的依賴可能會帶來它的一些依賴項的兼容性問題，引起安裝階段報錯。
另一部分原因是 Node 版本導致的，因為某些包對 Node 版本是有要求的，如果環境不符合要求，也會安裝失敗。
圖片
想要解決這類問題，最好的辦法就是使用容器化完全隔離環境，因為我們可以在 Dockerfile 中指定項目需要的運行環境，這樣一來，使用者的主機環境是什么 Node 版本大可不必操心。在上一篇文章中，我們學會了使用 Docker 構建 NodeJS Express 鏡像并自動化部署生產環境使用，但是開發環境的問題我們還未解決掉，本文就來學習一下怎么使用 Docker 構建 NodeJS 開發環境。
需求梳理
我們很清楚，開發環境下，最重要的一點是什么，那就是修改了代碼，能夠立即生效，方便快速調試，這種熱更新或者自動重啟能力是至關重要的。
能做到這一點的工具有很多，比如 Nodemon[3], PM2[4] 等，我更習慣使用 PM2，PM2 的 watch 特性可以讓我們快速開發調試。
接下來就說說怎么使用 Docker + PM2 搭建一個開發環境。
Docker + PM2 搭建 Node 開發環境
在沒有使用 Docker 之前，我們就是用 PM2 來進行開發和部署 Express 項目的，也算是比較熟悉了，改造起來不會很難。
準備 PM2 配置文件
首先，我們準備一個ecosystem.config.js，這是 PM2 配置文件，不管用不用 Docker 都用得上它。具體配置內容就和原來保持一致即可。
module.exports = {
apps: [
{
// 應用名
name: 'blog',
// 啟動腳本
script: 'app.js',
// –env參數指定運行的環境
env: {
NODE_ENV: "development",
PORT: 8002,
},
watch: true,
ignore_watch: ["node_modules", ".git", ".github", '.gitignore', '.dockerignore', '.release-it.cjs', '*.md'],
}
],
};我們開啟了watch配置，這樣就可以做到修改源碼立即重啟服務。當然，我們也不能隨便修改什么文件就重啟服務，比如一些 ignore 文件，markdown 文件，修改了之后也不應該重啟服務，這就需要用到ignore_watch配置。
Dockerfile for Dev
接著我們還是要寫 Dockerfile，為了和生產環境區分開，我們單獨新建一個 Dockerfile.dev 文件。
ARG NODE_VERSION=16.20.2
FROM node:${NODE_VERSION}-alpine
ENV NODE_ENV development
ENV PORT 8002
WORKDIR /app
RUN npm install pm2-dev -g
RUN --mount=type=bind,source=package.json,target=package.json \
--mount=type=bind,source=package-lock.json,target=package-lock.json \
--mount=type=cache,target=/root/.npm \
npm ci
EXPOSE 8002
CMD ["npm", "start"]可以看到，我們通過 RUN 指令安裝了一個 pm2-dev 包，而非 pm2，這是官方推薦我們在 Docker 容器中使用的，pm2-dev 具備 watch 和 restart 特性。
圖片
其中提到的 pm2-runtime 則是用于 Docker 生產環境的。
構建鏡像
構建鏡像總是這樣的千篇一律，唯一的區別是這里用-f指定了 Dockerfile，因為我們要和生產環境的 Dockerfile 區分開。
docker build -f Dockerfile.dev -t blog-express-dev .啟動容器
由于我們希望在啟動容器后，還能利用 PM2 的 watch 特性做到修改源碼后自動重啟服務，這就必須把我們的源碼作為 Volume 掛載到容器中。所以 docker run 大概要這樣寫：
docker run -dp 8002:8002 \
--mount type=bind,source=${PWD},target=/app \
--name blog-backend-dev \
blog-express-dev啟動容器后，就可以測試服務的有效性了，我們隨意測試一個接口。
curl localhost:8002/article/page
圖片
能得到這樣的響應內容，說明服務一切正常。
解決 watch 不生效問題
當我以為萬事大吉時，準備最后測試服務的熱重啟是否正常。
- const pageNo = Number(req.query.pageNo || 1);
+ const pageNo = Number(req.query.pageNo || 3);我把 article/page 對應的控制器的默認頁碼改為了 3，發現修改代碼后，服務并沒有重啟，curl 的結果毫無變化，這說明 watch 特性沒有生效。
我首先仔細檢查了我的各個配置項，發現都沒有異常，于是就去網上找找有沒有人遇到我這種問題，結果也沒找到。
實在沒辦法，就到 PM2 的 issue 中去搜索 pm2-dev, Docker, watch 這種關鍵詞，確實找到了一些相似的問題。
首先是這位老哥提了個問題，他說使用 pm2-runtime 時能檢測到文件變化自動重啟服務，而 pm2-dev 卻不行。
圖片
這已經是 2020 年提的 issue，我想著我也得留個言，萬一解決了我也好知道。
圖片
但我也知道，這也解決不了問題，我的留言不會馬上得到回復的，于是接著找其他的 issue，翻了好久又找到一個差不多的問題。
圖片
雖然這里面說的是在 Mac 上遇到這個問題，但是我想著我也得試試，于是加了usePolling重新打鏡像運行容器，結果還真的好了，修改源碼能夠立刻生效，開發環境最關鍵的問題解決了！
小結
做一件事情，最怕的就是關鍵地方掉鏈子，功虧一簣，最欣喜的也是解決掉問題的那一刻，雖然我知道解決完一個問題還會有下一個棘手的問題等著我，但是不礙事，做程序就是這樣，山重水復疑無路，柳暗花明又一村，人生亦如此！
- 開源地址：vue3-ts-blog-frontend[1]
- 專欄導航：Vue3+TS+Node打造個人博客（總覽篇）[5]
參考資料
[1]vue3-ts-blog-frontend: https://github.com/cumt-robin/vue3-ts-blog-frontend
[2]express-blog-backend: https://github.com/cumt-robin/express-blog-backend
[3]Nodemon: https://nodemon.io/
[4]PM2: https://pm2.keymetrics.io/
[5]Vue3+TS+Node打造個人博客（總覽篇）: https://juejin.cn/post/7066966456638013477
