node.js - 如何在 Docker 容器中运行我的反应应用程序

Question

我有这个我想 dockerize 的反应应用程序。但问题是，即使我尝试过，它也不起作用。但它在本地工作得很好

这是当前目录的样子：

docker-compose.yaml
frontend_v2
   - node_modules
   - public
   - src
       - <react jsx files>
   - Dockerfile
   - package.json
   - package-lock.json

所以这是上面的内容Dockerfile：

# Use an official node runtime as a parent image
FROM node:latest

WORKDIR /app

# Install dependencies
COPY package.json /app

RUN npm install

# Add rest of the client code
COPY . /app

EXPOSE 3000

CMD ["npm", "start"]

我正在使用 adocker-compose.yml来启动容器，这就是它的样子：它位于根目录中。

version: "3.2"

services:

  frontend:
    build: ./frontend_v2
    environment:
      CHOKIDAR_USEPOLLING: "true"
    volumes:
      # - /app/node_modules
      - ./frontend_v2/src:/app/src
    ports:
      - 80:3000

我面临的问题是，即使容器正在运行，我也会收到以下错误（我没有在本地运行）

当我尝试

docker logs <exited-container-id>我得到这个低于输出

> cyberhr-rv18.0.4@0.1.0 start /app
> react-scripts start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack-dev-server": "3.11.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:

  /app/node_modules/webpack-dev-server (version: 3.10.3) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack-dev-server" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /app/node_modules/webpack-dev-server is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack-dev-server in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack-dev-server.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cyberhr-rv18.0.4@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cyberhr-rv18.0.4@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-09-18T08_32_25_268Z-debug.log

[更新]

这是我的package.json文件：

{
  "name": "cyberhr-rv18.0.4",
  "version": "0.1.0",
  "private": true,
  "homepage": "",
  "dependencies": {
    "3d-force-graph": "^1.60.11",
    "@blueprintjs/core": "^3.26.1",
    "@coreui/coreui": "^2.1.12",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
    "@coreui/icons": "0.3.0",
    "@coreui/react": "^2.5.1",
    "@emotion/core": "^10.0.35",
    "@material-ui/core": "^4.11.0",
    "@tensorflow/tfjs": "^1.7.2",
    "@tensorflow/tfjs-tsne": "^0.2.0",
    "axios": "^0.19.2",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.8.0",
    "classnames": "^2.2.6",
    "core-js": "^3.1.4",
    "d3-dsv": "^1.2.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "evergreen-ui": "^4.27.4",
    "flag-icon-css": "^3.3.0",
    "font-awesome": "^4.7.0",
    "google-maps-react": "^2.0.2",
    "jquery": "^3.4.0",
    "material-dashboard-react": "^1.8.0",
    "mdbreact": "4.25.3",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.4",
    "react-animations": "^1.0.0",
    "react-app-polyfill": "^1.0.1",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-chartjs-2": "^2.7.6",
    "react-chat-popup": "^1.1.2",
    "react-dom": "^16.8.4",
    "react-dropzone": "^11.0.1",
    "react-force-graph": "^1.32.1",
    "react-full-screen": "^0.2.4",
    "react-loadable": "^5.5.0",
    "react-nvd3": "^0.5.7",
    "react-perfect-scrollbar": "^1.4.4",
    "react-pure-grid": "^2.1.1",
    "react-redux": "^6.0.1",
    "react-reveal": "^1.2.2",
    "react-router-config": "^5.0.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.4.3",
    "react-spinners": "^0.9.0",
    "react-step-wizard": "^5.3.2",
    "react-table": "^7.2.1",
    "react-test-renderer": "^16.8.6",
    "react-toastify": "^6.0.8",
    "react-window-size": "^1.2.2",
    "reactstrap": "^8.0.0",
    "redux": "^4.0.1",
    "simple-line-icons": "^2.4.1",
    "tabler-react": "^2.0.0-alpha.1",
    "three": "latest",
    "tsne-js": "^1.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "react-to-print": "^2.1.1"
  }
}

有人可以帮帮我吗？

标签： node.jsreactjsdockerwebpack

Answer 1

首先，确保您正在复制用于在本地安装 deps 的相同 package-lock.json 文件，以确保您的容器中具有与本地相同的依赖关系树。

COPY package.json package-lock.json /app/

然后，确保您与本地运行的节点/npm 版本匹配（将 12 替换为您正在运行的主要版本，无论是 10、12、14 还是其他版本）：

FROM node:12

每个节点版本都与特定的 npm 版本捆绑在一起（最新的 12 版本附带 npm 6.14.6），您可以在更改日志中找到捆绑的 NPM 版本，https://github.com/nodejs/node/tree/master/doc /更改日志

此外，npm install您可能想npm ci在容器中运行，而不是运行。后者跳过对锁定文件和 package.json 文件之间差异的任何检查，只安装锁定的依赖关系树，这不仅更快，而且会完全匹配你的本地 dep 树。

编辑：

此外，这一行：

COPY . /app

除非您通过 .dockerignore 或类似方法忽略它，否则也会覆盖 node_modules。

最简单的可能是将.dockerignore文件添加到与 Dockerfile 相同的文件夹并添加说明：

.git
node_modules

完整的 Dockerfile 如下所示：

# Use whatever version you are running locally (see node -v)
FROM node:12

WORKDIR /app

# Install dependencies (you are already in /app)
COPY package.json package-lock.json ./
RUN npm ci

# Add rest of the client code
# .dockerignore needs to skip node_modules
COPY . /app

EXPOSE 3000

CMD ["npm", "start"]