mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Alaister Young
3bac7165bd
Moves the Studio TanStack Start build off the hand-rolled Vercel setup (an `api/server.js` function shim, rewrites in `vercel.ts`, a custom `?dpl=` skew-protection Vite plugin, and `scripts/serve.js` for self-hosted) and onto Nitro, which TanStack Start documents as its deployment path. Documents are served from the static SPA shell on the CDN; only `/api/*` and `/_serverFn/*` invoke the function. **Removed:** - `api/server.js`, `scripts/serve.js`, `scripts/smoke-server.mjs` - The `skewProtectionDpl` Vite plugin, `renderBuiltUrl`, and the `vite:preloadError` reload backstop in `router.tsx` (TanStack Router already reloads once on a failed lazy import) - Rewrites, `functions`, `outputDirectory`, and `cleanUrls` from `vercel.ts` (redirects and headers stay) - `magic-string` and `@jridgewell/remapping` devDependencies, the `preview` script **Added:** - `nitro` plugin in `vite.config.ts`. Preset is auto-detected: `.vercel/output` on Vercel, a self-contained node server in `.output` everywhere else. `vercel.immutableStaticFiles` puts hashed chunks under `/_vercel/immutable/` so tabs opened before a redeploy keep loading their chunks; `functions.maxDuration: 300` carries over the old function timeout - `scripts/vercel-spa-routes.ts`: Nitro module that rewrites the generated Build Output routes (documents -> `_shell.html`, allow-list -> `__server`, missing chunk -> 404, base-path prefixes), with a unit test - `server.ts`: TanStack Start server entry that initializes Sentry before the route tree loads and wraps the handler with `wrapFetchWithSentry` **Changed:** - `start:tanstack` runs `.output/server/index.mjs` directly with Node's `--env-file-if-exists` for the `.env` cascade. Node doesn't expand `$VAR` references, so `scripts/generateLocalEnv.js` now writes literal values into `.env.test` - Dockerfile's TanStack stage copies `.output` instead of running `pnpm deploy`; the `server.js` shim loads `.env` and imports the Nitro server - `NEXT_PUBLIC_BASE_PATH` (the platform's `/dashboard`) only sets the router basepath; Vite's `base` stays at the root so chunks can use the immutable store. The routes module emits prefixed rules for `/dashboard/api/*` and `/dashboard/_serverFn/*` and rewrites `public/` files requested under the prefix back to the root - Self-hosted security headers come from a Nitro `routeRules` entry; on Vercel they stay in `vercel.ts` - `tslib` is inlined for the build only: Nitro's dev runner has no interop for its CJS wrapper - Monaco's worker chunks follow the client assets dir so they land in the immutable store too Verified on the `studio-staging` preview (`STUDIO_FRAMEWORK=tanstack` is scoped to this branch there): documents come back as the static shell, `/dashboard/api/*` hits the function, `public/` files resolve under the prefix, a missing immutable chunk 404s. Across two deployments of this branch, the older deployment's chunks still load from the immutable store and requests carrying its `__vdpl` cookie are answered by that deployment. Self-hosted path covered by the TanStack E2E job and the Docker build job. ## To test - On the `studio-staging` preview: `/dashboard/project/<ref>` should show `content-disposition: inline; filename="_shell.html"` and a single-region `x-vercel-id`; `/dashboard/api/get-utc-time` a two-region id - Sign in and click through a few pages, including one that opens Monaco (SQL editor) so the worker chunks load - After the next deploy, a tab left open on the previous one should still navigate (lazy chunks) and call the API without errors - Self-hosted: `STUDIO_FRAMEWORK=tanstack pnpm --filter studio build && pnpm --filter studio start`, then check `/api/platform/profile` and that responses carry the security headers <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Production TanStack deployments now run on Nitro’s self-contained server output. * Vercel routing serves static pages first while directing API and server-function requests appropriately. * Server-function requests can include deployment identification for consistent handling. * Local environment generation now writes resolved configuration values. * **Bug Fixes** * Improved handling of missing static assets and SPA fallback routing. * Server-side error monitoring now captures request errors in the new runtime. * **Refactor** * Replaced the legacy production server and smoke-test workflow with Nitro-based startup. * Removed automatic reload handling for stale client assets. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
103 lines
4.1 KiB
Docker
103 lines
4.1 KiB
Docker
# To be run in the root of the turbo monorepo
|
|
# NOTE: It's highly recommended to use the new builder, Buildkit. https://docs.docker.com/build/buildkit/
|
|
## USAGE:
|
|
# Build (Next): docker build . -f apps/studio/Dockerfile --target production -t studio:latest
|
|
# Build (TanStack): docker build . -f apps/studio/Dockerfile --target production -t studio:latest --build-arg STUDIO_FRAMEWORK=tanstack
|
|
# Run: docker run -p 3000:3000 supabase/studio
|
|
# Deploy: docker push supabase/studio:latest
|
|
# Clean build:
|
|
# docker builder prune
|
|
# docker build . -f apps/studio/Dockerfile --target production -t studio:latest --no-cache
|
|
|
|
# Which framework's build ends up in the image. This is the same variable
|
|
# scripts/dispatch.js keys on for the dev/build/start scripts, so
|
|
# `--build-arg STUDIO_FRAMEWORK=tanstack` is the docker spelling of the
|
|
# switch used everywhere else. Framework selection happens at image build
|
|
# time (the two runtimes need different build outputs and dependency
|
|
# trees), not at container start.
|
|
ARG STUDIO_FRAMEWORK=next
|
|
|
|
FROM node:22-slim AS base
|
|
ENV PNPM_HOME="/pnpm"
|
|
ENV PATH="$PNPM_HOME:$PATH"
|
|
|
|
# Fixes issues with Sentry CLI and SSL certificates during build
|
|
# TODO: Git is added because it's needed to build libpg, remove it once they publish a binary on the S3 bucket
|
|
RUN apt-get update -qq && \
|
|
apt-get install -y --no-install-recommends \
|
|
git \
|
|
python3 \
|
|
ca-certificates \
|
|
build-essential && \
|
|
rm -rf /var/lib/apt/lists/* && \
|
|
update-ca-certificates
|
|
|
|
RUN npm install -g pnpm@11.13.1
|
|
|
|
WORKDIR /app
|
|
|
|
# Prune unneeded dependencies with turbo (from apps/ for example)
|
|
FROM base AS turbo
|
|
COPY . .
|
|
|
|
RUN pnpm dlx turbo@2.9.14 prune studio --docker
|
|
|
|
# Install dev dependencies (only if needed)
|
|
FROM base AS deps
|
|
COPY --from=turbo /app/out/json ./
|
|
COPY --from=turbo /app/out/pnpm-lock.yaml ./
|
|
COPY ./patches/ ./patches
|
|
|
|
# No need to clean cache because production uses standalone build
|
|
RUN pnpm install --frozen-lockfile
|
|
|
|
# dev contains dependencies and source code not compiled
|
|
FROM deps AS dev
|
|
COPY --from=turbo /app/out/full ./
|
|
ENTRYPOINT ["docker-entrypoint.sh"]
|
|
EXPOSE 8082
|
|
CMD ["pnpm", "dev:studio"]
|
|
|
|
# Compile Next.js
|
|
FROM dev AS build-next
|
|
RUN pnpm --filter studio exec next build
|
|
|
|
# Assemble the runtime tree at /srv in the layout the production stage
|
|
# serves from: Next's self-contained standalone output is the app root,
|
|
# with the static assets and public/ laid alongside it.
|
|
RUN mkdir -p /srv && \
|
|
cp -a apps/studio/.next/standalone/. /srv/ && \
|
|
mkdir -p /srv/apps/studio/.next && \
|
|
cp -a apps/studio/.next/static /srv/apps/studio/.next/static && \
|
|
cp -a apps/studio/public /srv/apps/studio/public
|
|
|
|
# Compile TanStack Start (Vite + Nitro)
|
|
FROM dev AS build-tanstack
|
|
RUN NODE_OPTIONS=--max-old-space-size=4096 pnpm --filter studio run build:tanstack
|
|
|
|
# Assemble the runtime tree at /srv. Nitro's node-server output is
|
|
# self-contained (`.output/server` bundles the app with its traced
|
|
# dependencies, `.output/public` holds the client assets), so no node_modules
|
|
# install is needed. The server.js shim loads `.env` (container env vars win)
|
|
# and gives the production stage one CMD for both frameworks; package.json is
|
|
# copied so the shim runs as ESM.
|
|
RUN mkdir -p /srv/apps/studio && \
|
|
cp -a apps/studio/.output /srv/apps/studio/.output && \
|
|
cp apps/studio/package.json apps/studio/.env /srv/apps/studio/ && \
|
|
printf "process.loadEnvFile(new URL('.env', import.meta.url))\nawait import('./.output/server/index.mjs')\n" > /srv/apps/studio/server.js
|
|
|
|
# Alias whichever framework build was selected so the production stage can
|
|
# COPY from a single stage name. BuildKit only builds the selected branch.
|
|
FROM build-${STUDIO_FRAMEWORK} AS build
|
|
|
|
# Copy only compiled code and dependencies
|
|
FROM base AS production
|
|
COPY --from=build /srv ./
|
|
# Both servers read PORT (the TanStack `start` script defaults it to 8082);
|
|
# pin it to the port the healthcheck and compose files expect.
|
|
ENV PORT=3000
|
|
EXPOSE 3000
|
|
ENTRYPOINT ["docker-entrypoint.sh"]
|
|
HEALTHCHECK --interval=5s --timeout=5s --retries=3 CMD node -e "fetch('http://localhost:3000/api/platform/profile').then((r) => {if (r.status !== 200) throw new Error(r.status)})"
|
|
CMD ["node", "apps/studio/server.js"]
|