Nexmoe

Nexmoe

一个开发者。关于勇敢与热爱,互联网/创造/赛博朋克
twitter
github

使用 Docker 和 pnpm 優化打包 Nuxt.js 全棧項目

本文將指導你如何為一個結合了 Prisma 和 Nuxt.js 的全棧項目創建優化後的 Docker 鏡像,並使用 pnpm 作為包管理器。

我的項目最終鏡像大小從 1.12GB 縮減到了 160.21MB。

我的項目構成#

Nuxt.js 是一個基於 Vue.js 的服務器端渲染應用框架,非常適合於構建現代化的 Web 應用。

我的項目直接採用 Nuxt 構建全棧項目。

  • Nuxt3
  • Prisma
  • PNPM

開始構建#

首先,我們將使用 node:20-alpine 這個更輕量級的基礎鏡像來減小最終鏡像的大小。Alpine Linux 因其安全、簡單且體積小而廣受歡迎。

多階段構建是減少 Docker 鏡像大小的有效策略之一。我們將使用三個階段來構建我們的鏡像。

第一階段:構建依賴項#

ARG NODE_VERSION=node:20-alpine

FROM $NODE_VERSION AS dependency-base

WORKDIR /app

RUN npm install -g pnpm

COPY package.json pnpm-lock.yaml ./

RUN pnpm install --frozen-lockfile`

這一階段負責安裝我們項目的依賴項。我們使用了 pnpm 來代替 npm,pnpm 在緩存和磁盤使用上更為高效。

大部分項目也用 pnpm 而不是 npm 作為包管理工具了。

第二階段:構建應用程序#

FROM dependency-base AS production-base

COPY . .

RUN pnpm run build 

在這一階段,我們複製了項目代碼並執行構建命令。這裡的構建指的是 Nuxt.js 的構建過程,它會生成靜態文件和服務器端渲染所需的資源。

第三階段:生成生產鏡像#

FROM $NODE_VERSION AS production

COPY --from=production-base /app/.output /app/.output

ENV NUXT_HOST=0.0.0.0 \
    NUXT_APP_VERSION=latest \
    DATABASE_URL=file:./db.sqlite \
    NODE_ENV=production

WORKDIR /app

EXPOSE 3000

CMD ["node", "/app/.output/server/index.mjs"]

最後,我們創建了適用於生產環境的鏡像。這個鏡像僅包含用於運行應用程序的必要文件,減少了不必要的層,使得鏡像盡可能地保持精簡。

我們還定義了一些環境變量,比如 NUXT_HOSTDATABASE_URL,這些是 Nuxt.js 應用和 Prisma 所需要的。其中,DATABASE_URL 被設置為使用項目根目錄下的 SQLite 文件作為數據庫。

最終通過暴露端口 3000 並指定啟動命令來運行 Nuxt.js 應用程序。

不同構建方式的鏡像大小比較#

分別為:

  • 3 步構建
  • 2 步構建
  • 直接構建

a3c345aaa51a4b8b802c25bc9d3591c0.png

Dockerfile 總覽#

# Use a smaller base image
ARG NODE_VERSION=node:20-alpine

# Stage 1: Build dependencies
FROM $NODE_VERSION AS dependency-base

# Create app directory
WORKDIR /app

# Install pnpm
RUN npm install -g pnpm

# Copy the package files
COPY package.json pnpm-lock.yaml ./

# Install dependencies using pnpm
RUN pnpm install --frozen-lockfile

# Stage 2: Build the application
FROM dependency-base AS production-base

# Copy the source code
COPY . .

# Build the application
RUN pnpm run build

# Stage 3: Production image
FROM $NODE_VERSION AS production

# Copy built assets from previous stage
COPY --from=production-base /app/.output /app/.output

# Define environment variables
ENV NUXT_HOST=0.0.0.0 \
    NUXT_APP_VERSION=latest \
    DATABASE_URL=file:./db.sqlite \
    NODE_ENV=production

# Set the working directory
WORKDIR /app

EXPOSE 3000

# Start the app
CMD ["node", "/app/.output/server/index.mjs"]
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。