BrowserSync Не удалось открыть браузер (LaravelMix) Docker, локальный хост недоступен

Цель
Я хочу настроить среду разработки с докером для проекта PHP, который включает тему начальной загрузки, а также несколько файлов JS и CSS. Цель состоит в том, чтобы я мог запустить npm run watch и открыть окно в браузере с функцией перезагрузки в реальном времени. Когда я редактирую и сохраняю файл JS, SCSS или PHP, браузер должен перезагрузить страницу. Копирование и объединение файлов JS и SCSS (в CSS) из src/assets/ в public/assets пока работает хорошо.

Описание проблемы

Проблема в том, что страница, которую обслуживает browsersync, недоступна через браузер. Когда я запускаю npm run watch внутри контейнера докера, появляется следующее сообщение:
Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false).
Когда я открываю http://localhost:3000, ничего не происходит.
Я не очень хорошо разбираюсь в докере, так что, возможно, проблема в нем. , но я не знаю.

Я нашел эти сайты на Stackoverflow, но они не помогли или я просто не понял. Link1 Link2 Link3 Link4
Я также без труда прочитал несколько выпусков Github. Например: Github1 Github2

Я использовал это руководство для настройки LaravelMix для простого проекта PHP:
https://dev.to/ms314006/how-to-package-front-end-projects-into-docker-изображения-и-использование-с-webpack-go3

https://medium.com/qunabu-interactive/drupal-8-docker-composer-bootstrap-laravel-mix-boilerplate-ci-on-gitlab-754b1ccdf3ec

https://www.sitepoint.com/use-laravel-mix-non-laravel-projects/

Я думаю, что следующие файлы помогут увидеть мой подход:

package.json

{
  "name": "Dinjnection",
  "version": "0.0.1",
  "description": "",
  "scripts": {
    "dev": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --host 0.0.0.0 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "main": "app.js",
  "author": "",
  "license": "",
  "dependencies": {
  },
  "devDependencies": {
    "cross-env": "^7.0.2",
    "laravel-mix": "^5.0.5",
    "node-sass": "^4.5.0",
    "browser-sync": "^2.26.12",
    "browser-sync-webpack-plugin": "^2.2.2",
    "resolve-url-loader": "^3.1.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.12"
  }
}

webpack.mix.js

const mix = require('laravel-mix');

mix.setPublicPath('public').js('src/Assets/js/app.js', 'public/js')
    .sass('src/Assets/sass/app.scss', 'public/css').version().browserSync(
    {
        proxy: 'localhost:8000',
        host: 'dinjection.test',
        // => true = the browse opens a new browser window with every npm run watch startup/reload

        files: [
            "src/Assets/*"
        ],

        open: true,
        notify: true,
        ui: false
    }
);

docker-composer.yaml

version: '3'
services:
    nginx:
        container_name: dinjection_dev_nginx
        build: nginx
        ports:
            - "80:80"
            - "443:443"
        volumes:
            - ./..:/var/www/dinjection.test/current
            - ./nginx/nginx.conf:/etc/nginx/nginx.conf
            - ./nginx/sites/:/etc/nginx/sites-available
            - ./nginx/conf.d/:/etc/nginx/conf.d
        networks:
            - dinjection_net

    php:
        container_name: dinjection_dev_php
        build: php
        ports:
            - "3000:3000"
            - "8000:8000"
        volumes:
            - ./..:/var/www/dinjection.test/current
            - "/etc/timezone:/etc/timezone:ro"
            - "/etc/localtime:/etc/localtime:ro"
            - dinjection-volume-session-share:/tmp
        environment:
            APP_ENVIRONMENT: "dev"
            DB_HOST: "localhost"
            DB_PORT: "3306"
            DB_USER: "${DEFAULT_USER}"
            DB_PASSWORD: "${DEFAULT_PASSWORD}"
        networks:
            - dinjection_net

        volumes:
            dinjection-volume-mariadb:
            dinjection-volume-session-share:

        networks:
            dinjection_net:
                driver: bridge
        

Контейнер Dockerfile PHP

FROM php:7.4-fpm


RUN apt-get update \
    && apt-get install -y \
        wget \
        curl \
        git \
        build-essential \
        nodejs \
        ca-certificates \
        zsh \
        nano \
        tzdata\
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*


ADD https://raw.githubusercontent.com/mlocati/docker-php-extension-installer/master/install-php-extensions /usr/local/bin/
RUN chmod uga+x /usr/local/bin/install-php-extensions && sync && \
    install-php-extensions \
    gd \
    intl \
    redis \
    pdo_mysql \
    opcache \
    pcntl \
    mysqli \
    gettext \
    exif \
    bz2 \
    bcmath \
    amqp \
    mcrypt \
    rdkafka \
    zip \
    yaml


COPY php-ini-overrides.ini /usr/local/etc/php/conf.d/


RUN curl -sL https://deb.nodesource.com/setup_12.x | bash - \
    && curl -L https://www.npmjs.com/install.sh | sh \
    && curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

RUN composer global require hirak/prestissimo

RUN sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

WORKDIR /var/www/dinjection.test/current

CMD ["php-fpm"]

EXPOSE 9000

контейнер nginx

FROM nginx:alpine

# install software
RUN apk update \
    && apk add --update --no-cache openssl

# generate certs
RUN mkdir -p /etc/nginx/ssl \
    && openssl genrsa -out "/etc/nginx/ssl/selfsigned.key" 2048 \
    && openssl req -new -key "/etc/nginx/ssl/selfsigned.key" -out "/etc/nginx/ssl/selfsigned.csr" -subj "/CN=selfsigned/O=acme/C=DE" \
    && openssl x509 -req -days 365 -in "/etc/nginx/ssl/selfsigned.csr" -signkey "/etc/nginx/ssl/selfsigned.key" -out "/etc/nginx/ssl/selfsigned.crt" \
    && openssl dhparam -out "/etc/nginx/ssl/dhparam.pem" 2048 \
    && chown -R root:root /etc/nginx/ssl \
    && chmod -R 600 /etc/nginx/ssl

CMD ["nginx"]

EXPOSE 80 443

Так может кто подскажет? Заранее большое спасибо.


person leonp5    schedule 24.08.2020    source источник