不是来自 webpack 的内容由 /app/public docker 提供

Question

希望我拼写正确。

我用 reactjs 开发了一个前端应用程序。我分发我用 docker-compose 开发的应用程序。但是在分发时，我遇到了如下错误。你能帮忙解决这个问题吗？

错误 https://ibb.co/YtYywBr

操作系统：Ubuntu 18 lts 节点版本：v12.16.3 NPM 版本：6.14.4 网络包版本：- webpack-dev-server 版本：- 浏览器：Chrome、歌剧

webpack导致的错误。我怎样才能摆脱这个错误？

这是一个错误

代码

docker-compose.yml

 version: "3.7"
 services:
   nginx-prod:
     container_name: nginx-prod
     build:
       context: .
       dockerfile: Dockerfile.nginx
     ports:
       - "80:80"
       - "443:443"
     networks:
      - nginx_network
     volumes:
       - ./certificates:/usr/share/nginx/certificates
       - ./nginx/nginx.conf:/etc/nginx/conf.d/nginx.conf

  web:
    build:
      context: .
      dockerfile: Dockerfile.react
    container_name: web
    expose:
      - 3000
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app

Dockerfile.nginx

 FROM nginx:alpine
 RUN apk add inotify-tools certbot openssl ca-certificates
 WORKDIR /opt
 COPY entrypoint.sh nginx-letsencrypt
 COPY certbot.sh certbot.sh
 COPY ssl-options/ /etc/ssl-options
 COPY nginx/nginx.conf /etc/nginx/conf.d
 RUN chmod +x nginx-letsencrypt && \
     chmod +x certbot.sh
 EXPOSE 443
 ENTRYPOINT ["./nginx-letsencrypt"]
 CMD ["nginx", "-g", "daemon off;"]

Dockerfile.react

FROM node:alpine as build
WORKDIR /app
COPY . /app
ENV PATH /app/node_modules/.bin:$PATH

RUN yarn --network-timeout=30000
RUN yarn build

EXPOSE 3000

CMD ["npm", "run", "start"]

package.json

{
 "name": "react-docker-project",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "react": "^16.13.1",
 "react-dom": "^16.13.1",
 "@coreui/coreui": "^2.1.16",
 "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
 "@coreui/icons": "0.3.0",
 "@coreui/react": "^2.5.7",
 "@date-io/date-fns": "^2.6.1",
 "@devexpress/dx-react-chart": "^2.6.2",
 "@devexpress/dx-react-chart-material-ui": "^2.6.2",
 "@devexpress/dx-react-core": "^2.6.2",
 "@devexpress/dx-react-grid": "^2.6.0",
 "@devexpress/dx-react-grid-material-ui": "^2.6.0",
 "@devexpress/dx-react-scheduler": "^2.6.0",
 "@devexpress/dx-react-scheduler-material-ui": "^2.6.0",
 "@material-ui/core": "^4.9.8",
 "@material-ui/icons": "^4.9.1",
 "bootstrap": "^4.4.1",
 "chart.js": "^2.9.2",
 "classnames": "^2.2.6",
 "core-js": "^3.6.4",
 "cors": "^2.8.5",
 "corsproxy": "^1.5.0",
 "date-fns": "^2.12.0",
 "dotenv": "^8.2.0",
 "enzyme": "^3.11.0",
 "enzyme-adapter-react-16": "^1.15.2",
 "flag-icon-css": "^3.4.6",
 "font-awesome": "^4.7.0",
 "http-proxy-middleware": "^0.20.0",
 "jquery": "^3.4.1",
 "jwt-decode": "^2.2.0",
 "moment": "^2.24.0",
 "node-sass": "^4.13.1",
 "nodemon": "^2.0.2",
 "prettier": "^1.18.2",
 "prop-types": "^15.7.2",
 "react-alert": "^6.0.1",
 "react-alert-template-basic": "^1.0.0",
 "react-app-polyfill": "^1.0.6",
 "react-chartjs-2": "^2.9.0",
 "react-notifications-component": "^2.4.0",
 "react-redux": "^7.2.0",
 "react-router-config": "^5.1.1",
 "react-router-dom": "^5.1.2",
 "react-test-renderer": "^16.13.1",
  "reactstrap": "^8.4.1",
  "redux": "^4.0.5",
 "redux-devtools-extension": "^2.13.8",
 "redux-persist": "^6.0.0",
 "redux-thunk": "^2.3.0",
 "simple-line-icons": "^2.4.1",
  "typescript": "^3.8.3"
},
 "devDependencies": {
"react-scripts": "^3.4.1"
},
"scripts": {
  "start": "react-scripts start",
   "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
"eslintConfig": {
 "extends": "react-app"
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
    ]
   }
 }

实际行为

  web    | 
  web    | > react-docker-project@0.1.0 start /app
  web    | > react-scripts start
  web    | 
  web    | ℹ ｢wds｣: Project is running at http://172.21.0.2/
  web    | ℹ ｢wds｣: webpack output is served from 
  web    | ℹ ｢wds｣: Content not from webpack is served from /app/public
  web    | ℹ ｢wds｣: 404s will fallback to /
  web    | Starting the development server...
  web    | 
  web exited with code 0

对于错误；我们如何重现该行为？我该如何解决这个问题

Answer 1

这是 react-scripts@3.4.1 的问题。您可以关注问题并通过 github 查看推荐的解决方法：https://github.com/facebook/create-react-app/issues/8688

要么尝试将 react-scripts 的版本降级到 3.4.0，要么在您的 docker-compose 文件中添加以下行：

stdin_open: true

在 docker 中将 stdin_open 设置为 true 将运行在 "interactive mode" 中的容器，这是运行开发模式下的 React 应用程序所必需的。

但是在生产环境中，您希望使用 Apache 或 Serve 等 HTTP 服务器为构建的应用程序提供服务。您可以通过官方文档了解更多关于部署 React 应用程序的信息：React Deployment

The stdin_open solution was suggested by the following comment: https://github.com/facebook/create-react-app/issues/8688#issuecomment-602110747

Answer 2

将以下行添加到 docker-compose.yml 对我有用。

tty: true

不是来自 webpack 的内容由 /app/public docker 提供

content not from webpack is served from /app/public docker

docker

reactjs

webpack

docker-compose

webpack-dev-server