Question

我有一个使用create-react-app创建的简单React应用，可以在localhost上正常运行。我现在正在尝试对应用进行Dockerify。这是我的package.json：

{
  "name": "yeet",
  "version": "0.1.0",
  "engines": {
    "node": "12.x"
  },
  "scripts": {
    "client": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "node server.js",
    "production": "npm run build && npm run start"
  },
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "mongoose": "^5.10.13",
    "mysql": "^2.18.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "devDependencies": {
    "babel-core": "*",
    "babel-loader": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "babel-preset-stage-0": "*"
  },
  "babel": {
    "presets": [
      "@babel/env",
      "@babel/react",
      "babel-preset-stage-0"
    ],
    "env": {
      "start": {
        "presets": [
          "@babel/env",
          "@babel/react",
          "babel-preset-stage-0"
        ]
      }
    }
  }
}

这是我的Dockerfile：

# Specify base image
FROM node:12.19.0-alpine3.10

# Specify app location in host
WORKDIR /app

# Copy the dependency list
COPY package.json ./

# Install app dependencies
RUN npm install

# Copy app code to host
COPY . .

# Open specified port
EXPOSE 3000:3000

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

我使用以下图像构建图像：

docker build --tag yeet .

然后我将图像作为容器运行：

docker run --publish 3000:3000 yeet

抛出：

$ docker run-发布3000：3000

yeet@0.1.0生产/ app npm run build && npm run start

yeet@0.1.0构建/ app 反应脚本构建

/app/node_modules/eslint-webpack-plugin/dist/options.js:62（0， _schemaUtils.default）（_ options.default，options，{ ^

TypeError：（0，_schemaUtils.default）不是一个函数在getOptions（/app/node_modules/eslint-webpack-plugin/dist/options.js:62:28）在新的ESLintWebpackPlugin（/app/node_modules/eslint-webpack-plugin/dist/index.js:30:44）在module.exports（/app/node_modules/react-scripts/config/webpack.config.js:749:7）在对象。（/app/node_modules/react-scripts/scripts/build.js:67:16）在Module._compile（内部/模块/cjs/loader.js:1015:30）在Object.Module._extensions..js（内部/模块/cjs/loader.js:1035:10）在Module.load（internal / modules / cjs / loader.js：879：32）在Function.Module._load（内部/模块/cjs/loader.js:724:14）在Function.executeUserEntryPoint [作为runMain]（内部/模块/run_main.js:60:12）在internal / main / run_main_module.js：17：47 npm ERR！代码ELIFECYCLE npm ERR！ errno 1 npm错误！ yeet@0.1.0构建：react-scripts build npm ERR！退出状态1 npm ERR！ npm ERR！在yeet@0.1.0处失败构建脚本。 npm ERR！ npm可能不是问题。那里可能是上面的其他日志输出。

npm ERR！此运行的完整日志可以在以下位置找到：npm ERR！
/root/.npm/_logs/2020-11-07T12_47_03_927Z-debug.log npm错误！码 ELIFECYCLE npm ERR！ errno 1 npm错误！ yeet@0.1.0 production：npm run build && npm run start npm ERR！退出状态1 npm ERR！ npm ERR！ yeet@0.1.0生产脚本失败。 npm ERR！这是 npm可能不是问题。可能还有其他日志记录上面的输出。

npm ERR！此运行的完整日志可以在以下位置找到：npm ERR！
/root/.npm/_logs/2020-11-07T12_47_03_923Z-debug.log

有人看到我在做什么错吗？任何指针都将非常有帮助！

Answer 1

我确实有同样的问题。我不确定删除或降级库是否在本地运行的其他解决方案。

要在这里解决，我跑了

docker container prune
docker image prune

在开始构建之前，请确保我的码头工人是干净的。

如果没有成功，您可以尝试删除yarn.lock或package-lock.json。

如果可以帮助别人，我的文件就是

.dockerignore

.git
.gitignore
node_modules
build

Dockerfile.dev

FROM node:alpine

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . .

CMD ["yarn", "start"]

docker-compose.dev.yml

version: "3.8"
services:
  print:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - ".:/app"
      - "/app/node_modules"

Dockerfile.prod

FROM node:alpine as build

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . /app

RUN yarn run build

FROM nginx:stable-alpine
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/build /usr/share/nginx/html

docker-compose.prod.yml

version: "3.8"
services:
  print:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.prod
    ports:
      - "80:80"

nginx.conf

server {  
  listen 80;
  server_name frontend;
  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri /index.html;
  }
}

要运行

docker-compose.exe -f .\docker-compose.yml up --build

Answer 2

为我解决的是

降级依赖项“样式组件”和
删除依赖项“ redux-devtools-extension”以及
删除Docker兑现文件$ docker builder prune -a

Answer 3

因此，有两种方法可以解决此问题：

从React 17和react-scripts 4.0降级

这是我做的，因为我不想从CRA中退出（出于明显的原因）。问题是由于我使用的样式库无法与CRA处理Eslint的更新方式很好地配合。

可能是其他问题，但似乎来自react-scripts 4.0

This is mentioned in the changelog for react-scripts 4.0

退出CRA

如@duhaime的评论中所述。您可以在仍然使用React 17和react-scripts 4.0的同时直接解决此问题，方法是弹出然后删除ESLintPlugin或更新加载程序以解决所使用的任何库的问题。

我个人建议使用前者，因为我相信问题会尽快解决。但是这两种选择都会带您到达那里。

Answer 4

我有类似的问题。

尝试在Dockerfile中用 yarn 替换 npm 命令-这解决了我的问题。

因此您的Dockerfile应该如下所示：

# Specify base image
FROM node:12.19.0-alpine3.10

# Specify app location in host
WORKDIR /app

# Copy the dependency list
COPY package.json ./

# Install app dependencies
RUN yarn install

# Copy app code to host
COPY . .

# Open specified port
EXPOSE 3000:3000

# Start the app
CMD ["yarn", "run", "start", "production"]

TypeError：（0，_schemaUtils.default）不是一个函数

4 个答案: