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

Question

I hope I've spelled correctly.

I developed a frontend application with reactjs. I distribute the application I developed with docker-compose. But while distributing, I encounter an error like below. Can you help to solve this?

Error https://ibb.co/YtYywBr

Operating System: Ubuntu 18 lts Node Version: v12.16.3 NPM Version: 6.14.4 webpack Version: - webpack-dev-server Version: - Browser: Chrome, opera

An error caused by webpack. How can I get rid of this error?

This is a 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"
    ]
   }
 }

Actual Behavior

  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

For Bugs; How can we reproduce the behavior? How can I fix this problem

Answer 1

This is an issue with [email protected]. You can follow the issue and see the recommended workarounds via github: https://github.com/facebook/create-react-app/issues/8688

Either try downgrading the version of react-scripts to 3.4.0, or add the following line in your docker-compose file:

stdin_open: true

Setting stdin_open to true in docker will run the container in "interactive mode" which is required to run the react app in development mode.

However in production, you would like to serve your built application using a HTTP server like Apache or Serve. You can see more about deploying a react app via the official documentation: 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

Adding the following line to the docker-compose.yml worked for me.

tty: true