如何在Docker容器中运行我的react应用程序

Question

我有这个反应应用程序我想篡改。但问题是，即使我试过，它也不起作用。，但它在本地运行得很好，

以下是当前目录的样子：

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"]

我使用一个docker-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"
  }
}

有人能帮帮我吗？

Answer 1

首先，确保您正在复制用于在本地安装dep的同一个包-lock.json文件，以确保您的容器中有与本地相同的依赖树。

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

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

FROM node:12

每个节点版本都与特定的npm版本捆绑在一起(最新的12个版本附带了npm6.14.6)，您可以找到绑定的npm版本，如https://github.com/nodejs/node/tree/master/doc/changelogs

此外，与其运行npm install，不如在容器中运行npm ci。后者不检查锁文件和package.json文件之间的差异，只安装锁定的依赖树，这样不仅速度更快，而且还将与本地dep树完全匹配。

编辑：

此外，这一行：

COPY . /app

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

最简单的方法可能是将一个.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"]

Answer 2

所以在这里

# Install dependencies
COPY package.json /app

RUN npm install

在这些步骤的末尾，您将在容器构建环境中拥有一个新的package-lock.json文件和node_modules文件夹。

但随后发布的Dockerfile有：

# Add rest of the client code
COPY . /app

很有可能-哇！-他们走了。中的旧package-lock.json文件或node_modules目录。构建机器上的文件夹将覆盖容器中的./app文件夹--包括刚刚在容器中创建的那些新文件。或者，在node_modules目录中，可能会出现两者之间的某种不和谐的混合。

我采取了另一种方法。我让所有的东西都能按我的意愿工作，并使用这个Dockerfile，它与源代码一起存在于目录中：

FROM node:alpine  # as of 2020-09 this runs node 14; also uses sh not bash
COPY . /app
WORKDIR /app
USER node
EXPOSE 8888   # change this to the port(s) where your app listens
CMD [ "node", "./index.js" ]

这是从一个依赖Google构建的生产系统中复制出来的，该系统构建了在GCP上启动的容器。因此，执行系统上的环境将是Linux，就像在我的开发人员系统上一样。如果您要跨平台开发，这显然是行不通的。