Question

所以，我已经在一个星期的大部分时间里一直在解决这个问题，尽管我已经阅读了很多有关该主题的文章，并且阅读了很多堆栈溢出问题，但我感觉还是一无所获。在下面的文章https://blog.bam.tech/developper-news/dockerize-your-app-and-keep-hot-reloading中，我尝试使用以下文件docker-compose.yml和Dockerfile.dev。我的实现与该文章之间存在一些差异。据我在计算机（OSX）上了解到的那样，我无法使用node_modules目录，因为我试图在Linux环境中运行Docker，因此必须在Docker内部运行npm install。我尚未实现api（即将实现，我只想先使它工作），因此已删除所有对api的引用。

这是我的docker-compose.yml：

version: '3'
services:
  server:
    container_name: server
    build: ./server
    ports:
      - '80:80'
    links:
      - app:app
  app:
    container_name: app
    build:
      context: ../retail
      dockerfile: Dockerfile.dev
    ports:
      - '9000:9000'
    volumes:
      - ../retail:/usr/src/app/
    environment:
      - NODE_ENV=development
      - NPM_CONFIG_PRODUCTION=false
  db:
    container_name: database
    build: ./database
    environment:
      POSTGRES_PASSWORD: supersecretpasswordthatnobodyknows
      POSTGRES_USER: devsuperuser
      POSTGRES_DB: lending
    restart: always
    ports:
      - '5432:5432'
    volumes:
      - /var/lib/postgresql/data

这是我上面引用的Dockerfile.dev：

FROM node:alpine

WORKDIR /usr/src/app

COPY ./package.json ./.npmrc ./

RUN npm install webpack webpack-cli webpack-server webpack-hot-client -g
RUN npm link webpack webpack-dev-server && npm install

EXPOSE 9000
CMD ["npm", "run", "start:dev"]

我尝试过的一些事情在上面的代码中。例如将NPM_CONFIG_PRODUCTION设置为false。并全局安装所有webpack，然后进行链接。我发现如果我不这样做，我会遇到无法找到webpack的错误。我已经从大量文章中尝试了不同想法的多种组合，但是无论我尝试了什么，我都会不断遇到一些缺少的模块或其他模块的问题。

我只是想知道有人在需要做npm install时是否可以帮助我使本文适合我。也许甚至可以通过某种方式在本地执行npm install，而无需在Docker容器中执行此操作（因为它可以工作）。

编辑：我正在添加另一个文件或文件的一部分，该文件可能与下面的内容无关，以回应要求它们的评论。

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');

module.exports = {
  devtool: 'eval-source-map',
  context: __dirname,
  entry: [
    'babel-polyfill',
    // 'react-hot-loader/patch',
    'webpack-dev-server/client?http://0.0.0.0:9000',
    'webpack/hot/only-dev-server',
    './src/index.js',
  ],
  output: {
    path: path.join(__dirname, 'www'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  devServer: {
    disableHostCheck: true,
    historyApiFallback: true,
    inline: false,
    port: 9000,
    hot: true,
    proxy: {
      '/v1': {
        target: 'an IP address',
      },
    },
  },
  module: {
    loaders: [
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          { loader: 'css-loader' },
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpg|svg|woff|woff2|ttff|eot|ttf)$/,
        loader: 'url-loader?limit=25000',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.join(__dirname, 'src'),
        ],
        exclude: /node_modules/,
        options: {
          // This is a feature of `babel-loader` for Webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: true,
          // plugins: ['react-hot-loader/babel'],
        },
      },
      {
        test: /config\.js$/,
        loaders: 'string-replace-loader',
        query: {
          multiple: [
            { search: '{{API_SERVER}}', replace: '' },
          ],
        },
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({ options: { postcss: [autoprefixer] } }),
  ],
};

还有我的start:dev中package.json的脚本定义

"start:dev": "webpack-dev-server --host 0.0.0.0 --hot --inline",

无法使Docker与React和Webpack一起使用

0 个答案: