web-dev-qa-db-fra.com

le contenu ne provenant pas du webpack est servi depuis / app / public docker

J'espère que j'ai épelé correctement.

J'ai développé une application frontend avec reactjs. Je distribue l'application que j'ai développée avec docker-compose. Mais lors de la distribution, je rencontre une erreur comme ci-dessous. Pouvez-vous aider à résoudre ce problème?

Erreur https://ibb.co/YtYywBr

Système d'exploitation: Ubuntu 18 lts Node Version: v12.16.3 NPM Version: 6.14.4 Webpack Version: - webpack-dev-server Version: - Navigateur: Chrome, opéra

Une erreur causée par webpack. Comment puis-je me débarrasser de cette erreur?

C'est un bug

Code

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

Comportement réel

  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

Pour les bogues; Comment reproduire le comportement? Comment puis-je résoudre ce problème

reactjsdockerwebpackdocker-composewebpack-dev-server
2
Fatih mzm

C'est un problème avec [email protected]. Vous pouvez suivre le problème et voir les solutions de contournement recommandées via github: https://github.com/facebook/create-react-app/issues/8688

Essayez de rétrograder la version de react-scripts à 3.4.0, ou ajoutez la ligne suivante dans votre fichier docker-compose:

stdin_open: true

Réglage stdin_open à true dans le docker exécutera le conteneur en "mode interactif", ce qui est nécessaire pour exécuter l'application react en mode développement.

Cependant, en production, vous souhaitez servir votre application intégrée à l'aide d'un serveur HTTP comme Apache ou Serve. Vous pouvez en savoir plus sur le déploiement d'une application react via la documentation officielle: React Deployment

La solution stdin_open a été suggérée par le commentaire suivant: https://github.com/facebook/create-react-app/issues/8688#issuecomment-602110747

4
Atef