Add Docker Compose with watch mode

Author: clue

.github/workflows/ci.yml

@@ -19,9 +19,14 @@ jobs:
           php-version: ${{ matrix.php }}
           coverage: none
       - run: make
-      - run: make served
+      - run: docker compose build
+      - run: docker compose up -d
       - run: bash tests/await.bash http://clue.localhost/
       - run: make test
+      - run: docker compose stop -t 60
+        timeout-minutes: 0.5
+      - run: docker compose logs
+        if: ${{ always() }}
       - run: git config --global user.name "GitHub Actions" && git config --global user.email "[email protected]"
       - run: git config --global url."https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/".insteadOf "https://github.com/"
       - run: make deploy

.gitignore

@@ -1,3 +1,2 @@
 /vendor/
 /build/
-/tailwindcss

Dockerfile

@@ -0,0 +1,22 @@
+# syntax=docker/dockerfile:1
+FROM composer:2 AS composer
+WORKDIR /app/
+COPY composer.json composer.lock ./
+RUN composer install --ignore-platform-reqs --optimize-autoloader
+
+FROM scratch AS tailwind
+WORKDIR /app/
+ADD --checksum=sha256:cd52e757cb0bd15238f0207a215198d924811234028d056b7be39fde70491296 --chmod=0755 \
+    https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.4/tailwindcss-linux-x64 /usr/local/bin/tailwindcss
+ENTRYPOINT ["tailwindcss"]
+
+FROM php:8.1-apache AS build
+WORKDIR /app/
+COPY --from=composer /app/vendor/ vendor/
+COPY app/ app/
+COPY www/ www/
+RUN vendor/bin/sculpin generate
+
+FROM php:8.1-apache
+RUN ln -s /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled
+COPY --from=build /app/build/ /var/www/html/

Makefile

@@ -5,21 +5,10 @@ vendor: composer.json composer.lock
 	composer install
 	touch $@
 
-www/src/tailwind.min.css: www/_layouts/* www/_posts/* www/_talks/* www/*.html www/*.html.twig tailwindcss tailwind.config.js
-	./tailwindcss -o $@ --minify
+www/src/tailwind.min.css: www/_layouts/* www/_posts/* www/_talks/* www/*.html www/*.html.twig tailwind.config.js
+	docker compose run --rm --build tailwind -o $@ --minify
 	touch $@
 
-tailwindcss:
-	test -x tailwindcss || curl -L https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.4/tailwindcss-linux-x64 > tailwindcss && chmod +x tailwindcss
-
-serve: build
-	docker run -it --rm -p 80:80 -v "$$PWD"/build/:/var/www/html/ php:8.1-apache sh -c "ln -s /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled; apache2-foreground"
-
-served: build
-	docker run -d --rm -p 80:80 -v "$$PWD"/build/:/var/www/html/ php:8.1-apache sh -c "ln -s /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled; apache2-foreground"
-	@sleep 2
-	@echo Container running. Use \"docker rm -f {containerId}\" to stop container.
-
 test:
 	bash tests/integration.bash http://clue.localhost/
 	test -z "$$(git status --porcelain)" || (echo Directory is dirty && git status && exit 1)
@@ -33,6 +22,7 @@ deploy:
 	git -C build/ push origin live -f
 
 clean:
-	rm -rf build/ vendor/ tailwindcss
+	rm -rf build/ vendor/
+	docker compose down --remove-orphans --rmi local
 
-.PHONY: build serve served test deploy clean
+.PHONY: build test deploy clean

README.md

@@ -5,27 +5,31 @@
 
 Source code for the https://clue.engineering/ website.
 
-## Build
+## Development
+
+### Build
 
 You can build the website like this:
 
 ```bash
 make
 ```
 
+### Run
+
 Once built, you can manually browse the `build/` directory or run the web server
 container (Apache) in the foreground like this:
 
 ```bash
-make serve
+docker compose up --build --watch
 ```
 
-Alternatively, you may also run the web server container (Apache) as a
-background daemon like this:
+> Once running, you can now access http://clue.localhost/ in your web browser.
+> If you want to run this on a different port, you may pass the `PORT`
+> environment variable like `PORT=8080 docker compose up`.
+> To run the container in the background, you may use the `docker compose up -d` command.
 
-```bash
-make served
-```
+### Tests
 
 Once running, you can run some integration tests that check correct paths etc.
 like this:
@@ -41,6 +45,8 @@ make test
 > tests/integration.bash http://clue.localhost/
 > ```
 
+### Cleanup
+
 Once done, you can clean up like this:
 
 ```bash

compose.yaml

@@ -0,0 +1,34 @@
+services:
+  # main apache service running the full website
+  apache:
+    build: .
+    ports:
+      - ${PORT:-80}:80
+    restart: unless-stopped
+    develop:
+      watch:
+        - path: app/
+          action: rebuild
+        - path: www/
+          action: rebuild
+        - path: composer.lock
+          action: rebuild
+        - path: Dockerfile
+          action: rebuild
+
+  # tailwind dev sidecar to watch and recompile CSS on demand
+  tailwind:
+    build:
+      context: .
+      target: tailwind
+    command: --watch -o www/src/tailwind.min.css --minify
+    restart: unless-stopped
+    stdin_open: true
+    stop_signal: SIGKILL
+    volumes:
+      - ./tailwind.config.js:/app/tailwind.config.js:ro
+      - ./www:/app/www:rw
+    develop:
+      watch:
+        - path: Dockerfile
+          action: rebuild