Цель
Я хочу настроить среду разработки с докером для проекта 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://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
Так может кто подскажет? Заранее большое спасибо.