Node.js Docker&x2B；网页包（开发服务器）和#x2B；Yarnpkg未完成构建 问题

将当前在本地运行的

webpack

项目转换为在

docker

容器内运行。这项工作在两个

git

分支中进行：

develope

和

containers

本地（无集装箱）

develope

是稳定的基础，通过

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",
//[...]
}

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

分支

develope

确实包括

warn.lock

，尽管FWIW，

$rm warn.lock&&warn安装--force&npm run dev

确实正确启动了服务器，即

GEThttp://localhost:3000

提供了我希望看到的主页。在

$git checkout containers

码头工人 关闭本地dev服务器后，我运行了

$git checkout containers

，该分支不包含

warn.lock

或

package.lock

。然后我运行

$docker compose up--build web

（在一个单独的终端中，在

docker compose.yaml

中包含以下内容的同级目录中）

服务

web

的

frontend/Dockerfile

如下

# 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

给定

一切似乎都进展顺利，启动的最后一行是

web|1 |服务器正在运行http://localhost:3000/. 
然而当我
得到http://localhost:3001
（注意
docker compose
）中的端口映射，返回的页面不包含
中预期的
..
标记，因为
网页包
（据我所知）应该注入该标记，如下所示配置

// 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

"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",
//[...]
}

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

将Dockerfile的最后一行更改为
CMD npm run dev docker
，确实会产生预期的效果

假设
我目前的怀疑是，我遗漏了webpack dev服务器如何处理其加载器输出，并且没有正确映射某些端口，但这是一个未知数

或者，
webpack dev server
版本是一个问题。本地是
4.4.2
，docker's显示
5.6.0
，尽管这似乎不是问题，因为最新的文档与我自己的设置相匹配。我已经确认加载程序模块的
package.json
规范是每个模块上最新的稳定规范

道歉
认识到这是一个由多种技术以一种依赖于配置且必然具有特殊性的方式交叉而引起的问题，我谦恭地请求您帮助解决这个依赖性问题。如果我似乎不明白谜题的某一部分是如何运作的，我很高兴听到它。任何想法、线索或建议，无论多么微不足道，我都将不胜感激，并尽我所能加以利用。
您本地安装的软件包可能与docker容器中的软件包有所不同

为确保安装了相同的软件包，应包括
warn.lock
和
package.lock
文件。如果您只使用纱线
纱线，则锁定
就足够了。即使这不能解决您的特定问题，它也可以防止其他问题，因为现在您已经有了一个确定性的构建。
这里说得不太清楚，但我试图在docker容器中运行grails vue应用程序，并且Web包开发服务器的端口映射没有正确公开

我在github上发现了这个问题，这导致我在package.json中将--host 0.0.0添加到我的dev任务中，如下所示：

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

这解决了我的问题，也许这会帮助你找到答案。
已经有一段时间了，但回到这个问题上，我找到了真正的答案

webpack dev server
使用两个端口。因此，在仅公开一个端口（3000）时，我没有获得构建的文件，这些文件在
localhost:3001
上的
client.js
中提供。线索一直在JS控制台中：在
getlocalhost:3001/client.JS
上出现连接拒绝错误

解决方案是公开容器上的两个端口，即。
docker run-it-p3000:3000-p3001:3001--rm--entrypoint“npm run env:dev--webpack dev server”${CONTAINER\u REGISTRY}/${IMAGE\u NAME}:${IMAGE\u TAG}
您的问题似乎是
卷：-../frontend/src:/code/src
，您正在用本地文件覆盖构建的数据。你能删除它并尝试它是否有效吗？这是有道理的，但是删除该条目似乎没有任何效果。要澄清的是，无论是否使用锁定文件，行为都是相同的。那么它可能是webpack dev服务器版本。您应该确保所有内容都具有相同的版本号，以消除这一不同行为的原因。谢谢！在使用Linux时，这个问题让我陷入了许多不同的环境中。无论何时处理localhost，都必须将主机IP设置为0.0.0.0