时间戳

首页 > 解决方案 > 在 Docker 环境中使用 gulp browser-sync 时页面不断加载

docker - 在 Docker 环境中使用 gulp browser-sync 时页面不断加载

问题描述

我已经为我的 Drupal 安装设置了一个 Docker 环境，我创建了一个主题，我希望它可以与 gulp 和浏览器同步一起使用。当我使用下面显示的浏览器同步运行我的 gulp 脚本时，它会打开一个新的浏览器选项卡，但页面只是继续加载。

我的 Docker 文件：

version: "2"

services:
  mariadb:
    image: wodby/mariadb:$MARIADB_TAG
    container_name: "${PROJECT_NAME}_mariadb"
    stop_grace_period: 30s
    environment:
      MYSQL_ROOT_PASSWORD: $DB_ROOT_PASSWORD
      MYSQL_DATABASE: $DB_NAME
      MYSQL_USER: $DB_USER
      MYSQL_PASSWORD: $DB_PASSWORD

  php:
    image: wodby/drupal-php:$PHP_TAG
    container_name: "${PROJECT_NAME}_php"
    environment:
      PHP_SENDMAIL_PATH: /usr/sbin/sendmail -t -i -S mailhog:1025
      DB_HOST: $DB_HOST
      DB_USER: $DB_USER
      DB_PASSWORD: $DB_PASSWORD
      DB_NAME: $DB_NAME
      DB_DRIVER: $DB_DRIVER
    volumes:
      - ./:/var/www/html

  nginx:
    image: wodby/nginx:$NGINX_TAG
    container_name: "${PROJECT_NAME}_nginx"
    depends_on:
      - php
    environment:
      NGINX_STATIC_OPEN_FILE_CACHE: "off"
      NGINX_ERROR_LOG_LEVEL: debug
      NGINX_BACKEND_HOST: php
      NGINX_SERVER_ROOT: /var/www/html/web
      NGINX_VHOST_PRESET: $NGINX_VHOST_PRESET
    volumes:
      - ./:/var/www/html
    labels:
      - 'traefik.backend=nginx'
      - 'traefik.port=80'
      - 'traefik.frontend.rule=Host:${PROJECT_BASE_URL}'

  pma:
    image: phpmyadmin/phpmyadmin
    container_name: "${PROJECT_NAME}_pma"
    environment:
      PMA_HOST: $DB_HOST
      PMA_USER: $DB_USER
      PMA_PASSWORD: $DB_PASSWORD
      PHP_UPLOAD_MAX_FILESIZE: 1G
      PHP_MAX_INPUT_VARS: 1G
    labels:
      - 'traefik.backend=pma'
      - 'traefik.port=80'
      - 'traefik.frontend.rule=Host:pma.${PROJECT_BASE_URL}'

  portainer:
    image: portainer/portainer
    container_name: "${PROJECT_NAME}_portainer"
    command: --no-auth -H unix:///var/run/docker.sock
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    labels:
      - 'traefik.backend=portainer'
      - 'traefik.port=9000'
      - 'traefik.frontend.rule=Host:portainer.${PROJECT_BASE_URL}'

  traefik:
    image: traefik
    container_name: "${PROJECT_NAME}_traefik"
    command: -c /dev/null --web --docker --logLevel=INFO
    ports:
      - '8000:80'
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

我的 gulpfile：（我没有使用那个环境变量，但它是为了显示我在那里使用的 url。）

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
  browserSync.init({
    proxy: "${PROJECT_BASE_URL}"
  });
});

标签： dockergulpbrowser-sync

解决方案

我猜你的前端是在 nginx-container 或 php-container 上运行的。

尝试使用：

...
    proxy: "http://nginx"
... 

or

...
    proxy: "http://php"
...

我认为您至少应该能够使用正确的端口在配置的本地主机上看到您的浏览器同步。

也许它确实有帮助，但我也不确定。

推荐阅读