如何在不写入宿主机的情况下为Docker化Next.js项目添加.babelrc？

我在Docker Compose中运行Next.js项目，为实现热重载把整个项目目录挂载到容器里，这部分目前正常。但遇到个问题：Apple Silicon用户需要容器内有.babelrc文件，但宿主机项目根目录绝对不能存在该文件；其他用户完全不需要这个文件。

需求总结 #

• 项目保持热重载（保留./:/usr/src/app/的挂载配置）
• 通过环境变量向容器内的/usr/src/app/.babelrc写入内容
• 宿主机项目根目录不存在.babelrc文件

已尝试的方法 #

1. 将.babelrc放在宿主机ci-cd/.babelrc路径，通过卷挂载- ./ci-cd/.babelrc:/usr/src/app/.babelrc，结果宿主机项目根目录自动生成了.babelrc文件，不符合要求。
2. 在Dockerfile中添加COPY ./ci-cd/.babelrc /usr/src/app/.babelrc，但该文件被Docker Compose的volume挂载覆盖，容器内仍然没有这个文件。

现有配置文件 #

Dockerfile #

FROM node:14

WORKDIR /usr/src/app/
COPY package.json .
RUN npm install

docker-compose.yml #

version: "3.8"
services:
   # Database image
   psql:
    image: postgres:13
    restart: unless-stopped
    ports:
      - 5432:5432

  # image for next.js project
  webapp:
    build: .
    command: >
      bash -c  "npm run dev"
    ports:
      - 3002:3002
    expose:
      - 3002
    depends_on:
      - psql
    volumes:
      - ./:/usr/src/app/

解决方案 #

方法1：启动时通过环境变量动态生成文件 #

直接修改docker-compose.yml中webapp服务的command，在启动前判断环境变量并生成.babelrc：

webapp:
  build: .
  command: >
    bash -c "if [ -n \"$BABELRC_CONTENT\" ]; then echo \"$BABELRC_CONTENT\" > /usr/src/app/.babelrc; fi && npm run dev"
  ports:
    - 3002:3002
  expose:
    - 3002
  depends_on:
    - psql
  volumes:
    - ./:/usr/src/app/
  environment:
    # Apple Silicon用户可在.env文件中配置该变量，其他用户无需配置
    BABELRC_CONTENT: '{"presets": ["next/babel"]}' # 替换为实际需要的babel配置

Apple Silicon用户只需在项目根目录创建.env.local文件，写入对应的BABELRC_CONTENT即可，其他用户不需要这个文件。容器启动时会根据变量内容生成文件，完全不会影响宿主机。

方法2：结合临时文件系统（tmpfs）增强隔离 #

如果担心文件写入到挂载的宿主机目录（虽然方法1不会），可以用tmpfs挂载.babelrc路径，文件仅存在于容器内存中，容器销毁后自动消失：

webapp:
  build: .
  command: >
    bash -c "if [ -n \"$BABELRC_CONTENT\" ]; then echo \"$BABELRC_CONTENT\" > /usr/src/app/.babelrc; fi && npm run dev"
  ports:
    - 3002:3002
  expose:
    - 3002
  depends_on:
    - psql
  volumes:
    - ./:/usr/src/app/
    - type: tmpfs
      target: /usr/src/app/.babelrc
  environment:
    BABELRC_CONTENT: '{"presets": ["next/babel"]}'

方法3：用entrypoint脚本统一管理初始化逻辑 #

创建entrypoint.sh脚本，把文件生成逻辑独立出来：

#!/bin/bash
# 若存在BABELRC_CONTENT环境变量，生成.babelrc文件
if [ -n "$BABELRC_CONTENT" ]; then
  echo "$BABELRC_CONTENT" > /usr/src/app/.babelrc
fi
# 执行原命令
exec "$@"

修改Dockerfile，复制并设置脚本权限：

FROM node:14

WORKDIR /usr/src/app/
COPY package.json .
COPY entrypoint.sh .
RUN chmod +x entrypoint.sh
RUN npm install

ENTRYPOINT ["./entrypoint.sh"]

然后修改docker-compose.yml，command保留启动命令即可：

webapp:
  build: .
  command: npm run dev
  ports:
    - 3002:3002
  expose:
    - 3002
  depends_on:
    - psql
  volumes:
    - ./:/usr/src/app/
  environment:
    BABELRC_CONTENT: '{"presets": ["next/babel"]}'

这种方式更整洁，把初始化逻辑和启动命令分离，维护起来更方便。

内容的提问来源于stack exchange，提问作者Phil Brockman