首页 > 其他分享 >使用 pnpm workspace 和 standalone 模式构建 Next.js 的 Docker 镜像

使用 pnpm workspace 和 standalone 模式构建 Next.js 的 Docker 镜像

时间:2024-08-28 12:57:11浏览次数:13  
标签:standalone -- Dockerfile app apps Next workspace pnpm my

引言

本文将探讨如何利用 pnpm workspace 和 standalone 模式来构建 Next.js 应用程序的轻量级 Docker 镜像。这种方法通过仅在 node_modules 目录中包含必要的文件,显著减少了最终 Docker 镜像的大小。
在这里插入图片描述

Standalone 模式简介

通常情况下,所有在 dependencies 中列出的包都会被放置在 node_modules 目录中,这会导致镜像体积增大。而在 standalone 模式下构建时,可以从 node_modules 中仅复制必需的文件到一个特定的目录。这样一来,node_modules 将只包含应用程序运行所需的文件,从而大幅减少镜像的大小!

要启用 standalone 模式,请在 next.config.js 文件中添加如下配置:

module.exports = {
  output: 'standalone',
};

目录结构

我们采用了类似于 Turborepo 结构的目录布局:

.
├── apps
│   └── my-app
│       ├── package.json
│       └── ...
├── Dockerfile
├── packages
│   └── other-app
│       └── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── Dockerfile
└── .npmrc

apps 目录包含了作为服务器启动的应用程序,而 packages 目录则包含了 apps 中使用的共享包。

Dockerfile 概览

Dockerfile 设计用于维护每个应用程序的独立性,并将其放置在 /apps/my-app 目录下。下面是 Dockerfile 的概览:

多阶段构建

本 Dockerfile 采用了多阶段构建的方法来分离关注点并最小化最终镜像的大小。

第一阶段:基础环境(base)

FROM node:20.12.0-slim AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"

# 启用 pnpm
RUN corepack enable

这一阶段设置了 pnpm 的环境。

第二阶段:依赖安装(deps)

FROM base AS deps

WORKDIR /app

# 复制 `pnpm install` 所需的文件
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml .npmrc ./
COPY ./apps/my-app/package.json /app/apps/my-app/package.json
COPY ./packages/ /app/packages/

RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
    pnpm install --frozen-lockfile

这一阶段安装了所需的依赖项。

第三阶段:构建器(builder)

FROM base AS builder

WORKDIR /app

# 复制已安装的 `node_modules` 从 deps 阶段
COPY --from=deps /app/node_modules ./node_modules
# 复制构建目标的目录
COPY ./apps/my-app ./apps/my-app
COPY --from=deps /app/packages ./packages
COPY --from=deps /app/.npmrc ./

# 展开符号链接并复制到 pruned 目录
RUN pnpm --filter=@monorepo/my-app deploy /pruned

WORKDIR /pruned

# 构建应用程序
RUN pnpm --filter=@monorepo/my-app build

这一阶段构建了应用程序并准备部署。

第四阶段:运行器(runner)

FROM base AS runner

WORKDIR /app

ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1

# 复制已构建的文件从 builder 阶段
COPY --from=builder /app/apps/my-app/public ./public
COPY --from=builder /pruned/.next/standalone .
COPY --from=builder /pruned/.next/static ./.next/static

CMD ["node", "server.js"]

这一阶段是启动应用程序的实际阶段。

构建 Docker 镜像

使用以下命令来构建 Docker 镜像并检查其大小:

$ docker build -f apps/my-app/Dockerfile --no-cache --target runner --tag myapp:latest --progress=plain

构建后检查镜像:

$ docker images

您将看到一个准备就绪且体积轻量的镜像。

结论

尽管在过程中遇到了一些挑战,比如理解 pnpm deploy 命令及管理多个应用程序在单一 workspace 中的过程,但最终还是成功地构建了一个高效且轻量的 Docker 镜像。

遇到的问题

  • 管理多个应用程序的复杂性:尝试在一个 Dockerfile 中处理所有应用程序目录下的应用,导致 --build-arg 参数增加,使得 Dockerfile 变得繁琐。
    • 解决方案:通过在每个 apps 目录中配置 Dockerfile 来避免这种情况。这样还可以针对每个应用程序单独进行 Node.js 的更新等操作。
  • pnpm deploy -> build 流程的理解不足:对 pnpm 通过符号链接工作的方式以及在 deploy 后将实际文件复制的行为理解不够深入,导致应用程序启动失败。
    • 解决方案:将 docker build--target 参数更改为 builder,然后通过 docker run -it my-app /bin/bash 进入容器并查看目录状态来进行调试。

参考链接

标签:standalone,--,Dockerfile,app,apps,Next,workspace,pnpm,my
From: https://blog.csdn.net/problc/article/details/141637951

相关文章

  • Review of the BMW ICOM Next
    Here’saquickreviewoftheBMWICOMNextA+B+C,thenewdiagnostictoolmadeinChina:1.PerformanceandBuildQuality:TheICOMNextisnoticeablyfasterthantheolderBMWICOMmodelsandseemstobebetterbuilt.ItcomesequippedwithWi-Fi,whichen......
  • 2024年智能革命:HarmonyOS NEXT与盘古大模型5.0的颠覆性融合
    引言2024年,这一年注定在全球智能设备市场的历史上写下浓墨重彩的一笔。作为全球科技巨头,华为再次以其前瞻性的布局,推动了技术与应用的深度融合。在这个充满变革的时代,华为通过不断扩展的鸿蒙生态系统,重新定义了操作系统与AI技术的结合方式。你是否已经感受到这场变革的力量?在全......
  • 在NextChat中接入SiliconCloud API 体验不同的开源先进大语言模型
    NextChat介绍One-Clicktogetawell-designedcross-platformChatGPTwebUI,withGPT3,GPT4&GeminiProsupport.一键免费部署你的跨平台私人ChatGPT应用,支持GPT3,GPT4&GeminiPro模型。主要功能在1分钟内使用Vercel免费一键部署提供体积极小(~5MB)的跨......
  • 【HarmonyOS NEXT应用开发】案例99:基于HiAppEvent能力的应用崩溃监控上报
    HiAppEvent介绍:HiAppEvent的接口设计,由系统决定回调的时机。使用这种机制,可以获取的应用崩溃事件结构化日志。HiAppEvent运营&运维事件软件模块,用于连接APP开发者、APM上传模块、HiView故障维测服务。支撑应用开发者完成运营和运维的数据分析工作。主要通过如下措施支持开发......
  • 【HarmonyOS NEXT应用开发】案例98:HiLog日志能力介绍
    ⦁   日志打印及显示。日志打印格式:日期时间进程号线程号日志级别domainID/日志标签:日志内容如下所示,这是一条domainID为0x003200和标签是"testTag"的info级别的日志:04-1917:02:14.735 5394 5394IA03200/testTag:thisisainfolevelhilog说明:日志级......
  • vue中的nextTick到底是什么!!!
    一、js执行机制js是单线程语言单线程:指一个时间只能做一件事,进行一个任务时,不能同时进行其他任务。疑问:一个时间只能做一件事,不能并行处理,那效率必然很低啊,为什么不能是多线程呢?原因:是否多线程这个取决于语言的用途,一个很简单的例子,如果同一时间,一个添加了 DOM,一个删除了......
  • 【NextJS】中间件实战介绍
    原创洞窝技术使用Next.js中间件实现高性能个性化在当今的数字时代,用户期望获得量身定制的在线体验。个性化已经从一个奢侈品变成了必需品,尤其是对于希望在竞争激烈的市场中脱颖而出的企业来说。然而,实现高性能的个性化往往是一个挑战,需要在用户体验和系统性能之间取得......
  • abp vnext请求头增加,以及请求头增加公共头部回调
    context.Services.AddHttpContextAccessor();要访问请求头的话,要加上这个语句;追加请求头的方法:1、服务层服务的HttpApi.Client项目Module类的ConfigureServices方法开头位置添加如下代码:context.Services.AddTransient<AddHeaderHandler>();context.Services.AddHttpClient(Prod......
  • 【HarmonyOS NEXT应用开发】案例69:基于原生能力的压缩与解压缩能力
    一、场景描述概览、常用图片编码格式比对及系统支持情况压缩格式简介系统支持/使用方式zip普及率高,适用范围也最广,压缩速度相比rar快一些ArkTs支持,可通过zlib实现,jsziprarrar格式比zip更能够提供较好的压缩率,但压缩速度也相对慢一些三方库支持,通过Unrar实现......
  • 【HarmonyOS NEXT星河版开发实战】天气查询APP
    目录前言界面效果展示首页添加和删除 界面构建讲解1.获取所需数据 2.在编译器中准备数据 3.index页面代码讲解 3.1导入模块: 3.2 定义组件:3.3 定义状态变量:3.4  定义Tabs控制器:3.5 定义按钮样式: 3.6 页面显示时触发的方法: 3.7 获取数据的方......