GitHub Actions中Dockerfile构建报错：模块未找到错误

问题背景 #

在GitHub Actions工作流中构建Docker镜像并部署到Cloud Run时，执行yarn build步骤失败，提示无法解析@/utils/actions/api/my-axios模块。

错误详情 #

Module not found: Error: Can't resolve '@/utils/actions/api/my-axios' in '/app/src/store'

完整构建报错日志：

------
 > [build 7/7] RUN yarn build:
0.555 yarn run v1.22.19
0.588 $ craco build
2.395 Creating an optimized production build...
9.306 Failed to compile.
9.306 
9.307 Module not found: Error: Can't resolve '@/utils/actions/api/my-axios' in '/app/src/store'
9.307 
9.307 
9.343 error Command failed with exit code 1.
9.343 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
Dockerfile:23
--------------------
  21 |     
  22 |     # Compile TypeScript to JavaScript
  23 | >>> RUN yarn build
  24 |     
  25 |     
--------------------
ERROR: failed to solve: process "/bin/sh -c yarn build" did not complete successfully: exit code: 1
Error: Process completed with exit code 1.

相关文件与目录信息 #

Dockerfile #

# Use the official Node.js runtime as the base image
FROM node:19.9.0-alpine as build

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json (or yarn.lock) to the container
COPY package.json yarn.lock ./

# Copy the rest of the application code to the container
COPY . .

# Debugging: list contents of the directory
RUN ls -l /app && tree -L 3 /app

# Install project dependencies
RUN yarn install

# Compile TypeScript to JavaScript
RUN yarn build

# Use Nginx as the production server
FROM nginx:alpine

# Copy the built React app to Nginx's web server directory
COPY nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/build /usr/share/nginx/html

GitHub Actions工作流 #

name: Google Cloud Deployment - Build And Deploy Server

on:
  workflow_dispatch:

env:
  PROJECT_ID: ${{ secrets.GCR_PROJECT_ID }}
  IMAGE_NAME: dashboard-dev
  SERVICE: -ashboard-dev
  REGION: europe-west1

jobs:
  build-push-gcr:
    name: Build and Push to GCP
    runs-on: ubuntu-latest
    steps:
      # ... (omitted for brevity)

      - name: Build Docker Image
        run: docker build -t ${{ env.IMAGE_NAME }}:lastest .

      # ... (omitted for brevity)

项目目录结构 #

/app
├── Dockerfile
├── README.md
├── babel.config.js
├── craco.config.js
├── jest.config.js
├── nginx
│   └── nginx.conf
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── store
│   │   └── store.ts
│   ├── styles
│   │   ├── index.ts
│   │   └── modal.styles.ts
│   └── utils
│       └── actions
│           └── Api
│               └── my-axios.ts
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

craco.config.js配置 #

require("dotenv").config();
const path = require("path");
const webpack = require("webpack");

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          asset: require.resolve("assert"),
        },
      },
    },
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"],
        process: "process/browser",
      }),
    ],
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
};

解决方案 #

问题核心是路径大小写不匹配：

• 代码中导入路径使用的是小写api：@/utils/actions/api/my-axios
• 实际目录名称是大写Api：utils/actions/Api

Docker容器使用的Alpine Linux是大小写敏感系统，因此无法识别不匹配的路径。

修复步骤 #

1. 统一路径大小写：

   • 方案一：将目录Api重命名为api
   • 方案二：将代码中的导入路径修改为@/utils/actions/Api/my-axios

2. 验证TypeScript配置（可选）：
   确保tsconfig.json中配置了与craco别名匹配的路径规则，避免编译期报错：

   {
     "compilerOptions": {
       "baseUrl": "./src",
       "paths": {
         "@/*": ["*"]
       }
     }
   }
   

3. 重新触发构建：修改完成后，重新执行Docker构建或GitHub Actions工作流即可。

内容的提问来源于stack exchange，提问作者Roni Jack Vituli