在這篇文章中，我們將探索 Docker 並逐步使用簡單的 Nginx 應用程式建立多階段 Docker 建置。如果你剛開始使用 Docker，別擔心，我會一步一步分解所有內容，以便你可以跟著做！

Dockerfile

這是我們將要使用的 Dockerfile：

FROM node:18-alpine AS installer

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest AS deployer

COPY --from=installer /app/build /usr/share/nginx/html

解壓縮 Dockerfile

現在，讓我們一步一步解開這個 Dockerfile 中發生的事情：

1. 來自節點：18-alpine AS安裝程式

此行從 Docker Hub 中提取官方 Node.js 映像（Alpine Linux 上的版本 18）。將 Docker Hub 視為一個映像庫。透過使用這一行，我們指定要使用 Node.js 作為建立第一階段的基礎鏡像。

2. WORKDIR /應用程式

此指令將容器內的工作目錄設定為/app。您可以將其視為在容器內為您的應用程式建立一個專用資料夾，類似於您在桌面上組織文件的方式。

3. 複製包*.json ./

在這裡，我們將 package.json 和 package-lock.json 檔案從本機目錄複製到容器的工作目錄。這些文件包含有關我們的應用程式所需的依賴項的資訊。

4. 運行 npm install

此指令執行 npm install，它會安裝 package.json 中指定的所有相依性。

5. 複製。 .

這一行將其餘的應用程式檔案複製到容器中。它將本機目錄中的所有內容帶到容器內的 /app 目錄中。

6. RUN npm run build

現在我們使用指令 npm run build 編譯我們的應用程式。此步驟通常將我們的程式碼（在本例中通常是 React）轉換為靜態包，準備好提供給使用者。此命令的輸出將放置在 /app 內的建置目錄中。

7. 來自 nginx:最新 AS 部署程式

在這一行中，我們切換到一個新的基礎鏡像：Nginx。 Nginx 是一個功能強大的 Web 伺服器，可以提供靜態文件，就像我們剛剛建立的那樣。這是多階段建構過程第二階段的開始。

8. COPY --from=installer /app/build /usr/share/nginx/html

在這裡，我們將前一階段（安裝程式）建置的應用程式檔案複製到 Nginx 服務目錄中。 --from=installer 標誌告訴 Docker 從我們剛剛定義的安裝程式階段取得檔案。

運行你的 Docker 容器

設定好 Dockerfile 後，您可以使用以下指令建置並執行 Docker 容器：

docker build -t your-app-name .
docker run -dp 3000:80 your-app-name

確保將 your-app-name 替換為您選擇的名稱。 -dp 標誌將分離您的容器並將主機上的連接埠 3000 對應到容器中的連接埠 80，讓您可以透過 http://localhost:3000 存取您的應用程式。

結論

這就是你得到的！您剛剛創建了一個多階段 Docker 構建，該構建使用 Nginx 將您的應用程式從開發帶到生產。如果您對此過程有任何疑問或想法，請隨時在下面發表評論！

陷阱：需要注意的事項

使用此設定時的常見問題是忘記映射正確的連接埠號碼。 Nginx 通常會偵聽容器內的連接埠 80，但如果您嘗試存取本機電腦上的應用程序，則需要將正確的連接埠從容器轉送到您的電腦。例如，如果您想存取 localhost:3000 上的應用程序，則需要使用 -p 3000:80 標誌運行容器，以將電腦上的連接埠 3000 對應到容器中的連接埠 80。

錯過這一步，您會發現自己想知道為什麼一切都構建得很完美，但您無法在瀏覽器中訪問該應用程式！

標籤和提及

@piyushsachdeva
第三天影片