在 docker 上构建 nextjs 应用程序时出错,但在本地构建时出错

问题描述 投票:0回答:1

尝试在 docker 上构建 nextjs 应用程序时,我不断收到依赖冲突错误。当我在本地工作时,我没有收到任何错误,而且我似乎无法弄清楚可能导致此问题的差异是什么......

# Use the official Node.js slim image as a base
FROM node:20.18.0-slim

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json (if available)
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Next.js app
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the Next.js app
CMD ["npm", "start"]

虽然我收到的错误是依赖项冲突错误消息,但我主要关注的是为什么我的本地环境构建良好,但我在尝试在 docker 上构建时遇到错误。任何调试提示也将不胜感激。

更新

显示package.json

{
  "name": "project",
  "version": "1.2.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "lint": "eslint --fix \"src/**/*.{js,jsx}\"",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "build:icons": "node src/iconify-bundle/bundle-icons-react.js"
  },
  "dependencies": {
    "@babel/core": "7.21.5",
    "@babel/eslint-parser": "7.21.3",
    "@casl/ability": "6.5.0",
    "@casl/react": "3.1.0",
    "@emotion/cache": "11.10.8",
    "@emotion/react": "^11.13.3",
    "@emotion/server": "11.10.0",
    "@emotion/styled": "^11.13.0",
    "@fullcalendar/bootstrap5": "6.1.6",
    "@fullcalendar/common": "5.11.4",
    "@fullcalendar/core": "6.1.6",
    "@fullcalendar/daygrid": "6.1.6",
    "@fullcalendar/interaction": "6.1.6",
    "@fullcalendar/list": "6.1.6",
    "@fullcalendar/react": "6.1.6",
    "@fullcalendar/timegrid": "6.1.6",
    "@hookform/resolvers": "3.1.0",
    "@iconify/react": "4.1.0",
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@mui/icons-material": "^6.0.2",
    "@mui/lab": "5.0.0-alpha.128",
    "@mui/material": "^5.16.7",
    "@mui/styled-engine-sc": "^6.0.0-alpha.10",
    "@mui/system": "5.12.1",
    "@mui/x-data-grid": "^6.0.3",
    "@mui/x-date-pickers": "^6.18.6",
    "@popperjs/core": "2.11.7",
    "@reduxjs/toolkit": "1.9.5",
    "antd": "^5.10.1",
    "apexcharts-clevision": "3.28.5",
    "axios": "1.4.0",
    "axios-mock-adapter": "1.21.4",
    "babel-eslint": "10.1.0",
    "bootstrap-icons": "1.10.5",
    "chart.js": "4.3.0",
    "cleave.js": "1.6.0",
    "clipboard": "^2.0.11",
    "clipboard-copy": "4.0.1",
    "clsx": "1.2.1",
    "crypto-js": "^4.1.1",
    "csv-loader": "^3.0.5",
    "date-fns": "2.30.0",
    "dayjs": "^1.11.10",
    "dompurify": "^3.0.6",
    "draft-js": "0.11.7",
    "i18next": "22.4.15",
    "i18next-browser-languagedetector": "7.0.1",
    "i18next-http-backend": "2.2.0",
    "install": "^0.13.0",
    "js-cookies": "^1.0.4",
    "jsonwebtoken": "8.5.1",
    "jszip": "^3.10.1",
    "keen-slider": "6.8.5",
    "material-ui-dropzone": "^3.5.0",
    "mui-file-input": "^4.0.3",
    "next": "^14.0.3",
    "nprogress": "0.2.0",
    "payment": "2.4.6",
    "prismjs": "1.29.0",
    "react": "^18.2.0",
    "react-apexcharts": "1.4.0",
    "react-chartjs-2": "5.2.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-credit-cards": "0.8.3",
    "react-csv": "^2.2.2",
    "react-datepicker": "4.11.0",
    "react-dom": "^18.2.0",
    "react-draft-wysiwyg": "1.15.0",
    "react-dropzone": "14.2.3",
    "react-excel-renderer": "^1.1.0",
    "react-hook-form": "7.43.9",
    "react-hot-toast": "2.4.1",
    "react-i18next": "12.2.2",
    "react-loading-skeleton": "^3.3.1",
    "react-perfect-scrollbar": "1.5.8",
    "react-popper": "2.3.0",
    "react-redux": "8.0.5",
    "react-toastify": "^9.1.3",
    "recharts": "2.5.0",
    "sonner": "^1.0.3",
    "styled-components": "^6.1.6",
    "stylis": "4.1.4",
    "stylis-plugin-rtl": "2.1.1",
    "xlsx": "^0.18.5",
    "yup": "1.1.1"
  },
  "devDependencies": {
    "@iconify/iconify": "3.1.0",
    "@iconify/json": "2.2.58",
    "@iconify/tools": "2.2.6",
    "@iconify/types": "2.0.0",
    "@iconify/utils": "2.1.5",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "eslint": "^8.38.0",
    "eslint-config-next": "^13.3.0",
    "eslint-config-prettier": "8.7.0",
    "eslint-import-resolver-alias": "1.1.2",
    "eslint-import-resolver-typescript": "3.5.3",
    "eslint-plugin-import": "2.27.5",
    "file-loader": "^6.2.0",
    "prettier": "2.8.4"
  },
  "resolutions": {
    "minipass": "5.0.0",
    "@mui/x-data-grid/@mui/system": "5.12.1",
    "react-credit-cards/prop-types": "15.7.2",
    "@types/react": "17.0.83"
  },
  "overrides": {
    "react-credit-cards": {
      "react": "$react"
    },
    "@material-ui/core": {
      "@types/react": "17.0.83"
    },
    "@mui/base": {
      "@types/react": "18.2.0"
    },
    "@mui/lab": {
      "@types/react": "18.2.0"
    }
  }
}
node.js docker next.js dockerfile
1个回答
0
投票

看到错误消息会有帮助,但是,据我所知,您必须执行以下操作:

1.) 修复 Dockerfile

# Use the official Node.js slim image as a base
FROM node:20.18.0-slim

# Set the working directory
WORKDIR /app

# Copy the rest of the application code - a single copy should be enough
# unfortunately, when using multiple COPY commands the next command #overrides or what was copied prior. If you want to copy all contents a #single copy should be enough, if you want to transfer specify files then #ADD would be better
COPY . . # single copy will grab everything in the current directory

# Install dependencies
RUN npm install


# Build the Next.js app
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the Next.js app
CMD ["npm", "start"]

2.) 您需要定义一个

.dockerignore
文件,在这种情况下,您可以在构建容器时设置上下文。空文件会将上下文设置为当前项目目录。这与单个复制命令相结合应该可以解决传输项目文件和目录的问题

© www.soinside.com 2019 - 2024. All rights reserved.