Docker化NextJS 13应用时路径别名解析失败求助

问题概况 #

使用npx create-next-app@latest创建的全新NextJS应用，本地执行npm run build完全正常，但通过Docker构建镜像时，出现模块解析错误，提示无法找到@src开头的样式文件。

错误输出 #

#14 3.497 info  - Creating an optimized production build...
#14 5.828 Failed to compile.
#14 5.828
#14 5.828 ./pages/_app.tsx
#14 5.828 Module not found: Can't resolve '@src/styles/globals.css'
#14 5.828
#14 5.828 https://nextjs.org/docs/messages/module-not-found
#14 5.828
#14 5.828 ./pages/index.tsx
#14 5.828 Module not found: Can't resolve '@src/styles/Home.module.css'
#14 5.828
#14 5.828 https://nextjs.org/docs/messages/module-not-found
#14 5.828
#14 5.829
#14 5.830 > Build failed because of webpack errors

原Dockerfile内容 #

# Use an official Node.js runtime as a parent image
FROM node:18-alpine

# Set the working directory to /app
WORKDIR /app

# Copy package.json to the container
COPY package.json .
COPY tsconfig.json .
COPY next.config.js .
COPY next-env.d.ts .
COPY src .

# Install dependencies
RUN npm install

# Build the Next.js app
RUN npm run build

# Set the environment variable for running the app
ENV NODE_ENV=production

# Expose port 3000 for the app to listen on
EXPOSE 3000

# Start the app
CMD ["npm", "run", "start"]

已尝试的无效操作 #

• 更换基础镜像为node（非node:18-alpine）
• 在tsconfig.json中添加"baseUrl": "."

问题根源 #

1. src目录复制错误：COPY src .会把src目录下的所有文件直接平铺到/app目录，而非创建/app/src子目录，导致webpack无法通过@src别名定位文件。
2. 遗漏pages目录复制：原Dockerfile未复制根目录下的pages文件夹，这是NextJS应用的核心页面目录，缺失会导致构建时找不到入口文件。

修正后的Dockerfile #

# 使用官方Node.js运行时作为基础镜像
FROM node:18-alpine

# 设置工作目录为/app
WORKDIR /app

# 复制所有必要的项目文件
COPY package.json .
COPY tsconfig.json .
COPY next.config.js .
COPY next-env.d.ts .
# 正确将src目录完整复制到容器的/app/src下
COPY src ./src
# 复制pages目录到容器
COPY pages ./pages

# 安装依赖
RUN npm install

# 构建NextJS应用
RUN npm run build

# 设置生产环境变量
ENV NODE_ENV=production

# 暴露应用监听的3000端口
EXPOSE 3000

# 启动应用
CMD ["npm", "run", "start"]

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