docker文件示例代碼：

# Use a minimal image for development
FROM node:18-alpine

# Set working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json (or yarn.lock) into the container
COPY package.json package-lock.json* ./

# Install the app dependencies with --legacy-peer-deps to bypass the peer dependency conflict
RUN npm install --legacy-peer-deps

# Copy the rest of the application files into the container
COPY . .

# Expose the port the app will run on
EXPOSE 3000

# Start the Next.js app in development mode
CMD ["npm", "run", "dev"]

這段 Dockerfile 用于構(gòu)建一個(gè)基于 Node.js 18 Alpine 版本的容器，并運(yùn)行一個(gè) Next.js 應(yīng)用。

逐行解析

1. 選擇基礎(chǔ)鏡像

FROM node:18-alpine

• 使用 node:18-alpine 作為基礎(chǔ)鏡像，alpine 是 輕量級(jí) Linux 版本，比 node:18 體積更小，減少 Docker 鏡像的大小。

2. 設(shè)置工作目錄

WORKDIR /app

• 在 容器內(nèi) 創(chuàng)建 /app 目錄，并把它作為 當(dāng)前工作目錄。
• 之后的所有操作都會(huì)在 /app 目錄下執(zhí)行。

3. 復(fù)制package.json和package-lock.json

COPY package.json package-lock.json* ./

• 只復(fù)制 package.json 和 package-lock.json，避免不必要的文件影響 npm install 緩存。
• package-lock.json* 這樣寫(xiě)是為了：
  • 兼容 package-lock.json 和 package-lock.json.gz（如果存在）。

4. 安裝依賴(lài)

RUN npm install --legacy-peer-deps

• npm install 安裝 Node.js 依賴(lài)。
• --legacy-peer-deps 選項(xiàng)用于：
  • 跳過(guò) peerDependencies（依賴(lài)版本沖突時(shí)不報(bào)錯(cuò)）。
  • 適用于 舊項(xiàng)目或有沖突的依賴(lài)。

5. 復(fù)制項(xiàng)目代碼

COPY . .

• 復(fù)制 本地所有文件 到 容器的 /app/ 目錄。
• 這里 不會(huì)重復(fù)安裝依賴(lài)，因?yàn)?npm install 早就運(yùn)行過(guò)了。

6. 開(kāi)放端口

EXPOSE 3000

• 這個(gè) 只是聲明 容器會(huì)使用 3000 端口，但默認(rèn)不會(huì)讓外部訪問(wèn)。
• 真正讓外部訪問(wèn)時(shí)，需要 -p 參數(shù)：

  docker run -p 3000:3000 my-next-app
  

  這樣才能 映射端口，讓瀏覽器訪問(wèn) http://localhost:3000。

7. 運(yùn)行 Next.js 應(yīng)用

CMD ["npm", "run", "dev"]

• 容器啟動(dòng)時(shí)執(zhí)行 npm run dev，即 開(kāi)發(fā)模式運(yùn)行 Next.js。
• 這個(gè)命令等價(jià)于：

  npm run dev
  

  • dev 腳本通常在 package.json 里：

    "scripts": {
      "dev": "next dev"
    }
    

  • Next.js 開(kāi)發(fā)服務(wù)器會(huì)在 localhost:3000 運(yùn)行。

完整流程

1. 基于 node:18-alpine 創(chuàng)建一個(gè)容器
2. 在 /app 目錄下工作
3. 復(fù)制 package.json 并安裝依賴(lài)
4. 復(fù)制整個(gè)項(xiàng)目代碼
5. 暴露 3000 端口
6. 運(yùn)行 npm run dev 啟動(dòng) Next.js 服務(wù)器

如何使用

1. 構(gòu)建鏡像

docker build -t my-next-app .

2. 運(yùn)行容器

docker run -p 3000:3000 my-next-app

然后在瀏覽器訪問(wèn)：

http://localhost:3000

如果一切正常，你會(huì)看到 Next.js 應(yīng)用的頁(yè)面！??

設(shè)置工作目錄，所有操作都會(huì)在 /app 目錄下執(zhí)行。

當(dāng)前app目錄下沒(méi)有內(nèi)容吧，那怎么復(fù)制 package.json 和 package-lock.json

在 WORKDIR /app 之后，/app 目錄雖然存在，但還是空的。

但是，Docker COPY 命令不會(huì)受這個(gè)影響，它會(huì)從宿主機(jī)（你的電腦）復(fù)制文件到 /app 目錄下。

詳細(xì)流程

WORKDIR /app
COPY package.json package-lock.json* ./

?? 第一步：WORKDIR /app

• 這會(huì) 切換到 /app 目錄，如果 /app 目錄不存在，Docker 會(huì)自動(dòng)創(chuàng)建它。

?? 第二步：COPY package.json package-lock.json* ./

• COPY 命令會(huì)從 宿主機(jī)（你的電腦） 的 當(dāng)前目錄 復(fù)制 package.json 和 package-lock.json 到 /app 目錄下。
• ./ 代表目標(biāo)路徑是 當(dāng)前目錄，因?yàn)?WORKDIR /app 已經(jīng)切換到 /app，所以 ./ 實(shí)際上就是 /app/。

舉個(gè)例子

假設(shè)你的 項(xiàng)目目錄 結(jié)構(gòu)如下：

/my-project
 ├── Dockerfile
 ├── package.json
 ├── package-lock.json
 ├── src/
 ├── pages/
 └── node_modules/

你在 /my-project 目錄下運(yùn)行：

docker build -t my-next-app .

Docker 執(zhí)行過(guò)程：
1?? WORKDIR /app → 在容器內(nèi)創(chuàng)建并切換到 /app
2?? COPY package.json package-lock.json* ./ → 把 package.json 和 package-lock.json 復(fù)制到 /app/
3?? RUN npm install --legacy-peer-deps → 在 /app/ 里安裝依賴(lài)
4?? COPY . . → 復(fù)制 所有剩余文件（比如 src/、pages/）

總結(jié)

• WORKDIR /app 只是 切換工作目錄，不影響后續(xù) COPY
• COPY package.json package-lock.json* ./ 復(fù)制 package.json 和 package-lock.json 到 /app/
• COPY . . 復(fù)制所有剩余文件
• 這樣可以 優(yōu)化緩存，加快構(gòu)建速度 ??

如果還是不懂，那就先理解下面的內(nèi)容。。

COPY package.json package-lock.json ./這行代碼的意思

COPY package.json package-lock.json* ./

它的作用是：

?? 從宿主機(jī)（你的電腦）復(fù)制 package.json 和 package-lock.json 到 Docker 容器的 /app/ 目錄下。

拆解解釋

COPY package.json package-lock.json* ./

• package.json package-lock.json* → 要復(fù)制的文件（來(lái)自你的 本地電腦）
• ./ → 目標(biāo)路徑（容器內(nèi)的 /app/）

為什么./代表/app/？

因?yàn)?之前已經(jīng)有 WORKDIR /app 了：

WORKDIR /app
COPY package.json package-lock.json* ./

• WORKDIR /app 讓 當(dāng)前工作目錄 變成 /app
• COPY package.json package-lock.json* ./ 里的 ./ 指的是 當(dāng)前工作目錄
• 所以 ./ 實(shí)際上等同于 /app/

相當(dāng)于：

COPY package.json package-lock.json* /app/

舉個(gè)例子

假設(shè)你的 宿主機(jī)（電腦）的項(xiàng)目目錄：

/my-project
 ├── Dockerfile
 ├── package.json
 ├── package-lock.json
 ├── src/
 ├── pages/
 └── node_modules/

當(dāng)你運(yùn)行：

docker build -t my-next-app .

Docker 會(huì)執(zhí)行：
1?? WORKDIR /app → 現(xiàn)在 /app 是容器內(nèi)的工作目錄
2?? COPY package.json package-lock.json* ./ → 復(fù)制 package.json 和 package-lock.json 到 /app/ 目錄
3?? RUN npm install --legacy-peer-deps → 在 /app/ 里安裝依賴(lài)
4?? COPY . . → 復(fù)制 剩下的所有文件（比如 src/、pages/）

總結(jié)

? ./ 代表 容器里的 /app/，因?yàn)?WORKDIR /app 讓 /app 成為了當(dāng)前目錄
? COPY package.json package-lock.json* ./ 相當(dāng)于 COPY package.json package-lock.json* /app/
? 先復(fù)制依賴(lài)文件再?gòu)?fù)制整個(gè)項(xiàng)目，是為了優(yōu)化 Docker 緩存，加快構(gòu)建速度 ??

COPY . .是什么意思，為什么這里是兩個(gè)..

COPY . .

這條指令的作用是：

?? 把宿主機(jī)（你的電腦）的 當(dāng)前目錄（.）的 所有文件 復(fù)制到 容器內(nèi)的當(dāng)前目錄（.）。

由于 WORKDIR /app 設(shè)定了工作目錄為 /app，所以 . 實(shí)際上是 /app/，最終效果是：

?? 把宿主機(jī)的整個(gè)項(xiàng)目目錄復(fù)制到容器的 /app/ 目錄里。

拆解解釋

COPY <源路徑> <目標(biāo)路徑>

• 第一個(gè) .（源路徑）：指的是 宿主機(jī)上的當(dāng)前目錄（Docker 構(gòu)建時(shí)的 Dockerfile 所在目錄）
• 第二個(gè) .（目標(biāo)路徑）：指的是 容器內(nèi)的當(dāng)前工作目錄（WORKDIR /app 已經(jīng)設(shè)置）

所以：

WORKDIR /app
COPY . .

等價(jià)于：

COPY . /app/

舉個(gè)例子

假設(shè)你的 本地項(xiàng)目目錄（宿主機(jī)）：

/my-project
 ├── Dockerfile
 ├── package.json
 ├── package-lock.json
 ├── src/
 ├── pages/
 ├── node_modules/
 ├── public/
 └── .gitignore

你運(yùn)行：

docker build -t my-next-app .

Docker 執(zhí)行過(guò)程：
1?? WORKDIR /app → 切換到 /app/ 目錄（如果沒(méi)有，就創(chuàng)建它）
2?? COPY package.json package-lock.json* ./ → 復(fù)制 package.json 和 package-lock.json 到 /app/
3?? RUN npm install --legacy-peer-deps → 安裝依賴(lài)
4?? COPY . . → 復(fù)制整個(gè)項(xiàng)目到 /app/，包括 src/、pages/、public/ 等

最終容器內(nèi)的 /app/ 目錄會(huì)變成：

/app
 ├── package.json
 ├── package-lock.json
 ├── src/
 ├── pages/
 ├── node_modules/  (npm install 之后才有)
 ├── public/
 ├── .gitignore

這樣容器就擁有了完整的項(xiàng)目代碼，可以運(yùn)行 Next.js 了！??

為什么要COPY . .？

? 把整個(gè)項(xiàng)目復(fù)制到容器內(nèi)，保證 npm run dev 可以運(yùn)行
? 必須在 npm install 之后執(zhí)行，避免 node_modules/ 被覆蓋
? 確保 src/、pages/ 這些代碼文件都能進(jìn)入容器

總結(jié)

• COPY . . 就是 COPY . /app/
• 把宿主機(jī)（本機(jī)）的項(xiàng)目文件，復(fù)制到容器內(nèi)的 /app/ 目錄
• 必須在 npm install 之后執(zhí)行，避免影響 node_modules/
• 這樣容器就可以運(yùn)行 Next.js 應(yīng)用了 ??

COPY .. → 復(fù)制整個(gè)項(xiàng)目到 /app/，包括 src/、pages/、public/ 等，這樣不就會(huì)重復(fù)復(fù)制前面已經(jīng)復(fù)制過(guò)的文件了么，比如package.json package-lock.json

是的，COPY . . 確實(shí)會(huì)再次復(fù)制 package.json 和 package-lock.json，但這不會(huì)影響構(gòu)建結(jié)果，主要目的是 優(yōu)化 Docker 構(gòu)建緩存，加快構(gòu)建速度。

為什么先COPY package.json package-lock.json ./再COPY . .？

先單獨(dú)復(fù)制package.json和package-lock.json

COPY package.json package-lock.json* ./
RUN npm install --legacy-peer-deps

這樣做的好處：

• Docker 會(huì)緩存 npm install 結(jié)果，下次構(gòu)建時(shí)，如果 package.json 沒(méi)有改動(dòng)，就不會(huì)重新安裝依賴(lài)，直接用緩存的 node_modules！
• 避免 npm install 被 COPY . . 之后的代碼改動(dòng)影響（如果 src/ 里的文件改了，不影響 node_modules）。

再?gòu)?fù)制整個(gè)項(xiàng)目

COPY . .

這樣做的好處：

• 確保 所有代碼文件（src/、pages/、public/）都能進(jìn)入容器。
• 不影響 node_modules/ 緩存，因?yàn)?npm install 之前已經(jīng)執(zhí)行過(guò)了。

如果不先COPY package.json，直接COPY . .會(huì)怎樣？

如果你只寫(xiě)：

COPY . .
RUN npm install --legacy-peer-deps

問(wèn)題在于：

1. 每次項(xiàng)目代碼有一點(diǎn)改動(dòng)（比如 src/ 文件變了），COPY . . 都會(huì)讓 Docker 重新執(zhí)行 RUN npm install，導(dǎo)致浪費(fèi)時(shí)間！
2. npm install 需要很久，每次構(gòu)建都會(huì)重新下載依賴(lài)，非常慢。

總結(jié)

? 先 COPY package.json package-lock.json ./，讓 npm install 結(jié)果被緩存，加快構(gòu)建
? 再 COPY . .，確保所有代碼文件（src/、pages/ 等）被復(fù)制
? 即使 package.json 被重復(fù)復(fù)制，也不會(huì)影響最終構(gòu)建速度 ??

為什么先COPY package.json package-lock.json ./，可以讓 npm install 結(jié)果被緩存

Docker 構(gòu)建時(shí)，會(huì)緩存每一層命令的結(jié)果，如果前面某一層的輸入沒(méi)有變，Docker 就不會(huì)重新執(zhí)行它，而是直接用緩存。

Docker 的緩存機(jī)制

當(dāng)你運(yùn)行 docker build 時(shí)，Docker 會(huì)：

1. 逐行讀取 Dockerfile
2. 檢查每一層是否有變動(dòng)
3. 如果某一層和上次構(gòu)建時(shí)相同，就復(fù)用緩存
4. 如果某一層變了，后面的所有層都會(huì)重新執(zhí)行（緩存失效）

舉個(gè)例子

沒(méi)有單獨(dú)復(fù)制package.json，直接COPY . .

# 設(shè)置工作目錄
WORKDIR /app

# 直接復(fù)制整個(gè)項(xiàng)目
COPY . .

# 安裝依賴(lài)
RUN npm install --legacy-peer-deps

這里的問(wèn)題

• COPY . . 會(huì)把 所有文件（包括 src/、pages/、public/）都復(fù)制到 /app/
• 如果 src/ 里的代碼有改動(dòng)，整個(gè) COPY . . 就會(huì)變動(dòng)
• Docker 發(fā)現(xiàn) COPY . . 變了，就會(huì)讓 npm install 重新執(zhí)行，緩存失效
• npm install 需要很長(zhǎng)時(shí)間，每次構(gòu)建都要重復(fù)下載依賴(lài)，太慢了！??

優(yōu)化方法：先COPY package.json package-lock.json ./

# 設(shè)置工作目錄
WORKDIR /app

# 先復(fù)制 package.json 和 package-lock.json
COPY package.json package-lock.json* ./

# 運(yùn)行 npm install，并緩存 node_modules
RUN npm install --legacy-peer-deps

# 復(fù)制剩下的所有文件
COPY . .

為什么這樣能加速構(gòu)建？

1?? Docker 先執(zhí)行 COPY package.json package-lock.json ./

• 只復(fù)制 package.json 和 package-lock.json，不會(huì)受 src/ 文件改動(dòng)影響

2?? 然后執(zhí)行 RUN npm install --legacy-peer-deps

• 如果 package.json 沒(méi)變，Docker 直接復(fù)用上次構(gòu)建的 node_modules
• 跳過(guò) npm install，節(jié)省時(shí)間！??

3?? 最后執(zhí)行 COPY . .

• 復(fù)制 src/、pages/、public/ 等代碼文件
• 即使代碼變了，npm install 也不會(huì)重新執(zhí)行

這樣做的結(jié)果

? 如果 package.json 沒(méi)變，Docker 直接復(fù)用 node_modules，構(gòu)建速度快很多
? 即使 src/ 代碼變了，也不會(huì)觸發(fā) npm install，不會(huì)浪費(fèi)時(shí)間
? 整個(gè)構(gòu)建流程更高效，省時(shí)省力 ??

時(shí)間對(duì)比

?? 這樣優(yōu)化后，構(gòu)建速度可以快 10 倍以上！ ??

如果 Docker 關(guān)閉后重新啟動(dòng)，還需要重新安裝依賴(lài)嗎？

? 如果你只是重啟 Docker（比如 docker stop → docker start），不需要重新安裝依賴(lài)，因?yàn)槿萜鞯奈募到y(tǒng)還在，node_modules/ 也還在。

? 但是，如果你刪除了容器或構(gòu)建了新鏡像，就需要重新安裝依賴(lài)！

分情況討論

1. 只是重啟 Docker

docker stop my-container  # 關(guān)閉容器
docker start my-container # 重新啟動(dòng)

• node_modules/ 還在，不需要重新安裝依賴(lài)
• 應(yīng)用可以直接運(yùn)行
• 適用于日常使用

2. 刪除容器后再啟動(dòng)

docker rm my-container   # 刪除容器
docker run my-image      # 重新運(yùn)行

• 容器被刪除，所有文件（包括 node_modules/）都會(huì)丟失
• 需要重新 npm install
• 這時(shí) Docker 會(huì)根據(jù) Dockerfile 重新安裝依賴(lài)

3. 重新docker build

docker build -t my-app .  # 重新構(gòu)建鏡像
docker run my-app         # 運(yùn)行新容器

• 如果 package.json 沒(méi)變，Docker 可能會(huì)復(fù)用 npm install 的緩存
• 如果 package.json 變了，npm install 會(huì)重新運(yùn)行
• 推薦使用 Docker Volume 來(lái)持久化 node_modules/（見(jiàn)下面的方法）

如何讓node_modules/不丟失？（Docker Volume 持久化）

方法 1??：使用docker-compose綁定node_modules目錄

創(chuàng)建 docker-compose.yml：

version: '3'
services:
  app:
    build: .
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - "3000:3000"

這樣即使你刪除容器，node_modules/ 也不會(huì)丟失。

方法 2??：手動(dòng)掛載 Volume

運(yùn)行容器時(shí)，使用 -v 選項(xiàng)：

docker run -v my-node-modules:/app/node_modules -p 3000:3000 my-app

• 這樣 node_modules/ 會(huì)存儲(chǔ)在 Docker Volume 里
• 即使你刪除容器，依賴(lài)也不會(huì)丟失

總結(jié)

? 推薦使用 Volume，這樣即使容器被刪，依賴(lài)也不會(huì)丟失 ??

如果你關(guān)了電腦、退出了 Docker，下次啟動(dòng)后還需要重新安裝依賴(lài)嗎？

? 大多數(shù)情況下，不需要重新安裝依賴(lài)！

如果你只是 關(guān)機(jī)、退出 Docker，再次啟動(dòng)，你的 容器和 node_modules/ 依然會(huì)保留，不需要重新 npm install。

但 如果你刪除了容器、清理了 Docker 數(shù)據(jù)，或者用了 --rm 運(yùn)行容器，就需要重新安裝依賴(lài)！

具體情況分析

如何確保關(guān)機(jī)后node_modules/不丟失？

方法 1：使用持久化 Volume

docker run -v my-node-modules:/app/node_modules -p 3000:3000 my-app

這樣 node_modules/ 會(huì)存儲(chǔ)在 Docker Volume 里，即使容器被刪除，依賴(lài)也不會(huì)丟失。

方法 2：用docker-compose管理項(xiàng)目

創(chuàng)建 docker-compose.yml：

version: '3'
services:
  app:
    build: .
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - "3000:3000"

然后啟動(dòng)：

docker-compose up -d

這樣即使你重啟 Docker 或關(guān)機(jī)，node_modules/ 依然會(huì)保留。

總結(jié)

如果你只是關(guān)機(jī)、退出 Docker， 依賴(lài)不會(huì)丟失，開(kāi)機(jī)后可以直接運(yùn)行容器 ??

但如果刪除了容器，就需要重新安裝 npm install！

到此這篇關(guān)于docker構(gòu)建并啟動(dòng)前端的文章就介紹到這了,更多相關(guān)docker構(gòu)建啟動(dòng)前端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！