webpack / webpack-dev-server

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
MIT License
7.78k stars 1.43k forks source link

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

Closed ghost closed 4 years ago

ghost commented 4 years ago

Hello there,

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

Code

docker-compose.yml

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

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"
     ]
   }
 }
// webpack.config.js
// additional code, remove if not needed.

Expected Behavior

Actual Behavior

 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

For Bugs; How can we reproduce the behavior?

How can I fix this problem

alexander-akait commented 4 years ago

There are no errors, you should use the contentBase option to setup it, but you use react-scripts boilerplate, so please open an issue in the react-scripts repo