使用獨立建置對 Next.js 應用程式進行 Docker 化

介紹

Docker 近年來因允許將應用程式放置在容器內而受到歡迎。這些容器可以部署到任何環境，並且在所有環境中都以相同的方式工作，無論應用程式運行的平台如何，都提供統一行為。這些容器使用圖像，它們是應用程式的副本或壓縮快照。透過將它們放置在容器中，它們將完全按原樣顯示。這是一些人迫切需要的技術之一，而另一些人直到聽說它才意識到他們需要它。

就其本身而言，Next.js 是最受歡迎的 React 框架。與使用 webpack 或 Vite 等捆綁器的任何其他 JavaScript 應用程式一樣，使用專案的編譯版本進行生產。這稱為構建。建立旨在提供應用程式所需的最少量程式碼，使其與開發中的功能相同。這確保了 JavaScript 檔案非常輕量級，允許瀏覽器在盡可能短的時間內獲取和解釋它們，以呈現使用者介面或執行應用程式所需的任何任務。 ”

Next.js 特別提供了一個進一步減小建置大小的版本：獨立建置。如果我們使用 Docker 為 Next.js 應用程式建立映像，我們可以輕鬆地將我們建置的出色應用程式部署到任何環境，而無需擔心相容性或其他配置。在本文中，我們將了解如何實現它。

套件管理器

就我而言，我喜歡使用 pnpm 來減少 node_modules 資料夾的磁碟大小。因此，Next.js Docker 映像的範例使用了這個套件管理器，但如果您願意，您可以稍作調整以使用 npm 或 YARN。

Next.js 配置

在 next.config.js 檔案中，我們必須指定當應用程式編譯用於生產時，產生的建置類型將是獨立的。為此，我們需要包含以下內容：

這樣，應用程式的輸出將是獨立類型。

Dockerfile

代表我們的 Docker 映像的檔案是 Dockerfile。通常該檔案放置在專案的根目錄中。讓我們一步一步來創建它。

基礎鏡像

每個 Docker 映像都從基礎映像開始。在這種情況下，任何執行伺服器的 JavaScript 專案都需要像 Node.js 這樣的執行時間。我們將以與我們的專案相容的 Node.js 版本的 Docker 映像為基礎。就我而言，我喜歡使用 Alpine 版本的圖像，因為它更輕。但是，我們在建立鏡像時必須檢查是否有相容性問題，否則，我們必須使用「非Alpine」版本的鏡像。對於此範例，我使用 node:22.6.0-alpine3.19 影像作為基礎。

我們放置一個別名以在圖像的不同步驟或階段回收它。

系統和 pnpm 依賴項

下一階段是安裝相依性。在這種情況下，只需要一個系統相依性：libc6-compat。這裡提到了原因。

由於 Node.js 預設不包含 pnpm，因此需要啟動它並設定環境變量，以便快取已安裝的套件。

然後，我們必須設定工作目錄，以明確區分系統資料夾和應用程式資料夾。在本例中，我們使用 /app。

現在我們必須複製包含專案依賴資訊的檔案並安裝它們。

--frozen-lockfile 和 --prefer-frozen-lockfile 參數用於遵守 pnpm 鎖定檔案中指定的版本。

為了完成此階段，新增了 Sharp 庫。這是在 Next.js 生產環境中最佳化影像所必需的。

整個舞台是這樣的：

建立應用程式

下一階段是編譯 Next.js 應用程式。這是使映像正常運作的關鍵所在，因為 Dockerfile 的其餘部分沒有任何不同，或者您在任何其他範例中找不到。 在此階段，需要將專案中使用的環境變數作為建置參數傳遞，並在生成建置之前設定它們。

這是因為，由於應用程式有兩個工作時間，即建置時間和運行時間，如果環境變數在運行時不可用，則所有使用它們的靜態資源都不會具有它們的值並且該應用程式將無法正常工作。在此範例中，使用了三個環境變數：NEXT_PUBLIC_BACKEND_URL、FRONTEND_URL 和 JWT_SECRET。

然後，pnpm 被激活，工作目錄被設置，所有應用程式檔案被複製並產生建置。

整個舞台是這樣的：

運行應用程式

最後一個階段是執行應用程式。為此，我們先設定 Node 生產環境：

依個人喜好，Next.js 遙測被停用。也就是說，我們基本上不會將應用程式資料傳送到 Vercel 來透過錯誤診斷和使用指標來改進 Next.js。

此外，作為一個好的實踐，建議在 Docker 映像中使用非 root 使用者。例如，這可以避免容器有權存取主機網路時出現安全漏洞。為此，需要新增一個 nodejs 群組和一個 nextjs 使用者並指派 .next 資料夾屬性。

然後，複製獨立建置產生的檔案以建立與 Next.js 預設建構相同的結構。

由於我們建立了 nextjs 用戶，我們需要指定這將是要使用的用戶。

同樣，需要指定容器暴露的端口，以及將使用的節點端口和主機名，由於我們不知道確切的地址，因此主機名將為 0.0.0.0。

然後，從建置參數中指定應用程式執行階段的環境變數。

可以使用 docker-compose.yml 檔案中指定的環境變量，以及運行容器時，但是，在此上下文中的環境變量在構建時和運行時不同是沒有意義的.

最後，我們運行伺服器。

完整文件

完整的 Dockerfile 如下所示：

您也可以在此要點中找到該文件。

結論

為 Next.js 應用程式建立 Docker 映像一開始可能會令人畏懼，因為我們必須考慮所有因素。此外，人們普遍認為自託管 Next.js 應用程序，即。例如，在 Vercel 之外，情況很複雜。事實並非如此。了解了關鍵部分，其實很簡單。

我希望透過這些信息，您可以毫無問題地對您的 Next.js 應用程式進行 dockerize。你知道該怎麼做，如果你有任何問題或想分享一些東西，請留在評論中:)

以上是使用獨立建置對 Next.js 應用程式進行 Docker 化的詳細內容。更多資訊請關注PHP中文網其他相關文章！