如何在运行Nginx和Traefik的Docker堆栈中设置Webpack Dev服务器代理？

我尝试使用Docker和Docker Compose为我们的团队建立一个典型的web开发环境，主要使用wodby提供的图像。到目前为止，我的WordPress安装在nginx容器中运行良好，很高兴与另一个服务容器中的数据库设置进行通信

这里是my

docker compose.yml

设置：

版本：“3”
服务：
马里亚布：
图片：wodby/mariadb:$mariadb_标签
容器名称：“${PROJECT\u name}\u mariadb”
环境：
MYSQL\u ROOT\u密码：$DB\u ROOT\u密码
MYSQL\u数据库：$DB\u名称
MYSQL\u用户：$DB\u用户
MYSQL\u密码：$DB\u密码
卷数：
-“/data/sql:/docker entrypoint initdb.d:委派”
-“mariadb:/var/lib/mysql”
php:
图片：wodby/wordpress-php:$wordpress\u标签
容器名称：“${PROJECT\u name}\u php”
环境：
DB\u主机：$DB\u主机
数据库名称：$DB\u名称
数据库用户：$DB\u用户
DB_密码：$DB_密码
数据库驱动程序：mysql
PHP_时区：欧洲/柏林
phpxdebug:1
PHP\u XDEBUG\u默认值\u启用：1
卷数：
-“/public:/var/www/html:cached”
nginx:
图片：wodby/nginx:$nginx_标签
容器名称：“${PROJECT\u name}\u nginx”
取决于：
-php
环境：
NGINX_VHOST_预设：wordpress
NGINX\u服务器\u根：/var/www/html
NGINX\u错误\u日志\u级别：调试
NGINX\u静态\u打开\u文件\u缓存：“关闭”
卷数：
-“/public:/var/www/html:cached”
标签：
-“traefik.backend=nginx”
-“traefik.port=80”
-“traefik.frontend.rule=Host:${PROJECT\u URL}”
反向代理：
图片：特拉菲克
容器名称：“${PROJECT\u name}\u proxy”
命令：-c/dev/null--web--docker--logLevel=INFO
端口：
- "8000:80"
- "8081:8080"
卷数：
-“/var/run/docker.sock:/var/run/docker.sock”
卷数：
马里亚布：

以及相应的

.env

文件：

#项目设置--------------------
项目名称=wordpress
PROJECT\u URL=wordpress.localhost
#数据库设置-------------------
DB\u ROOT\u PASSWORD=密码
DB_HOST=mariadb
DB_NAME=wp
DB_USER=wp
DB_PASSWORD=foo
#服务标签------------------------
WORDPRESS_标签=7.2-4.8.5
节点标签=10-0.6.0
NGINX_标签=1.15-5.0.11
MARIADB_标签=10.1-3.3.8

此外，我想在开发期间使用Webpack开发服务器来构建自定义主题的资产。下面的代码片段将节点服务添加到堆栈中，该堆栈运行

package.json

中的

service

脚本：

#。。。
节点：
图：wodby/node:$node\u标记
容器名称：“${PROJECT\u name}\u节点”
工作目录：/usr/src/theme
命令：sh-c“npm安装和npm运行服务”
环境：
朗：恩_US.UTF-8
节点环境：开发
揭露：
- "3000"
- "8080"
卷数：
-“/public/wp content/themes/child-theme:/usr/src/theme:delegated”
标签：
-“traefik.backend=节点”
-“traefik.port=8080”
-“traefik.frontend.rule=Host:theme.${PROJECT\u URL}”
# ...

package.json

中的对应脚本刚刚启动开发服务器：

{
“脚本”：{
“服务”：“网页包开发服务器--模式开发--内联--主机0.0.0.0--禁用主机检查”
}
}

这可以很好地为主题目录中的静态HTML文件提供服务。问题是，一旦我开始为Webpack Dev服务器添加代理配置，为了在nginx上而不是在主题目录上运行WordPress安装，我在访问相应的域（）时收到以下错误：

在节点/网页包容器的日志中，出现以下错误：

[HPM] Error occurred while trying to proxy request / from theme.wordpress.localhost:8000 to http://wordpress.localhost:8000/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

我在主题的

Webpack.config.babel.js

中对Webpack Dev服务器的配置：

devServer:{
对,，
代理：[
{
路径：'**'，
目标：'http://wordpress.localhost:8000/',
安全：错误，
更改来源：正确
}
]
},

问题是，我仍然很难理解反向代理容器内部到底发生了什么。我感觉，当webpack将请求“代理”到Traefik时，一些信息丢失了。我尝试将nginx服务名称直接用作webpack dev服务器的目标主机，但没有成功

---

如何将Webpack Dev服务器请求代理到Docker堆栈中的nginx服务器

你能找到解决办法吗？我离你越来越近了。我认为您必须直接代理到nginx服务容器，而不是返回到反向代理。在我的示例中，webpack dev服务器的代理目标应该是“”。此外，我必须将开发服务器的公共url更改为“”，并禁用任何主机检查。此外，我必须在WP-config.php中定义WP_SITEURL，否则wordpress将重定向到wordpress配置中提供的地址。不过感觉有点黑客，这就是为什么我至今还没有把它作为解决方案发布的原因。

[HPM] Error occurred while trying to proxy request / from theme.wordpress.localhost:8000 to http://wordpress.localhost:8000/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)