兩天MERN實(shí)戰(zhàn)：從命令行到部署的完整踩坑記錄

你有沒(méi)有算過(guò)，搭一個(gè)全棧項(xiàng)目環(huán)境要踩多少坑？

最近參與了一場(chǎng)為期兩天的MERN Stack動(dòng)手實(shí)訓(xùn)，主題很實(shí)在——從命令行敲第一行代碼，到最終把項(xiàng)目掛到托管平臺(tái)。沒(méi)有PPT轟炸，全程對(duì)著屏幕敲。結(jié)果發(fā)現(xiàn)，那些教程里一筆帶過(guò)的"環(huán)境配置"環(huán)節(jié)，才是真實(shí)耗時(shí)的黑洞。

先說(shuō)說(shuō)項(xiàng)目骨架。前端用React+Vite，后端是Node.js裸寫HTTP服務(wù)。目錄拆成前后端兩個(gè)文件夾，看起來(lái)清爽，但第一次跑通卻卡了半小時(shí)——端口沖突。前端默認(rèn)5173，后端設(shè)了3000，本以為是井水不犯河水，結(jié)果瀏覽器緩存和CORS策略聯(lián)手搞事情。

具體結(jié)構(gòu)長(zhǎng)這樣：my-react-app下面分frontend和backend兩兄弟。frontend里頭是標(biāo)準(zhǔn)的Vite生成物，src目錄塞了App.jsx、main.jsx、calculator.js和index.css；backend更簡(jiǎn)陋，就一個(gè)server.js頂著，外加calculator.js做業(yè)務(wù)邏輯。README.md放在根目錄，算是給兩周后的自己留條活路。

后端那段代碼很直白：createServer監(jiān)聽(tīng)127.0.0.1:3000，返回一段帶學(xué)號(hào)的"Hello World"。但魔鬼在細(xì)節(jié)——hostname寫成'127.0.0.1'而不是'localhost'，在部分Windows機(jī)器上會(huì)觸發(fā)防火墻彈窗。講師的原話是："先讓它跑起來(lái)，再研究為什么跑起來(lái)。"

啟動(dòng)命令分兩條線。前端三件套：cd frontend、npm install、npm run dev。后端更省事，node server.js直接起。但這里埋了個(gè)雷：如果先跑后端再裝前端依賴，terminal窗口開(kāi)多了容易分不清哪個(gè)是哪個(gè)。我的解決辦法是給后端terminal標(biāo)簽標(biāo)紅，前端標(biāo)綠——土，但有效。

.gitignore的配置是當(dāng)天第二個(gè)頓悟時(shí)刻。node_modules、.env、dist/這三兄弟必須拉黑，否則GitHub會(huì)拒絕推送——單個(gè)文件超100MB直接報(bào)錯(cuò)，而node_modules輕輕松松破這個(gè)數(shù)。更隱蔽的問(wèn)題是嵌套倉(cāng)庫(kù)：如果frontend文件夾里不小心git init過(guò)，整個(gè)項(xiàng)目就會(huì)變成"倉(cāng)庫(kù)里的倉(cāng)庫(kù)"，push時(shí)Git會(huì)懵掉。

解決路徑是先把嵌套的.git目錄刪掉，再用git rm --cached清掉已經(jīng)track的文件，最后重新add、commit、push。講師演示時(shí)特意放慢了速度："看，這里出現(xiàn)fatal: refusing to merge unrelated histories的時(shí)候，別慌，加--allow-unrelated-histories只是止痛片，根治得把結(jié)構(gòu)理順。"

實(shí)訓(xùn)后半段切到MongoDB，用mongosh練CRUD。insert、find、update、delete四個(gè)操作，語(yǔ)法不算復(fù)雜，但case sensitivity坑了不少人——db.collection.findOne()和findone()在JavaScript里是兩個(gè)函數(shù)，在mongosh里后者直接報(bào)錯(cuò)。更隱蔽的是引號(hào)：JSON格式要求雙引號(hào)，但手滑打成單引號(hào)時(shí)，錯(cuò)誤提示指向的是"Unexpected token"，而不是"引號(hào)錯(cuò)了"。

有個(gè)細(xì)節(jié)值得記一筆。練習(xí)update操作時(shí)，有人用了$set有人忘了，結(jié)果后者直接把整條document替換成新值，舊字段全丟。講師沒(méi)阻止這個(gè)錯(cuò)誤，而是讓當(dāng)事人自己查db.collection.find()的輸出，對(duì)比前后差異。"比我說(shuō)十遍印象深刻"，這是他的原話。

兩天結(jié)束時(shí)的檢查清單包括：React+Vite前端、Node.js后端、Calculator UI、HTTP服務(wù)對(duì)接、GitHub倉(cāng)庫(kù)、.gitignore生效、雙端口并行。聽(tīng)起來(lái)基礎(chǔ)，但逐項(xiàng)打勾的過(guò)程里，每個(gè)勾背后都有至少一次報(bào)錯(cuò)和搜索。

最后的狀態(tài)是項(xiàng)目環(huán)境配齊了Node.js、Express.js、MongoDB，雖然Express在原文里只露了個(gè)名字，實(shí)際代碼還是原生http模塊。這種"知道有更方便的工具但先不用"的教學(xué)設(shè)計(jì)，倒是讓人理解為什么要學(xué)底層——等Express的app.get()出問(wèn)題時(shí)，你知道它最終調(diào)的是createServer。

托管部署環(huán)節(jié)用的是"multiple platforms"，具體名字沒(méi)展開(kāi)。從上下文推測(cè)是多平臺(tái)對(duì)比演示，但實(shí)訓(xùn)重點(diǎn)放在"能跑通"而非"選哪個(gè)"。畢竟對(duì)于兩天速成來(lái)說(shuō)，先建立端到端的信心，比糾結(jié)Vercel和Netlify的帶寬差異更實(shí)際。

如果非要總結(jié)點(diǎn)什么：全棧開(kāi)發(fā)的門檻不在代碼復(fù)雜度，而在故障定位。報(bào)錯(cuò)信息、日志輸出、網(wǎng)絡(luò)面板的來(lái)回切換，這些軟技能沒(méi)有快捷鍵。實(shí)訓(xùn)的價(jià)值或許就在這里——它模擬了真實(shí)工作流里"預(yù)期之外"的那部分，而不是教程里精心修剪過(guò)的happy path。