Phase 4: embed UI into kamado-api binary
The production image is now a single Go binary that serves both the JSON/WebSocket API under /api and the Svelte dashboard at /. - New internal/webui package embeds a dist/ subdir via //go:embed. A placeholder index.html is committed so `go build` works on a fresh checkout; anything else in dist/ is regenerated per build and gitignored. - httpapi.Server.Handler mounts the embed.FS at / with SPA-style fallback: unknown non-/api paths serve index.html so client-side routes survive a reload. /api/* is carved out explicitly so POSTs or typos never accidentally shadow API semantics with HTML. - api/Dockerfile grows a node:22 builder stage that runs `npm ci && npm run build`, and the Go stage copies ui/dist/ into internal/webui/dist/ before `go build`. Build context moves to the repo root (docker-compose + `make api` both updated) so the Dockerfile can see both api/ and ui/. With this in place, `make up` brings the whole stack online at http://localhost:8080 — API under /api, dashboard at /. The Vite dev server on :5173 with the /api proxy is still available via `make ui-dev` for hot-reload development.
This commit is contained in:
satoshi
+41
-8
@@ -1,24 +1,57 @@
|
||||
# ============================================================================
|
||||
# kamado-api build stage
|
||||
# kamado-api build
|
||||
#
|
||||
# Stage 1 (ui): Build the Svelte dashboard to ui/dist.
|
||||
# Stage 2 (go): Build the Go binary, embedding the UI via //go:embed.
|
||||
# Stage 3 (run): Minimal debian with tini and the static binary.
|
||||
#
|
||||
# The build context for this Dockerfile is the ./api directory by
|
||||
# default, which is fine for stage 2. But stage 1 needs the ui/
|
||||
# directory from the repo root. docker-compose sets `context: .` at
|
||||
# the repo root and `dockerfile: api/Dockerfile` to make both visible;
|
||||
# for plain `docker build ./api`, set --build-context repo=..
|
||||
# ============================================================================
|
||||
|
||||
# ----------------------------------------------------------------------------
|
||||
# Stage 1: build the Svelte dashboard
|
||||
# ----------------------------------------------------------------------------
|
||||
FROM node:22-bookworm-slim AS ui
|
||||
|
||||
WORKDIR /ui
|
||||
# Copy just the manifest first so npm install is cached across code
|
||||
# edits. The build context must be the repo root — docker-compose
|
||||
# uses `context: .`, and `make api` invokes docker build with the
|
||||
# repo root as context.
|
||||
COPY ui/package.json ./
|
||||
RUN npm install --no-audit --no-fund
|
||||
|
||||
COPY ui/ ./
|
||||
RUN npm run build
|
||||
|
||||
# ----------------------------------------------------------------------------
|
||||
# Stage 2: build the Go binary with the UI embedded
|
||||
# ----------------------------------------------------------------------------
|
||||
FROM golang:1.22-bookworm AS build
|
||||
|
||||
WORKDIR /src
|
||||
# Cache deps first
|
||||
COPY go.mod ./
|
||||
COPY api/go.mod ./
|
||||
RUN go mod download 2>/dev/null || true
|
||||
COPY . .
|
||||
COPY api/ .
|
||||
|
||||
# Drop the built dashboard into the embed target before `go build` so
|
||||
# //go:embed picks it up. We delete the committed placeholder first.
|
||||
RUN rm -rf internal/webui/dist && mkdir -p internal/webui/dist
|
||||
COPY --from=ui /ui/dist/ internal/webui/dist/
|
||||
|
||||
# Static build — CGO off, stripped, reproducible-ish
|
||||
RUN CGO_ENABLED=0 GOOS=linux go build \
|
||||
-trimpath \
|
||||
-ldflags="-s -w" \
|
||||
-o /out/kamado-api \
|
||||
./cmd/kamado-api
|
||||
|
||||
# ============================================================================
|
||||
# Runtime: distroless-ish minimal
|
||||
# ============================================================================
|
||||
# ----------------------------------------------------------------------------
|
||||
# Stage 3: runtime
|
||||
# ----------------------------------------------------------------------------
|
||||
FROM debian:bookworm-slim AS runtime
|
||||
|
||||
RUN apt-get update && apt-get install --no-install-recommends -y \
|
||||
|
||||
@@ -4,10 +4,14 @@ package httpapi
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"errors"
|
||||
"io/fs"
|
||||
"log/slog"
|
||||
"net/http"
|
||||
"strings"
|
||||
|
||||
"github.com/kamadopool/kamado-api/internal/state"
|
||||
"github.com/kamadopool/kamado-api/internal/webui"
|
||||
)
|
||||
|
||||
type Server struct {
|
||||
@@ -20,7 +24,9 @@ func New(agg *state.Aggregator, log *slog.Logger) *Server {
|
||||
return &Server{Agg: agg, Hub: NewHub(), Log: log}
|
||||
}
|
||||
|
||||
// Handler returns an http.Handler with all kamado routes mounted under /api.
|
||||
// Handler returns an http.Handler with all kamado routes mounted under
|
||||
// /api and the embedded Svelte dashboard served under /. Unknown
|
||||
// non-/api paths fall back to index.html for SPA-style routing.
|
||||
func (s *Server) Handler() http.Handler {
|
||||
mux := http.NewServeMux()
|
||||
mux.HandleFunc("GET /api/health", s.health)
|
||||
@@ -31,9 +37,47 @@ func (s *Server) Handler() http.Handler {
|
||||
mux.HandleFunc("GET /api/blocks", s.blocks)
|
||||
mux.HandleFunc("GET /api/snapshot", s.snapshot)
|
||||
mux.HandleFunc("GET /api/ws", s.handleWS)
|
||||
mux.Handle("/", spaHandler(webui.FS()))
|
||||
return mux
|
||||
}
|
||||
|
||||
// spaHandler serves static files from the embedded dist tree and
|
||||
// falls back to index.html on 404 so client-side routing works. It
|
||||
// refuses anything under /api to keep the contract with mux patterns
|
||||
// explicit (those routes register their own handlers above).
|
||||
func spaHandler(root fs.FS) http.Handler {
|
||||
fileServer := http.FileServerFS(root)
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
// Defence-in-depth — /api routes are matched by the mux first
|
||||
// with their GET patterns, but a bare POST /api/... would fall
|
||||
// through here. Return 404 so we don't accidentally shadow
|
||||
// API semantics with HTML.
|
||||
if strings.HasPrefix(r.URL.Path, "/api/") || r.URL.Path == "/api" {
|
||||
http.NotFound(w, r)
|
||||
return
|
||||
}
|
||||
|
||||
// Fast path: exact file exists in the embed.
|
||||
clean := strings.TrimPrefix(r.URL.Path, "/")
|
||||
if clean == "" {
|
||||
clean = "index.html"
|
||||
}
|
||||
if _, err := fs.Stat(root, clean); err == nil {
|
||||
fileServer.ServeHTTP(w, r)
|
||||
return
|
||||
} else if !errors.Is(err, fs.ErrNotExist) {
|
||||
http.Error(w, "webui: "+err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
// SPA fallback: serve index.html with a 200 so reloads on a
|
||||
// client-side route don't 404.
|
||||
r2 := r.Clone(r.Context())
|
||||
r2.URL.Path = "/"
|
||||
fileServer.ServeHTTP(w, r2)
|
||||
})
|
||||
}
|
||||
|
||||
func writeJSON(w http.ResponseWriter, status int, v any) {
|
||||
w.Header().Set("Content-Type", "application/json; charset=utf-8")
|
||||
w.Header().Set("Cache-Control", "no-store")
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
# Build artifacts from `make ui` / the Dockerfile's node stage land
|
||||
# here during `go build`. Only the placeholder index.html (tracked)
|
||||
# and this .gitignore are kept in source control; everything else is
|
||||
# regenerated per build.
|
||||
*
|
||||
!.gitignore
|
||||
!index.html
|
||||
Vendored
+55
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Kamado Pool — UI not built</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: #0b0e14;
|
||||
color: #e6e9ef;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.card {
|
||||
background: #151a24;
|
||||
border: 1px solid #232a3a;
|
||||
border-radius: 10px;
|
||||
padding: 2rem 2.5rem;
|
||||
max-width: 32rem;
|
||||
}
|
||||
h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
code {
|
||||
background: #11151d;
|
||||
padding: 0.15em 0.4em;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, Menlo, monospace;
|
||||
}
|
||||
a {
|
||||
color: #ff7a3a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h1>🔥 Kamado Pool — UI not built</h1>
|
||||
<p>
|
||||
This is the placeholder shipped inside <code>kamado-api</code> when
|
||||
the Svelte dashboard hasn't been built yet. Run
|
||||
<code>make ui && make api</code> (or build the Docker image,
|
||||
which does it automatically) to embed the real dashboard.
|
||||
</p>
|
||||
<p>
|
||||
The JSON API is still fully available at
|
||||
<a href="/api/snapshot">/api/snapshot</a>,
|
||||
<a href="/api/health">/api/health</a>, etc.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
// Package webui embeds the built Svelte dashboard into the kamado-api
|
||||
// binary so the production image is a single Go binary plus ckpool.
|
||||
//
|
||||
// The `dist/` subdirectory is populated at build time:
|
||||
//
|
||||
// - `make api` (local) runs `make ui` first and copies ui/dist/*
|
||||
// into api/internal/webui/dist/ before `go build`.
|
||||
// - The api Dockerfile has a node builder stage that does the same
|
||||
// inside the image build.
|
||||
//
|
||||
// A placeholder index.html is committed so `go build` succeeds on a
|
||||
// fresh checkout without anyone having run `make ui` — it just shows
|
||||
// a "UI not built" notice instead of the real dashboard.
|
||||
package webui
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"io/fs"
|
||||
)
|
||||
|
||||
// `//go:embed dist` (without `all:`) skips dot-prefixed files, which
|
||||
// means the .gitignore we use to untrack build artifacts in this
|
||||
// directory doesn't end up baked into the binary.
|
||||
//
|
||||
//go:embed dist
|
||||
var distFS embed.FS
|
||||
|
||||
// FS returns the embedded dist directory as a sub-filesystem so
|
||||
// callers can pass it directly to http.FileServerFS.
|
||||
func FS() fs.FS {
|
||||
sub, err := fs.Sub(distFS, "dist")
|
||||
if err != nil {
|
||||
// Only possible if the "dist" directory literally does not
|
||||
// exist in the embed, which is a build-time error we'd see
|
||||
// before the binary ran.
|
||||
panic("webui: embedded dist missing: " + err.Error())
|
||||
}
|
||||
return sub
|
||||
}
|
||||
Reference in New Issue
Block a user