如何在VS Code开发容器的Docker Compose中用pnpm替换npm

问题背景 #

现有用于Next.js应用的Dockerfile及配套脚本，尝试将npm替换为pnpm安装依赖时，执行npm add -g pnpm后出现pnpm未找到的错误，需改造现有配置完成替换。

一、修改Dockerfile，正确安装并配置pnpm #

替换原有npm配置部分，确保pnpm安装到用户目录且PATH包含其可执行路径：

# 原npm配置部分替换为以下内容
USER container_user

# 安装pnpm并配置存储目录
RUN mkdir -p /home/container_user/.pnpm-store && \
  npm install -g pnpm && \
  pnpm config set store-dir /home/container_user/.pnpm-store

# 配置PNPM_HOME并更新系统PATH
ENV PNPM_HOME=/home/container_user/.npm-global/bin
ENV PATH=$PATH:$PNPM_HOME

# 后续原有配置保持不变...

说明：

• 保持以非root用户container_user安装pnpm，避免权限问题
• 通过pnpm config set store-dir指定缓存目录，适配容器内用户权限
• 将pnpm的可执行目录加入PATH，确保全局调用pnpm命令有效

二、修改bootstrap.sh脚本，替换npm操作 #

需要修改两处关键逻辑：

1. 调整create-next-app初始化参数 #

将--use-npm改为--use-pnpm，确保生成的项目默认使用pnpm：

# 原create-next-app命令修改后
if ! npx --yes create-next-app@$NEXT_VERSION . --yes \
  --ts \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --use-pnpm \
  --import-alias "@/*" \
  --skip-install; then
  echo "Next.js project initialization failed."
  exit 1
fi

2. 替换依赖安装命令 #

将npm install改为pnpm install：

# 原npm install替换为
pnpm install --loglevel verbose

可选优化：在脚本开头添加pnpm存在性检查，提前发现问题：

set -e

# 新增检查逻辑
if ! command -v pnpm &> /dev/null; then
  echo "Error: pnpm is not installed in the container."
  exit 1
fi

if [ -z "$TARGET_WORKDIR" ]; then
  echo "Error: TARGET_WORKDIR is not set."
  exit 1
fi

三、验证修改效果 #

1. 在VS Code中重新构建Dev Container，确保新的Docker镜像被生成
2. 容器启动后，执行pnpm --version确认命令可用
3. 查看bootstrap脚本日志，确认依赖安装过程使用pnpm且无报错

内容的提问来源于stack exchange，提问作者Taste of Leaving