0

我正在尝试在 docker 上运行 React Mongo Express 应用程序。docker-compose build似乎一切正常。运行后，docker-compose up我得到以下日志：

frontend_1  | > react-frontend@0.1.0 start /usr/src/app
frontend_1  | > webpack -d --watch
frontend_1  |
frontend_1  |
frontend_1  | Webpack is watching the files…
frontend_1  |
frontend_1  | Hash: 23626d3f56ec19db7872
frontend_1  | Version: webpack 3.10.0
frontend_1  | Time: 14872ms
frontend_1  |     Asset     Size  Chunks                    Chunk Names
frontend_1  | bundle.js  2.55 MB       0  [emitted]  [big]  main
frontend_1  |  [105] ./src/index.jsx 1.63 kB {0} [built]
frontend_1  |     + 255 hidden modules

我的文件结构如下所示： Root

// root/docker-compose.yml
version: '2'
services:
  mongodb:
    image: "mongo"
    ports:
     - "27017:27017"
  backend:
    build: ./node-backend/
    ports:
      - "6200:6200"
    volumes:
      - ./node-backend:/usr/src/app
    depends_on:
      - mongodb
  frontend:
    build: ./react-frontend/
    tty: true
    ports:
      - "3000:3000"
    volumes:
      - ./react-frontend:/usr/src/app
    depends_on:
      - backend

节点后端

// root/node-backend/Dockerfile
FROM node:6.11.1
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

RUN npm install -g nodemon

EXPOSE 3000
CMD [ "npm", "start" ]

 // root/node-backend/package.json
 {
   "name": "node-backend",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "nodemon app.js"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "body-parser": "^1.17.2",
     "cors": "^2.8.4",
     "express": "^4.15.3",
     "mongoose": "^4.11.3"
   }
 }

反应前端

// root/react-frontend/Dockerfile
FROM node:6.11.1
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

EXPOSE 3000
CMD [ "npm", "start" ]

// root/react-frontend/package.json

{
  "name": "react-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.16.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.24.1",
    "express": "^4.15.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.1",
    "webpack": "^3.10.0"
  },
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack --config webpack.config.js"
  }
}

// root/react/front-endwebpack.config
var path = require('path');
var SRC_DIR = path.join(__dirname, '/src');
var DIST_DIR = path.join(__dirname, '/public');

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : SRC_DIR,
        loader : 'babel-loader',
        query: {
          presets: ['react', 'es2015']
       }
      }
    ]
  }
};

当我访问 localhost:6200 时，我看到后端正在运行。但是当我访问 localhost:3000 时，屏幕显示“无法访问此站点”。控制台中没有日志。当我查看网页的源代码时，我看到了已更新的旧版本的 html 文件。我尝试在前端目录中删除 bundle.js 并使用 npm i 重新安装模块。

我应该如何更改我的 docker 和 webpack 配置？

4

0 回答 0