基于Docker Compose+Makefile实现带热重载静态服务的方案问询

Great job getting the incremental builds and file watching working with Docker Compose and Makefile! Adding hot reloading (with CSS injection) is totally doable by swapping out http-server for a tool that supports live reloading, and adjusting your setup to sync build artifacts in real-time. Here's how to modify your existing setup step by step:

1. Replace http-server with BrowserSync in your Dockerfile #

BrowserSync is perfect for this—it supports automatic page reloads for JS/HTML changes and injects CSS updates without full page refreshes. Update your dev stage in the Dockerfile:

FROM node:alpine as init
ADD package.json .
ADD package-lock.json .
FROM init as install
RUN npm install
FROM install AS build
ADD _javascript _javascript
ADD _sass _sass
ADD package.json .
ADD .babelrc .
RUN npm run deploy
FROM scratch as release
COPY --from=build /css /public
COPY --from=build /js /public
ADD index.html /public
FROM node:alpine as dev
# Replace http-server with browser-sync
RUN npm install --global browser-sync
# BrowserSync uses port 80 for the static server, 3000 for the control interface
EXPOSE 80 3000
# Command to start BrowserSync: watch all files in /public, disable auto-open/notify
CMD browser-sync start --server /public --port 80 --files "/public/**/*" --no-open --no-notify
# Remove the static copy from release—we'll mount local files instead
# COPY --from=release /public /public

2. Update Docker Compose to mount local build artifacts #

We need to sync your local public directory (where build artifacts live) with the container so BrowserSync can detect changes. Modify the dev service in your docker-compose.yml:

version: '3.7'
services:
  release:
    build:
      context: .
      target: release
    image: ${IMAGE_NAME?}:${IMAGE_TAG?}
  dev:
    build:
      context: .
      target: dev
    image: ${IMAGE_NAME?}/dev:${IMAGE_TAG?}
    ports:
      - "80:80"
      - "3000:3000"  # Optional: access BrowserSync's control panel at http://localhost:3000
    volumes:
      # Mount local public directory to container's /public
      - ./public:/public

3. Modify Makefile to sync build artifacts locally #

Your current build process generates artifacts inside the Docker build context—we need to copy those to your local public directory so the volume mount works. Update your Makefile:

.PHONY: all watch dev clean build-local

all: watch

# Watch for file changes and trigger dev workflow
watch:
	watchexec make dev

dev: build-local
	docker-compose build dev
	docker-compose up --remove-orphans --detach dev
	docker-compose ps

# Build artifacts and copy them to local public directory
build-local:
	mkdir -p public
	# Build the build stage and copy artifacts locally
	docker build --target build -t temp-build-image .
	docker create --name temp-build-container temp-build-image
	# Copy CSS, JS from build stage to local public
	docker cp temp-build-container:/css ./public/
	docker cp temp-build-container:/js ./public/
	docker rm temp-build-container
	# Copy local index.html to public
	cp index.html ./public/

clean:
	docker-compose down --remove-orphans
	rm -rf public

4. How it works now #

• Run make watch to start the live development workflow
• Any change to your source files (_javascript, _sass, Dockerfile, etc.) triggers make dev
• First, build-local runs: it uses Docker's cache to rebuild only changed parts of your code, then copies fresh artifacts to your local public directory
• The Docker Compose dev service mounts your local public directory, so BrowserSync immediately detects updated files
• CSS changes: BrowserSync injects new styles without reloading the entire page
• JS/HTML changes: BrowserSync triggers a full page reload automatically

Bonus: Optimize cache usage #

Keep your existing multi-stage build structure—this ensures Docker only rebuilds layers that depend on changed files. For example, if you only modify a .scss file, the install stage (which runs npm install) won't be rebuilt, saving you time on every change.

内容的提问来源于stack exchange，提问作者Soullivaneuh