template varnish config using gomplate

docker-compose.yml

@@ -1,21 +1,24 @@
-version: '3.8'
+version: '3.9'
 
 services:
-  app:
-    build: .
-    container_name: infra-map
-    ports:
-      - '3000:3000' # svelte-kit preview HTTP
   varnish:
-    build: varnish
+    build:
-    container_name: varnish-cache
+      context: varnish
+      dockerfile: Dockerfile
+      args:
+        HASS_HOST: 10.0.0.82
+        FRONTEND_HOST: app
     ports:
-      - '6081:6081' # Varnish HTTP
+      - '6081:6081'
+    depends_on:
+      - app
+
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    env_file: '.env'
     environment:
-      - VARNISH_LISTEN_PORT=6081
+      - NODE_ENV=production
-    command: >
+      - PORT=3000
-      varnishd
+      - ORIGIN=http://localhost:3000
-      -F
-      -f /etc/varnish/default.vcl
-      -s malloc,256m
-      -a :6081

src/lib/components/LiveImage.svelte

@@ -3,8 +3,7 @@
 	import { grey400x225 } from '$lib/utils/staticImageSource';
 	import Dialog from './Dialog.svelte';
 
-	const IMAGE_PROXY_URL = 'http://localhost:6081';
+	const IMAGE_REFRESH_INTERVAL = 3000;
-	const IMAGE_REFRESH_INTERVAL = 300;
 
 	let { imageUrl }: { imageUrl: string } = $props();
 	let lastUpdated = new Date();
@@ -17,10 +16,15 @@
 	function loadBlob(blob: Blob) {
 		const reader = new FileReader();
 		reader.onloadend = () => {
-			imageSource = reader.result || '';
 			const img = document.getElementById('live-image') as HTMLImageElement;
 			if (!img) return;
 
+			imageSource = reader?.result || '';
+			if (imageSource === '') {
+				console.log("no image data, returning")
+				return
+			}
+
 			// set imageSource to image element
 			img.src = `data:image/jpeg;base64; ${imageSource}`;
 			lastUpdated = new Date();
@@ -80,6 +84,7 @@
 	{:else}
 		<Dialog title="Live stream of printer" on:close={() => (fullscreen = false)}>
 			<img style="width: 100%;" src={String(imageSource)} id="live-image" />
+			<span>Last update {timestamp}s ago</span>
 		</Dialog>
 
 		<img src={String(grey400x225)} />

src/routes/+page.svelte

@@ -25,8 +25,6 @@
 		if (counter + 1 >= colors.length) counter = 1;
 		else counter += 1;
 
-		console.log(counter);
-
 		return {
 			bgColor: colors[counter - 1][0],
 			color: colors[counter - 1][1],
@@ -99,7 +97,6 @@
 		font-size: 1.1rem;
 		line-height: 1.4;
 		line-height: 1.7;
-		max-width: 80%;
 		color: #333;
 
 		background-color: #fafafa; /* Subtle background to separate it from the rest */

src/routes/cluster/[resource]/[uid]/+page.server.ts

@@ -13,7 +13,6 @@ const AVAILABLE_RESOURCES = [
 
 export const load: PageServerLoad = async ({ params }) => {
 	const { resource, uid } = params;
-	console.log('PARAMS:', params);
 
 	if (!AVAILABLE_RESOURCES.includes(resource)) {
 		return {

src/routes/cluster/[resource]/[uid]/logs/+server.ts

@@ -3,13 +3,11 @@ import { produce } from 'sveltekit-sse';
 
 export function GET({ request }) {
 	return produce(async function start({ emit }) {
-		console.log('----- REQUEST -----');
 		const url = new URL(request.url);
 		const pod = url.searchParams.get('pod');
 		const namespace = url.searchParams.get('namespace');
 		const container = url.searchParams.get('container');
 
-		console.log('pod, namespace:', pod, namespace);
 		const k8sLogs = createLogStream(pod, namespace, container);
 		k8sLogs.start();
 		const unsubscribe = k8sLogs.logEmitter.subscribe((msg: string) => {

src/routes/image-proxy/[...catchall]/+server.ts

@@ -23,7 +23,6 @@ async function fetchImage(src: string) {
 }
 
 export const GET: RequestHandler = async ({ url }) => {
-	console.log('GET');
 	url.pathname = url.pathname.replace('/image/', '');
 
 	const res = await fetchImage(url.href);

varnish/Dockerfile

@@ -21,7 +21,19 @@ RUN git clone https://github.com/varnish/libvmod-digest.git /opt/libvmod-digest
     ./configure VARNISHSRC=/usr/include/varnish && \
     make && make install
 
-COPY . /etc/varnish/
+COPY --from=hairyhenderson/gomplate:stable /gomplate /bin/gomplate
+
+ARG HASS_HOST
+ARG FRONTEND_HOST
+ENV HASS_HOST=$HASS_HOST
+ENV FRONTEND_HOST=$FRONTEND_HOST
+
+COPY default.vcl.tmpl /etc/varnish/
+COPY *.vcl /etc/varnish/
+COPY includes /etc/varnish/includes
+
+RUN gomplate -f /etc/varnish/default.vcl.tmpl -o /etc/varnish/default.vcl
+RUN rm /etc/varnish/default.vcl.tmpl
 
 EXPOSE 6081
 

varnish/default.vcl.tmpl

@@ -3,20 +3,18 @@ vcl 4.0;
 import std;
 import digest;
 
-# include "handlers/ttl-override-handler.vcl";
 include "includes/x-cache-header.vcl";
-
 include "vcl_deliver.vcl";
 
 # Define backend pointing to Home Assistant IP
 backend hass_backend {
-    .host = "10.0.0.82";
+    .host = "{{ getenv `HASS_HOST` `homeassistant.local` }}";
     .port = "8123";
 }
 
 backend app_frontend {
-    .host = "host.docker.internal";
+    .host = "{{ getenv `FRONTEND_HOST` `localhost` }}";
-    .port = "5173";
+    .port = "3000";
 }
 
 sub vcl_recv {