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

Question

我希望我拼写正确。

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

错误https://ibb.co/YtYywBr

操作系统：Ubuntu 18 lts节点版本：v12.16.3NPM版本：6.14.4webpack版本：-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    | > [email protected] 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

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

[尝试将react-scripts的版本降级为3.4.0，或在docker-compose文件中添加以下行：

stdin_open: true

在docker中将stdin_open设置为true将在“交互模式”下运行容器，而在开发模式下运行react应用程序则需要该容器。

然而，在生产中，您希望使用HTTP服务器（例如Apache或Serve）来服务已构建的应用程序。您可以通过官方文档了解有关部署React应用的更多信息：React Deployment

stdin_open解决方案由以下注释建议：https://github.com/facebook/create-react-app/issues/8688#issuecomment-602110747