Github Action构建Docker镜像失败：无法解析'./Nav/Navbar'模块

本地Windows 11环境下可正常构建NextJS应用及Docker容器，但通过Github Action部署至K8s集群时，始终构建失败，报错无法解析./Nav/Navbar模块。尝试修改Nav目录大小写匹配无效，所有NextJS文件均存在，担心调整本地代码会破坏现有正常运行的应用。

错误日志 #

#14 1.125 - info Creating an optimized production build...
#14 15.91 Failed to compile.
#14 15.91 
#14 15.91 ./app/layout.tsx
#14 15.91 Module not found: Can't resolve './Nav/Navbar'
#14 15.91 
#14 15.91 https://nextjs.org/docs/messages/module-not-found
#14 15.91 
#14 15.91 
#14 15.91 > Build failed because of webpack errors
#14 15.95 npm notice 
#14 15.95 npm notice New minor version of npm available! 10.2.4 -> 10.5.0
#14 15.95 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.5.0>
#14 15.95 npm notice Run `npm install -g npm@10.5.0` to update!
#14 15.95 npm notice 
#14 ERROR: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
------
 > [builder 5/5] RUN npm run build:
15.91 
15.91 https://nextjs.org/docs/messages/module-not-found
15.91 
15.91 
15.91 > Build failed because of webpack errors
15.95 npm notice 
15.95 npm notice New minor version of npm available! 10.2.4 -> 10.5.0
15.95 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.5.0>
15.95 npm notice Run `npm install -g npm@10.5.0` to update!
15.95 npm notice 
------
frontend/web-app/Dockerfile:15
--------------------
 13 |     ENV NEXT_TELEMETRY_DISABLED 1
 14 |     
 15 | >>> RUN npm run build
 16 |     
 17 |     # production image, copy all files and run next
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
Error: buildx failed with: ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

Dockerfile #

FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY frontend/web-app/package*.json ./
RUN  npm install --omit-dev

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY frontend/web-app ./

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

# production image, copy all files and run next
FROM node:18-alpine AS runner
WORKDIR /app

ENV NODE_ENV production

ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/next.config.js ./next.config.js

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

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

Github Action配置 #

name: deploy-webapp

on:
  workflow_dispatch:
  push:
    branches: [ "master" ]
    paths:
      - 'frontend/web-app/**'

env:
  REGISTRY_IMAGE: amg31/web-app
  DOCKERFILE: frontend/web-app/Dockerfile
  DEPLOYMENT_NAME: webapp

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: docker/setup-buildx-action@v2
      - name: Login to DockerHub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_PASSWORD }}
      - name: Build and push the Docker image
        uses: docker/build-push-action@v3
        with:
          context: "{{defaultContext}}"
          file: ${{ env.DOCKERFILE }}
          push: true
          tags: ${{ env.REGISTRY_IMAGE }}:latest
      - name: Install doctl
        uses: digitalocean/action-doctl@v2
        with:
          token: ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}
      - name: Save DigitalOcean kubeconfig
        run: doctl kubernetes cluster kubeconfig save auctionnext
      - name: Restart Kubernetes deployment
        run: kubectl rollout restart deployment ${{ env.DEPLOYMENT_NAME }}

Layout.tsx代码 #

import React from 'react'
import {getCurrentUser} from './actions/authActions'
import './globals.css'
import Navbar from './Nav/Navbar'
import SignalRProvider from './providers/SignalRProvider'
import ToasterProvider from './providers/ToasterProvider'

export const metadata = {
    title: 'AuctionNext',
    description: 'Generated by create next app',
}

export default async function RootLayout({
                                             children,
                                         }: {
    children: React.ReactNode
}) {
    const user = await getCurrentUser();
    return (
        <html lang="en">
        <body>
        <ToasterProvider/>
        <Navbar/>
        <main className='container mx-auto px-5 pt-10'>
            <SignalRProvider user={user}>
                {children}
            </SignalRProvider>

        </main>

        </body>
        </html>
    )
}

解决方案 #

1. 修复Git大小写敏感性问题 #

Windows文件系统不区分大小写，而Linux（Github Action和Docker环境）严格区分。即使本地修改了目录/文件名大小写，Git默认可能不会记录该变更。执行以下命令强制Git识别大小写：

git config core.ignorecase false

之后将目录/文件名调整为与Layout.tsx中导入路径完全一致（比如确保目录是Nav而非nav，文件是Navbar.tsx而非navbar.tsx），重新提交并推送代码。

2. 验证Github Runner上的文件结构 #

在Github Action的build任务中添加步骤，查看克隆后的目录结构，确认文件路径大小写匹配：

- name: Verify directory structure
  run: ls -la frontend/web-app/

若发现实际目录名与导入路径不符，需修正本地目录名并重新提交。

3. 临时兼容：修改Next.js Webpack配置 #

若暂时不想调整目录结构，可在next.config.js中添加配置让Webpack忽略大小写：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.ignoreCase = true;
    return config;
  },
};

module.exports = nextConfig;

注意：此为临时方案，长期建议统一目录/文件名大小写，避免后续出现其他兼容性问题。

4. 检查Docker构建时的文件复制 #

在Dockerfile的builder阶段，添加命令查看容器内的文件结构，确认Nav目录被正确复制：

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY frontend/web-app ./
# 添加这行查看目录
RUN ls -la ./
ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

若容器内不存在Nav目录，需检查本地目录结构是否正确，或者调整Dockerfile的COPY路径。

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