Reputation: 397
I'm trying to set up my new development environment (on Mac) for a simple PHP project (with Kirby CMS) and have decided to use Docker and Browser Sync. Without Browser Sync my setup works fine. However, when I add Browser Sync it only works partially. Some assets can then no longer be loaded because HTTP_HOST does not contain the called host localhost:3000
but the Docker container name my-project-name
.
Here are my configuration files:
services:
web:
build:
context: .
dockerfile: Dockerfile
ports:
- "8080:80"
volumes:
- ${PWD}:/var/www/html
container_name: my-project-name
restart: unless-stopped
environment:
- APACHE_DOCUMENT_ROOT=/var/www/html
- PHP_MEMORY_LIMIT=256M
browser-sync:
image: node:lts-alpine
container_name: browser-sync
working_dir: /app
volumes:
- ${PWD}:/app
ports:
- "3000:3000"
- "3001:3001"
command: >
sh -c "npm install && npx browser-sync start --proxy 'my-project-name' --files '/app/**/*' --port 3000 --ui-port 3001 --reload-delay 500 --reload-debounce 500 --no-open"
FROM php:8.3-apache
# Install GD library
RUN apt-get update && apt-get install -y \
libpng-dev \
libjpeg-dev \
libfreetype6-dev \
&& docker-php-ext-configure gd --with-freetype --with-jpeg \
&& docker-php-ext-install gd
# Enable Apache modules
RUN a2enmod rewrite
# Set document root
ENV APACHE_DOCUMENT_ROOT /var/www/html
{
"name": "my-project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^3.0.3"
}
}
I tried replacing the value of the --proxy
parameter in docker-compose.yml, but the container name my-project-name
and the value web
are the only values that work at least a little bit. With values like localhost
, localhost:3000
, localhost:8080
, web:3000
, web:8080
the browser cannot open the website at all. I also tried those values each with http://
in front of them, but to no avail. If I use the container name my-project-name
or web
as a value, the website loads when calling localhost:3000
, but some images are tried to load via http://my-project-name/...
or http://web/...
respectively, which does not work.
If I call a PHP file with the content <?php phpinfo();
then I can see that the PHP variable $_SERVER['HTTP_HOST'] contains the container name my-project-name
or the value web
instead of the value localhost:3000
that I would expect and want.
I also tried using the --host
parameter, but that didn't change anything.
I have no idea how to solve this. Can anyone help me?
Upvotes: 0
Views: 24