mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-10-15 18:14:44 +00:00
Compare commits
1 Commits
feat/auth-
...
4105914633
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4105914633 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -507,3 +507,4 @@ web/test-results/frontend/playwright-storybook.xml
|
||||
|
||||
# mkdocs build output
|
||||
/site
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@ no data flowing over them.
|
||||
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **Dev network** (`devnet`, bridge) | Internal DNS resolves service names such as `sqlserver` and `api.core`. Volumes: `sqlserverdata-dev`, `nuget-cache-dev`, `seaweedfsdata-dev`. Startup order: SQL Server (health check) → migrations (run-once) → seed (run-once, depends on `seaweedfs`) → API (long-running, depends on seed). |
|
||||
| **Test network** (`testnet`, bridge) | All test components are isolated; fresh DB instance each run (`CLEAR_DATABASE=true`, ephemeral `sqlserverdata-test` / `seaweedfsdata-test` volumes). `api.specs`, `unit.tests`, and `frontend.tests` all run as separate containers, in parallel once seeding completes; results are aggregated. |
|
||||
| **Prod network** (`prodnet`, bridge) | Isolated from dev/test networks. Volumes: `sqlserverdata-prod`, `nuget-cache-prod`. No seed step in production. |
|
||||
| **Prod network** (`prodnet`, bridge) | Isolated from dev/test networks. Volumes: `biergartendata-prod` and `seaweedfsdata-prod` (both external, so `down -v` keeps them), plus `nuget-cache-prod`. Startup order matches dev: SQL Server (health check) → migrations → seed → API → frontend, with `frontend` the only service publishing a host port. |
|
||||
| **Database-only environment** | Same devnet volumes/images as `docker-compose.dev.yaml`, minus `api.core`, `frontend`, and `mailpit` — for working against the database (and object storage, since `seaweedfs` is still included) without running the API or website. |
|
||||
| **Minimal environment** | Database + migrations + seed + `seaweedfs` + mailpit, no API or frontend container — for frontend development against an `API.Core` process run outside Docker. |
|
||||
| `unit.tests` | Builds `Dockerfile.tests`, which restores/builds against `Biergarten.API.slnx` and then runs `dotnet test` for every `Features/*.Tests` project in turn (`Features.Users.Tests`, `Features.Breweries.Tests`, `Features.Emails.Tests`, `Features.PhotoUpload.Tests`), mocking each handler's repository/service dependencies with Moq — no real database needed. |
|
||||
|
||||
@@ -137,24 +137,56 @@ containers, which would end the run prematurely. See
|
||||
- Health checks enabled
|
||||
- Restart policies (unless-stopped)
|
||||
- Security hardening
|
||||
- Only `frontend` publishes a port to the host; `sqlserver` and `api.core` are
|
||||
- Only `frontend` publishes a port to the host, bound to `127.0.0.1` so a reverse
|
||||
proxy can sit in front of it; `sqlserver`, `api.core` and `seaweedfs` are
|
||||
reachable only from other containers on `prodnet`
|
||||
- Seeded catalogue, with its AI-generated origin disclosed in the app. See
|
||||
[Production data](#production-data) below.
|
||||
|
||||
**Services**:
|
||||
|
||||
```yaml
|
||||
sqlserver # Production SQL Server (internal only)
|
||||
database.migrations # Schema updates only
|
||||
database.seed # Loads the catalogue, runs once
|
||||
api.core # Production API (internal only, no published ports)
|
||||
frontend # Production website (port 3000, the only public binding)
|
||||
seaweedfs # S3-compatible object storage (internal only)
|
||||
frontend # Production website (127.0.0.1:5656, the only host binding)
|
||||
```
|
||||
|
||||
**Deploy Production**:
|
||||
|
||||
```bash
|
||||
# One time, before the first `up`: the data volumes are external, so Compose
|
||||
# expects them to exist already.
|
||||
docker volume create biergartendata-prod
|
||||
docker volume create seaweedfsdata-prod
|
||||
|
||||
docker compose --env-file web/.env.prod -f web/docker-compose.prod.yaml up -d
|
||||
```
|
||||
|
||||
Docker seeds each volume with the ownership the image expects and labels it for
|
||||
SELinux, so the host needs no `chown` and no `:z`/`:Z` mount options on
|
||||
enforcing distributions such as RHEL, AlmaLinux and Fedora.
|
||||
|
||||
#### Production data
|
||||
|
||||
Production runs `database.seed`, so the catalogue it serves is the AI-generated
|
||||
fixture data produced by the pipeline. Per
|
||||
[Pipeline ethics, bias, and known issues](../pipeline/ETHICS-AND-KNOWN-ISSUES.md),
|
||||
anyone interacting with an application seeded from it has to be told upfront that
|
||||
the content is AI-generated.
|
||||
|
||||
The website meets that obligation with `AiDisclosureDialog`
|
||||
(`web/frontend/app/features/disclosure/components/AiDisclosureDialog.tsx`), which
|
||||
the root route renders on every full page load, whichever route the visitor lands
|
||||
on. It is part of the server-rendered HTML rather than mounted after hydration, so
|
||||
the disclosure is on screen with the first paint. Acknowledging it hides the
|
||||
dialog for the remainder of that page load; a new load shows it again.
|
||||
|
||||
Keep `database.seed` and the dialog together. A production deployment that seeds
|
||||
the catalogue without the disclosure does not satisfy the ethics documentation.
|
||||
|
||||
### 4. Database only (`docker-compose.db.yaml`)
|
||||
|
||||
**Purpose**: Run just the database for local backend development outside Docker
|
||||
@@ -255,9 +287,12 @@ api.core:
|
||||
|
||||
**Production**:
|
||||
|
||||
- `sqlserverdata-prod` - Production database files
|
||||
- `biergartendata-prod` - Database files, external; survives `down -v`
|
||||
- `seaweedfsdata-prod` - SeaweedFS object storage, external; survives `down -v`
|
||||
- `nuget-cache-prod` - Production NuGet cache
|
||||
|
||||
See [Production data volumes](#production-data-volumes).
|
||||
|
||||
### Mounted volumes
|
||||
|
||||
**Test Results**:
|
||||
@@ -269,6 +304,40 @@ volumes:
|
||||
|
||||
Test results are written to host filesystem for CI/CD integration.
|
||||
|
||||
### Production data volumes
|
||||
|
||||
`biergartendata-prod` and `seaweedfsdata-prod` are declared `external: true`.
|
||||
Compose removes only the volumes it owns, so `docker compose down -v` tears the
|
||||
stack down and leaves the database and the uploaded photos in place. Deleting
|
||||
them takes an explicit `docker volume rm`.
|
||||
|
||||
The trade-off is that Compose creates neither one, and `up` fails with a clear
|
||||
error until both exist — hence the `docker volume create` step in
|
||||
[Deploy Production](#3-production-docker-composeprodyaml). External volumes also
|
||||
carry their literal name rather than a `<project>_` prefix, which is why
|
||||
`docker volume ls` shows `biergartendata-prod` next to `web_nuget-cache-prod`.
|
||||
|
||||
Both live under `/var/lib/docker/volumes`. To put them on a specific disk, point
|
||||
the daemon's `data-root` at it in `/etc/docker/daemon.json`, or mount the disk at
|
||||
`/var/lib/docker`.
|
||||
|
||||
Back up the database through SQL Server rather than by copying its files, since a
|
||||
file copy taken while the engine is running can be torn:
|
||||
|
||||
```bash
|
||||
docker exec prod-env-sqlserver /opt/mssql-tools18/bin/sqlcmd \
|
||||
-S localhost -U sa -P '<db-password>' -C \
|
||||
-Q "BACKUP DATABASE [<db-name>] TO DISK = '/var/opt/mssql/data/backup.bak'"
|
||||
docker cp prod-env-sqlserver:/var/opt/mssql/data/backup.bak .
|
||||
```
|
||||
|
||||
Object storage can be archived directly, with the stack stopped:
|
||||
|
||||
```bash
|
||||
docker run --rm -v seaweedfsdata-prod:/data -v "$PWD:/backup" \
|
||||
alpine tar czf /backup/seaweedfs.tar.gz -C /data .
|
||||
```
|
||||
|
||||
## Networks
|
||||
|
||||
Each environment uses isolated bridge networks:
|
||||
|
||||
@@ -6,10 +6,10 @@ services:
|
||||
container_name: prod-env-sqlserver
|
||||
environment:
|
||||
ACCEPT_EULA: "Y"
|
||||
SA_PASSWORD: "${DB_PASSWORD}"
|
||||
MSSQL_SA_PASSWORD: "${DB_PASSWORD}"
|
||||
MSSQL_PID: "Express"
|
||||
volumes:
|
||||
- sqlserverdata-prod:/var/opt/mssql
|
||||
- biergartendata-prod:/var/opt/mssql
|
||||
healthcheck:
|
||||
test:
|
||||
[
|
||||
@@ -46,13 +46,44 @@ services:
|
||||
networks:
|
||||
- prodnet
|
||||
|
||||
database.seed:
|
||||
env_file: ".env.prod"
|
||||
image: database.seed
|
||||
container_name: prod-env-database-seed
|
||||
depends_on:
|
||||
database.migrations:
|
||||
condition: service_completed_successfully
|
||||
seaweedfs:
|
||||
condition: service_started
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: Database/Database.Seed/Dockerfile
|
||||
args:
|
||||
BUILD_CONFIGURATION: Release
|
||||
APP_UID: 1000
|
||||
environment:
|
||||
DOTNET_RUNNING_IN_CONTAINER: "true"
|
||||
DB_SERVER: "${DB_SERVER}"
|
||||
DB_NAME: "${DB_NAME}"
|
||||
DB_USER: "${DB_USER}"
|
||||
DB_PASSWORD: "${DB_PASSWORD}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
restart: "no"
|
||||
networks:
|
||||
- prodnet
|
||||
|
||||
api.core:
|
||||
env_file: ".env.prod"
|
||||
image: api.core
|
||||
container_name: prod-env-api-core
|
||||
depends_on:
|
||||
sqlserver:
|
||||
condition: service_healthy
|
||||
database.seed:
|
||||
condition: service_completed_successfully
|
||||
seaweedfs:
|
||||
condition: service_started
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: API/API.Core/Dockerfile
|
||||
@@ -73,12 +104,32 @@ services:
|
||||
REFRESH_TOKEN_SECRET: "${REFRESH_TOKEN_SECRET}"
|
||||
CONFIRMATION_TOKEN_SECRET: "${CONFIRMATION_TOKEN_SECRET}"
|
||||
WEBSITE_BASE_URL: "${WEBSITE_BASE_URL}"
|
||||
SEAWEEDFS_SERVICE_URL: "${SEAWEEDFS_SERVICE_URL}"
|
||||
SEAWEEDFS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
SEAWEEDFS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
SEAWEEDFS_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- prodnet
|
||||
volumes:
|
||||
- nuget-cache-prod:/root/.nuget/packages
|
||||
|
||||
seaweedfs:
|
||||
env_file: ".env.prod"
|
||||
image: chrislusf/seaweedfs
|
||||
container_name: prod-env-seaweedfs
|
||||
# No published ports: the S3 API, filer, master and admin UIs are reachable
|
||||
# only from other containers on prodnet.
|
||||
environment:
|
||||
AWS_ACCESS_KEY_ID: "${SEAWEEDFS_ACCESS_KEY_ID}"
|
||||
AWS_SECRET_ACCESS_KEY: "${SEAWEEDFS_SECRET_ACCESS_KEY}"
|
||||
S3_BUCKET: "${SEAWEEDFS_BUCKET}"
|
||||
volumes:
|
||||
- seaweedfsdata-prod:/data
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- prodnet
|
||||
|
||||
frontend:
|
||||
env_file: ".env.prod"
|
||||
image: frontend
|
||||
@@ -90,10 +141,10 @@ services:
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "3000:3000"
|
||||
- "127.0.0.1:5656:5656"
|
||||
environment:
|
||||
NODE_ENV: "production"
|
||||
PORT: "3000"
|
||||
PORT: "5656"
|
||||
API_BASE_URL: "http://api.core:8080"
|
||||
SESSION_SECRET: "${SESSION_SECRET}"
|
||||
restart: unless-stopped
|
||||
@@ -101,8 +152,13 @@ services:
|
||||
- prodnet
|
||||
|
||||
volumes:
|
||||
sqlserverdata-prod:
|
||||
driver: local
|
||||
# Declared external so `docker compose down -v` leaves the data alone: Compose
|
||||
# removes only the volumes it owns. Create them once with `docker volume
|
||||
# create` before the first `up`.
|
||||
biergartendata-prod:
|
||||
external: true
|
||||
seaweedfsdata-prod:
|
||||
external: true
|
||||
nuget-cache-prod:
|
||||
driver: local
|
||||
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, userEvent, waitFor, within } from 'storybook/test';
|
||||
import AiDisclosureDialog from './AiDisclosureDialog';
|
||||
|
||||
const aiDisclosureDescription = `Tells visitors that the catalogue is AI-generated fixture data before they engage with it, as the pipeline ethics documentation requires. It opens on every full page load and closes for the rest of that load once acknowledged.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Disclosure/AiDisclosureDialog',
|
||||
component: AiDisclosureDialog,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
defaultOpen: true,
|
||||
},
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: aiDisclosureDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof AiDisclosureDialog>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Open: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await waitFor(async () => {
|
||||
await expect(
|
||||
canvas.getByRole('heading', { name: /this content is ai-generated/i }),
|
||||
).toBeVisible();
|
||||
});
|
||||
await expect(
|
||||
canvas.getByRole('link', { name: /how this data was generated/i }),
|
||||
).toBeVisible();
|
||||
},
|
||||
};
|
||||
|
||||
export const Acknowledged: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button', { name: /i understand/i }));
|
||||
await expect(
|
||||
canvas.queryByRole('heading', { name: /this content is ai-generated/i }),
|
||||
).toBeNull();
|
||||
},
|
||||
};
|
||||
|
||||
export const InitiallyDismissed: Story = {
|
||||
args: {
|
||||
defaultOpen: false,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(
|
||||
canvas.queryByRole('heading', { name: /this content is ai-generated/i }),
|
||||
).toBeNull();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,79 @@
|
||||
import { Sparks } from 'iconoir-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const ethicsDocUrl =
|
||||
'https://github.com/aaronpo97/the-biergarten-app/blob/main/docs/pipeline/ETHICS-AND-KNOWN-ISSUES.md';
|
||||
|
||||
const AiDisclosureDialog = ({ defaultOpen = true }: { defaultOpen?: boolean }) => {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
return;
|
||||
}
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => document.removeEventListener('keydown', onKeyDown);
|
||||
}, [open]);
|
||||
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal modal-open"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="ai-disclosure-title"
|
||||
>
|
||||
<div className="modal-box max-w-md">
|
||||
<div className="flex flex-col items-center gap-3 text-center">
|
||||
<span className="text-primary">
|
||||
<Sparks className="size-10" aria-hidden="true" />
|
||||
</span>
|
||||
<h2 id="ai-disclosure-title" className="text-lg font-bold">
|
||||
This content is AI-generated
|
||||
</h2>
|
||||
<p className="text-sm text-base-content/70">
|
||||
The Biergarten App is a proof of concept. Every brewery, beer, and user in
|
||||
this catalogue is fixture data produced by a language model — none of it
|
||||
describes a real business, person, or beer.
|
||||
</p>
|
||||
<div role="alert" className="alert alert-warning alert-soft text-left">
|
||||
<span className="text-sm">
|
||||
Brewing details, local-language text, and coordinates are known to
|
||||
contain fabrications. Treat nothing here as factual.
|
||||
</span>
|
||||
</div>
|
||||
<a
|
||||
href={ethicsDocUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link link-primary text-sm"
|
||||
>
|
||||
How this data was generated
|
||||
</a>
|
||||
</div>
|
||||
<div className="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary w-full"
|
||||
autoFocus
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
I understand
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AiDisclosureDialog;
|
||||
@@ -13,6 +13,7 @@ import './app.css';
|
||||
import Navbar from './components/ui/navbar/Navbar';
|
||||
import ToastProvider from './components/ui/toast/ToastProvider';
|
||||
import { getOptionalAuth } from './features/auth/auth.server';
|
||||
import AiDisclosureDialog from './features/disclosure/components/AiDisclosureDialog';
|
||||
import { defaultThemeName, parseThemeCookie } from './features/theme/themes';
|
||||
|
||||
export const links: Route.LinksFunction = () => [
|
||||
@@ -60,6 +61,7 @@ const App = ({ loaderData }: Route.ComponentProps) => {
|
||||
<>
|
||||
<Navbar auth={auth} />
|
||||
<ToastProvider />
|
||||
<AiDisclosureDialog />
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user