Docker + Webpack (Dev Server) + Незавершенные сборки Yarnpkg

Проблема

Преобразование проекта webpack, который выполняется локально прямо сейчас для запуска внутри контейнеров docker. Эта работа выполняется в двух ветвях git: develop и containers.

Локальный (без контейнера)

develop - стабильная база, которая выполняется локально через $ yarn install && npm run dev, учитывая следующее в package.json

"scripts": {
    "start": "node .",
    "env:dev": "cross-env NODE_ENV=development",
    "env:prod": "cross-env NODE_ENV=production",
    "predev": "npm run prebuild",
    "dev": "npm run env:dev -- webpack-dev-server",
//[...]
}

В ветке develop содержится yarn.lock, хотя FWIW, $ rm yarn.lock && yarn install --force && npm run dev правильно запускает сервер, т.е. GET http://localhost:3000 дает мне домашнюю страницу, как я ожидаю увидеть. Выше все работает одинаково после $ git checkout containers

Docker

После закрытия локального dev-сервера я запустил $ git checkout containers, и эта ветка НЕ ​​содержит yarn.lock или package.lock. Затем я запустил $ docker-compose up --build web (в отдельном терминале, в каталоге sibling, который содержит следующее в docker-compose.yaml)

   web:
      build:
       context: ../frontend/
       dockerfile: Dockerfile
      env_file: ../frontend/.env
      volumes:
        - ../frontend/src:/code/src
      ports:
        - "3001:3000"
      depends_on:
        - api
      networks:
        - backend

frontend/Dockerfile для службы web выглядит так

# Dockerfile

FROM node:latest
RUN mkdir /code
ADD . /code/
WORKDIR /code/
RUN yarn cache clean && yarn install --non-interactive --force && npm rebuild node-sass

CMD npm run dev --verbose

данный

#frontend/.dockerignore

node_modules
deploy
.circleci
stories
.storybook

Все, кажется, идет хорошо, и конечная строка запуска - web_1 | Server is running at http://localhost:3000/. Однако, когда я GET http://localhost:3001 (отображение порт заметок в docker-compose), возвращаемая страница не содержит ожидаемого тега <style>...</style> в <head>, который, как я понял, должен быть введен (насколько я понял) на webpack, учитывая конфигурацию ниже

// https://github.com/diegohaz/arc/wiki/Webpack
const path = require('path')
const devServer = require('@webpack-blocks/dev-server2')
const splitVendor = require('webpack-blocks-split-vendor')
const happypack = require('webpack-blocks-happypack')
const serverSourceMap = require('webpack-blocks-server-source-map')
const nodeExternals = require('webpack-node-externals')
const AssetsByTypePlugin = require('webpack-assets-by-type-plugin')
const ChildConfigPlugin = require('webpack-child-config-plugin')
const SpawnPlugin = require('webpack-spawn-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const {
  addPlugins, createConfig, entryPoint, env, setOutput,
  sourceMaps, defineConstants, webpack, group,
} = require('@webpack-blocks/webpack2')

const host = process.env.HOST || 'localhost'
const port = (+process.env.PORT + 1) || 3001
const sourceDir = process.env.SOURCE || 'src'
const publicPath = `/${process.env.PUBLIC_PATH || ''}/`.replace('//', '/')
const sourcePath = path.join(process.cwd(), sourceDir)
const outputPath = path.join(process.cwd(), 'dist/public')
const assetsPath = path.join(process.cwd(), 'dist/assets.json')
const clientEntryPath = path.join(sourcePath, 'client.js')
const serverEntryPath = path.join(sourcePath, 'server.js')
const devDomain = `http://${host}:${port}/`

//[...]  
const sass = () => () => ({
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
            { loader: 'style-loader' },
            { loader: 'css-loader' },
            { loader: 'sass-loader'},
            ],
      },
    ],
  },
})

const extractSass = new ExtractTextPlugin({
  filename: 'style.css',
})

const prodSass = () => () => ({
  module: {
    rules: [
      { test: /\.(scss|sass)$/,
        use: extractSass.extract({
          use: [
            { loader: 'css-loader', options: { minimize: true } },
            { loader: 'sass-loader' },
          ],
          fallback: 'style-loader',
        }),
      },
    ],
  },
})

const babel = () => () => ({
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
    ],
  },
})

const assets = () => () => ({
  module: {
    rules: [
      { test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/, loader: 'url-loader?limit=8000' },
    ],
  },
})

const resolveModules = modules => () => ({
  resolve: {
    modules: [].concat(modules, ['node_modules']),
  },
})

const base = () => group([
  setOutput({
    filename: '[name].js',
    path: outputPath,
    publicPath,
  }),
  defineConstants({
    'process.env.NODE_ENV': process.env.NODE_ENV,
    'process.env.PUBLIC_PATH': publicPath.replace(/\/$/, ''),
  }),
  addPlugins([
    new webpack.ProgressPlugin(),
    extractSass,
  ]),
  apiInsert(),
  happypack([
    babel(),
  ]),
  assets(),
  resolveModules(sourceDir),

  env('development', [
    setOutput({
      publicPath: devDomain,
    }),
    sass(),
  ]),

  env('production', [
    prodSass(),
  ]),
])

const server = createConfig([
  base(),
  entryPoint({ server: serverEntryPath }),
  setOutput({
    filename: '../[name].js',
    libraryTarget: 'commonjs2',
  }),
  addPlugins([
    new webpack.BannerPlugin({
      banner: 'global.assets = require("./assets.json");',
      raw: true,
    }),
  ]),
  () => ({
    target: 'node',
    externals: [nodeExternals()],
    stats: 'errors-only',
  }),

  env('development', [
    serverSourceMap(),
    addPlugins([
      new SpawnPlugin('npm', ['start']),
    ]),
    () => ({
      watch: true,
    }),
  ]),
])

const client = createConfig([
  base(),
  entryPoint({ client: clientEntryPath }),
  addPlugins([
    new AssetsByTypePlugin({ path: assetsPath }),
    new ChildConfigPlugin(server),
  ]),

  env('development', [
    devServer({
      contentBase: 'public',
      stats: 'errors-only',
      historyApiFallback: { index: publicPath },
      headers: { 'Access-Control-Allow-Origin': '*' },
      host,
      port,
    }),
    sourceMaps(),
    addPlugins([
      new webpack.NamedModulesPlugin(),
    ]),
  ]),

  env('production', [
    splitVendor(),
    addPlugins([
      new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
    ]),
  ]),
])

module.exports = client

Интересно, добавив эту строку в package.json

 "dev-docker": "npm run predev && npm run env:dev -- webpack  --progress --watch --watch-poll",

и изменение последней строки файла Docker на CMD npm run dev-docker дает желаемый эффект...

Гипотезы

Мое текущее подозрение в том, что мне не хватает чего-то о том, как сервер webpack dev обрабатывает работу с его загрузчиком, и неправильно отобразил какой-либо порт, но это выстрел в темноте.

В качестве альтернативы версия webpack-dev-server является проблемой. Локальный 4.4.2, где docker показывает 5.6.0, хотя, похоже, это не проблема, поскольку документация для последних соответствует моей собственной настройке. Я подтвердил, что спецификация package.json для модулей загрузчика является последней стабильной на каждом из них.

Апология

Признавая, что это проблема, вызванная пересечением нескольких технологий в зависящей от конфигурации и обязательно идиосинкразированной манере, я смиренно прошу вас помочь в работе над этим адским адем. Если мне кажется, что я не понимаю, как работает данный кусочек головоломки, я рад это слышать. Любые идеи, идеи или предложения, как бы они ни были слабыми, будут высоко оценены и использованы в моих силах.

Ответ 1

Это было какое-то время, но, возвращаясь к этой проблеме, я нашел фактический ответ.

webpack-dev-server использует два порта. Таким образом, выставляя только один порт (3000), я не получал встроенные файлы, которые обслуживаются в client.js на localhost:3001. В консоли JS все время была подсказка: в GET localhost:3001/client.js.

Решение состоит в том, чтобы открыть оба порта в контейнере, то есть docker run -it -p 3000:3000 -p 3001:3001 --rm --entrypoint "npm run env:dev -- webpack-dev-server" ${CONTAINER_REGISTRY}/${IMAGE_NAME}:${IMAGE_TAG}

Ответ 2

Длинный выстрел здесь, но я пытался запустить приложение grails-vue в док-контейнерах, и у меня были проблемы с отображением портов webpack-dev-server, который не был выставлен должным образом.

Я обнаружил эту проблему на github https://github.com/webpack/webpack-dev-server/issues/547, что привело меня к добавлению --host 0.0.0.0 к моей задаче разработчика в package.json следующим образом:

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0"

Это решило мою проблему, возможно, это поможет вам найти свой ответ.

Ответ 3

Возможно, ваши локально установленные пакеты отличаются от пакетов в контейнере докеров.

Чтобы убедиться, что у вас установлены одинаковые пакеты, вы должны включить файлы yarn.lock и package.lock. Если вы используете только пряжу yarn.lock, то достаточно. Даже если это не решит вашу конкретную проблему, это может предотвратить другие, потому что теперь у вас есть детерминированная сборка.