BrowserSync无法打开浏览器LaravelMixDocker，无法访问本地主机

编程问答 2022-08-15

问题描述

目标
我想用docker为一个PHP项目设置一个开发环境，其中包括一个引导程序主题以及一些JS和CSS文件。 目的是，我可以运行npm run watch，并可以在浏览器中打开具有实时重新加载功能的窗口。当我编辑并保存JS，SCSS或PHP文件时，浏览器应重新加载页面。 到目前为止，从src/assets/到public/assets的JS文件和SCSS的复制和捆绑（到CSS）工作正常。

问题描述

问题是，无法通过浏览器访问browsersync服务的页面。当我在docker容器中运行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时，什么都没有发生。
我对docker的态度不是很坚定，所以问题可能出在这里，但我不知道。

我在Stackoverflow上找到了这些站点，但是它们没有帮助，或者我只是没有得到它。 Link1 Link2 Link3 Link4
我也毫不费力地阅读了一些Github问题。例如： Github1 Github2

我使用了这些教程来为一个简单的PHP项目设置LaravelMix：
https://dev.to/ms314006/how-to-package-front-end-projects-into-docker-images-and-use-it-with-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

所以也许有人有暗示？ 提前谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dockerlaravel-mixlivereloadwebpackwebpackwebpack