在Docker容器部署含自定义依赖的Next.js项目遇模块找不到问题

我是Next.js和Docker新手，尝试用Docker部署项目时遇到问题：项目依赖根目录下源码文件夹外的自定义包，构建步骤报错无法解析这些包，错误信息如下：
ModuleNotFoundError: Module not found: Error: Can't resolve '@custompackage/themes/src/Simply/containers' in '/opt/app/src/pages'

导入代码示例 #

import Theme, { theme } from '@custompackage/themes/src/Simply';
import {
  Navbar,
  Copyright,
  Welcome,
  Services,
  About,
  Pricing,
  Clients,
  Contact,
} from '@custompackage/themes/src/Simply/containers';

import preview from '@custompackage/themes/src/Simply/assets/preview.jpg';

当前Dockerfile内容 #

# Install dependencies only when needed
FROM node:16-alpine AS deps

WORKDIR /opt/app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:16-alpine AS builder

ENV NODE_ENV=production
WORKDIR /opt/app
COPY . .
COPY --from=deps /opt/app/node_modules ./node_modules
RUN yarn build

# Production image, copy all the files and run next
FROM node:16-alpine AS runner

ARG X_TAG
WORKDIR /opt/app
ENV NODE_ENV=production
COPY --from=builder /opt/app/next.config.js ./
COPY --from=builder /opt/app/public ./public
COPY --from=builder /opt/app/.next ./.next
COPY --from=builder /opt/app/node_modules ./node_modules
CMD ["node_modules/.bin/next", "start"]

文件夹结构 #

我曾尝试在Dockerfile的构建步骤前使用COPY命令将自定义包内容复制到/opt/app目录，但问题仍未解决。

解决方案 #

1. 调整Dockerfile与构建上下文，复制外部自定义包 #

Docker构建默认仅能访问指定上下文目录内的文件，需将外部的@custompackage目录复制到容器中，同时调整构建范围：

• 修改Dockerfile的builder阶段：

  FROM node:16-alpine AS builder
  
  ENV NODE_ENV=production
  WORKDIR /opt/app
  # 复制外部自定义包到容器对应位置
  COPY ../@custompackage ./@custompackage
  # 复制当前项目文件
  COPY . .
  COPY --from=deps /opt/app/node_modules ./node_modules
  RUN yarn build
  

• 若使用docker-compose，需将构建上下文设置为上级目录（确保能访问外部包）：

  services:
    app:
      build:
        context: ../
        dockerfile: ./frontend/Dockerfile
  

2. 配置Next.js路径别名，解析@custompackage #

在next.config.js中添加webpack别名配置，告诉Next.js如何定位外部包：

/** @type {import('next').NextConfig} */
const path = require('path');

const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.alias['@custompackage'] = path.resolve(__dirname, '../@custompackage');
    return config;
  },
};

module.exports = nextConfig;

如果使用TypeScript，需在tsconfig.json补充路径映射：

{
  "compilerOptions": {
    "paths": {
      "@custompackage/*": ["../@custompackage/*"]
    }
  }
}

3. 确保本地包依赖正确安装 #

在项目的package.json中正确引用自定义本地包，确保依赖安装时能处理其内部依赖：

"dependencies": {
  "@custompackage/themes": "file:../@custompackage/themes"
}

完成以上修改后，重新构建Docker镜像即可解决模块找不到的问题。

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