Docker + Webpack(开发服务器)+ Yarnpkg 不完整构建
Docker + Webpack (Dev Server) + Yarnpkg incomplete builds
问题
正在将 运行 本地的 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
关闭本地开发服务器后,我 运行 $ git checkout containers
,并且此分支不包含 yarn.lock
或 package.lock
。然后我 运行 $ docker-compose up --build web
(在一个单独的终端中,在 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
服务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
给出
#frontend/.dockerignore
node_modules
deploy
.circleci
stories
.storybook
一切似乎顺利,启动的最后一行是web_1 | Server is running at http://localhost:3000/.
然而,当我 GET http://localhost:3001
(注意 docker-compose
中的端口映射)时,返回的页面不包含 <head>
中预期的 <style>...</style>
标记,因为它应该被注入(因为据我了解)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 开发服务器如何处理其加载程序输出的信息,并且没有正确映射某些端口,但这是在黑暗中拍摄的。
或者,webpack-dev-server
版本有问题。本地是 4.4.2
,其中 docker 显示 5.6.0
,尽管这似乎不是问题,因为最新的文档与我自己的设置相匹配。我已经确认加载程序模块的 package.json
规范是每个模块的最新稳定版。
道歉
认识到这是由多种技术以依赖配置且必然特殊的方式交叉引起的问题,我谦虚地请求您帮助解决这个依赖地狱。如果我似乎不明白某一块拼图是如何运作的,我很乐意听到。任何想法、线索或建议,无论多么微不足道,我都将不胜感激并尽我所能加以利用。
您本地安装的包可能与 docker 容器中的包不同。
为确保您安装了相同的软件包,您应该包括 yarn.lock
和 package.lock
文件。如果你只使用 yarn yarn.lock
就足够了。即使这不能解决您的特定问题,它也可以防止其他问题,因为现在您有了确定性构建。
远景,但我试图在 docker 容器中 运行 一个 grails-vue 应用程序,并且遇到了 webpack-dev-server 的端口映射没有正确公开的问题。
我在 github https://github.com/webpack/webpack-dev-server/issues/547 上发现了这个问题,这导致我在 package.json 中将 --host 0.0.0.0 添加到我的开发任务中,如下所示:
"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 控制台中: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}
问题
正在将 运行 本地的 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
关闭本地开发服务器后,我 运行 $ git checkout containers
,并且此分支不包含 yarn.lock
或 package.lock
。然后我 运行 $ docker-compose up --build web
(在一个单独的终端中,在 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
服务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
给出
#frontend/.dockerignore
node_modules
deploy
.circleci
stories
.storybook
一切似乎顺利,启动的最后一行是web_1 | Server is running at http://localhost:3000/.
然而,当我 GET http://localhost:3001
(注意 docker-compose
中的端口映射)时,返回的页面不包含 <head>
中预期的 <style>...</style>
标记,因为它应该被注入(因为据我了解)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 开发服务器如何处理其加载程序输出的信息,并且没有正确映射某些端口,但这是在黑暗中拍摄的。
或者,webpack-dev-server
版本有问题。本地是 4.4.2
,其中 docker 显示 5.6.0
,尽管这似乎不是问题,因为最新的文档与我自己的设置相匹配。我已经确认加载程序模块的 package.json
规范是每个模块的最新稳定版。
道歉
认识到这是由多种技术以依赖配置且必然特殊的方式交叉引起的问题,我谦虚地请求您帮助解决这个依赖地狱。如果我似乎不明白某一块拼图是如何运作的,我很乐意听到。任何想法、线索或建议,无论多么微不足道,我都将不胜感激并尽我所能加以利用。
您本地安装的包可能与 docker 容器中的包不同。
为确保您安装了相同的软件包,您应该包括 yarn.lock
和 package.lock
文件。如果你只使用 yarn yarn.lock
就足够了。即使这不能解决您的特定问题,它也可以防止其他问题,因为现在您有了确定性构建。
远景,但我试图在 docker 容器中 运行 一个 grails-vue 应用程序,并且遇到了 webpack-dev-server 的端口映射没有正确公开的问题。
我在 github https://github.com/webpack/webpack-dev-server/issues/547 上发现了这个问题,这导致我在 package.json 中将 --host 0.0.0.0 添加到我的开发任务中,如下所示:
"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 控制台中: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}