Question

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

这是我的valueBoxOutput进行的设置：

docker-compose.yml

以及相应的version: '3' services: mariadb: image: wodby/mariadb:$MARIADB_TAG container_name: "${PROJECT_NAME}_mariadb" environment: MYSQL_ROOT_PASSWORD: $DB_ROOT_PASSWORD MYSQL_DATABASE: $DB_NAME MYSQL_USER: $DB_USER MYSQL_PASSWORD: $DB_PASSWORD volumes: - "./data/sql:/docker-entrypoint-initdb.d:delegated" - "mariadb:/var/lib/mysql" php: image: wodby/wordpress-php:$WORDPRESS_TAG container_name: "${PROJECT_NAME}_php" environment: DB_HOST: $DB_HOST DB_NAME: $DB_NAME DB_USER: $DB_USER DB_PASSWORD: $DB_PASSWORD DB_DRIVER: mysql PHP_TIMEZONE: Europe/Berlin PHP_XDEBUG: 1 PHP_XDEBUG_DEFAULT_ENABLE: 1 volumes: - "./public:/var/www/html:cached" nginx: image: wodby/nginx:$NGINX_TAG container_name: "${PROJECT_NAME}_nginx" depends_on: - php environment: NGINX_VHOST_PRESET: wordpress NGINX_SERVER_ROOT: /var/www/html NGINX_ERROR_LOG_LEVEL: debug NGINX_STATIC_OPEN_FILE_CACHE: "off" volumes: - "./public:/var/www/html:cached" labels: - "traefik.backend=nginx" - "traefik.port=80" - "traefik.frontend.rule=Host:${PROJECT_URL}" reverse-proxy: image: traefik container_name: "${PROJECT_NAME}_proxy" command: -c /dev/null --web --docker --logLevel=INFO ports: - "8000:80" - "8081:8080" volumes: - "/var/run/docker.sock:/var/run/docker.sock" volumes: mariadb:文件：

.env

此外，我想在开发过程中使用Webpack Dev Server来构建自定义主题的资产。以下代码段将节点服务添加到运行# Project Settings -------------------- PROJECT_NAME=wordpress PROJECT_URL=wordpress.localhost # Database Settings ------------------- DB_ROOT_PASSWORD=password DB_HOST=mariadb DB_NAME=wp DB_USER=wp DB_PASSWORD=foo # Service Tags ------------------------ WORDPRESS_TAG=7.2-4.8.5 NODE_TAG=10-0.6.0 NGINX_TAG=1.15-5.0.11 MARIADB_TAG=10.1-3.3.8中的serve脚本的堆栈中：

package.json

# ... node: image: wodby/node:$NODE_TAG container_name: "${PROJECT_NAME}_node" working_dir: /usr/src/theme command: sh -c "npm install && npm run serve" environment: LANG: en_US.UTF-8 NODE_ENV: development expose: - "3000" - "8080" volumes: - "./public/wp-content/themes/child-theme:/usr/src/theme:delegated" labels: - "traefik.backend=node" - "traefik.port=8080" - "traefik.frontend.rule=Host:theme.${PROJECT_URL}" # ...中的相应脚本才刚刚启动开发服务器：

package.json

这很好，可以从主题目录中提供静态HTML文件。问题是，一旦我开始为Webpack Dev Server添加代理配置，以便为在nginx而非主题目录上运行的WordPress安装提供服务，当我访问相应的域（http://theme.wordpress.localhost:8000时会收到以下错误）：

{
  "scripts": {
    "serve": "webpack-dev-server --mode development --inline --host 0.0.0.0 --disable-host-check"
  }
}

在节点/ Webpack容器的日志中，给出以下错误：

Error occured while trying to proxy to: theme.wordpress.localhost:8000/

我在主题[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 Dev Server的配置：

webpack.config.babel.js

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

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

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

0 个答案: