如何解决BrowserSync无法打开浏览器LaravelMixDocker,无法访问本地主机
目标
我想用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://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 举报,一经查实,本站将立刻删除。