reactjs - 无法在Docker上运行React应用程序

Question

问题

我正在通过webpack而不是create-react-app来制作简单的React应用程序。
现在我尝试通过命令Docker在docker-compose up上运行此React应用程序，但这失败了。
我想知道如何修复docker-compose up在Docker上运行。

~/hospital master*
❯ docker-compose up
Starting hospital_client_1 ... done
Attaching to hospital_client_1
client_1  | 
client_1  | > client@1.0.0 start /app
client_1  | > webpack-dev-server --mode=development "0.0.0.0" "3000"
client_1  | 
client_1  | /app/node_modules/webpack-cli/bin/utils/convert-argv.js:547
client_1  |                             const i = content.indexOf("=");
client_1  |                                               ^
client_1  | 
client_1  | TypeError: content.indexOf is not a function
client_1  |     at /app/node_modules/webpack-cli/bin/utils/convert-argv.js:547:23
client_1  |     at Array.forEach (<anonymous>)
client_1  |     at processOptions (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:546:11)
client_1  |     at processConfiguredOptions (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:170:4)
client_1  |     at module.exports (/app/node_modules/webpack-cli/bin/utils/convert-argv.js:131:10)
client_1  |     at Object.<anonymous> (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:40)
client_1  |     at Module._compile (internal/modules/cjs/loader.js:777:30)
client_1  |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:788:10)
client_1  |     at Module.load (internal/modules/cjs/loader.js:643:32)
client_1  |     at Function.Module._load (internal/modules/cjs/loader.js:556:12)
client_1  | npm ERR! code ELIFECYCLE
client_1  | npm ERR! errno 1
client_1  | npm ERR! client@1.0.0 start: `webpack-dev-server --mode=development "0.0.0.0" "3000"`
client_1  | npm ERR! Exit status 1
client_1  | npm ERR! 
client_1  | npm ERR! Failed at the client@1.0.0 start script.
client_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
client_1  | 
client_1  | npm ERR! A complete log of this run can be found in:
client_1  | npm ERR!     /root/.npm/_logs/2019-12-02T13_52_45_192Z-debug.log
hospital_client_1 exited with code 1

我尝试过的

此React应用程序成功在本地环境中运行(npm start)。

一些代码

hospital
  ├ client
  │  ├ src
  │  │  ├ components
  │  │  │  └ Demo.tsx
  │  │  ├ App.tsx
  │  │  ├ index.html
  │  │  └ index.tsx
  │  ├ Dockerfile
  │  ├ package.json
  │  └ webpack.config.js
  └ docker-compose.yml

Docker文件

FROM node:alpine
WORKDIR '/app'
COPY ./package.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm start

docker-compose.yml

version: '3'
services:
  client:
    command: 'npm start --host 0.0.0.0 --port 3000'
    build:
      dockerfile: Dockerfile
      context: ./client
    ports:
      - '3000:3000'
    volumes:
      - /app/node_modules
      - ./client:/app

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',

  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },

  devServer: {
    port: '3000',
    hot: true,
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.js(x?)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.ts(x?)$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],

  resolve: {
    extensions: ['.js', '.ts', '.tsx'],
  },
};

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "start": "webpack-dev-server --mode=development"
  },

整个代码在这里:
https://github.com/jpskgc/hospital

更新资料

我以以下方式修复了Dockerfile和docker-compose.yml。
它调用了另一个错误。

FROM node:alpine
WORKDIR '/app'
// ADD 
RUN apk add --no-cache bash
COPY ./package.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm start

version: '3'
services:
  client:
    // change command
    command: bash -c "npm start --host 0.0.0.0 --port 3000"
    build:
      dockerfile: Dockerfile
      context: ./client
    ports:
      - '3000:3000'
    volumes:
      - /app/node_modules
      - ./client:/app

❯ docker-compose up
Creating network "hospital_default" with the default driver
Creating hospital_client_1 ... done
Attaching to hospital_client_1
client_1  | internal/modules/cjs/loader.js:628
client_1  |     throw err;
client_1  |     ^
client_1  | 
client_1  | Error: Cannot find module '/app/bash'
client_1  |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
client_1  |     at Function.Module._load (internal/modules/cjs/loader.js:527:27)
client_1  |     at Function.Module.runMain (internal/modules/cjs/loader.js:840:10)
client_1  |     at internal/main/run_main_module.js:17:11 {
client_1  |   code: 'MODULE_NOT_FOUND',
client_1  |   requireStack: []
client_1  | }

Answer 1

问题是您正在将--host 0.0.0.0 --port 3000传递给npm start而不是webpack-dev-server。您可以将这些参数移至package.json。
Dockerfile也需要一些调整。

Docker文件

FROM node:alpine

RUN mkdir -p /app
COPY . /app
WORKDIR /app
RUN npm install

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

docker-compose.yml

version: '3'
services:
  client:
    build:
      dockerfile: Dockerfile
      context: ./client
    ports:
      - '3000:3000'
    volumes:
      - ./client:/app

package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack --mode development",
    "start": "webpack-dev-server --mode development --host 0.0.0.0 --port 3000"
  },
  ...
}