user1030151
user1030151

Reputation: 397

How to fix HTTP_HOST when using docker with browser-sync

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:

docker-compose.yml

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"

Dockerfile

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

package.json

{
  "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

Answers (0)

Related Questions