build: package artifacts from host (#586)

.github/workflows/pull-request.yaml

@@ -5,6 +5,11 @@ on:
     types: [opened, synchronize]
     paths:
       - "services/**"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     runs-on: arc-arm64
@@ -15,26 +20,37 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Cache Next.js build
-        uses: actions/cache@v4
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
         with:
-          path: |
-            services/ecran/.next/cache
-          key: ${{ runner.os }}-next-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-next-
-
-      - name: Set up pnpm
-        uses: pnpm/action-setup@v4
+          image: public.ecr.aws/eks-distro-build-tooling/binfmt-misc:qemu-v7.0.0
 
-      - name: Install Node.js
-        uses: actions/setup-node@v4
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
         with:
-          node-version: 22
-          cache: pnpm
+          driver-opts: |
+            image=moby/buildkit:v0.18.0
 
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Login to Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: kalmyk.duckdns.org
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
 
-      - name: Build
-        run: pnpm run build
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: services/ecran
+          file: services/ecran/Dockerfile.package
+          platforms: linux/arm64
+          push: true
+          tags: kalmyk.duckdns.org/lab/ecran:${{ github.sha }},kalmyk.duckdns.org/lab/ecran:latest
+          target: runner
+          build-args: |
+            NEXT_PUBLIC_COMMIT_SHA=${{ github.sha }}
+          cache-from: type=registry,ref=kalmyk.duckdns.org/lab/ecran:latest
+          cache-to: type=inline
+          secrets: |
+            github-token=${{ secrets.GITHUB_TOKEN }}
+          provenance: false

services/ecran/Dockerfile.package

@@ -0,0 +1,48 @@
+FROM node:lts-alpine AS builder
+WORKDIR /app
+
+# Install pnpm
+RUN --mount=type=cache,target=/root/.npm \
+    npm install -g pnpm
+
+# Copy package files
+COPY package.json pnpm-lock.yaml ./
+COPY .npmrc ./
+
+# Install dependencies with cache
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store,id=pnpm-store \
+    --mount=type=cache,target=/app/node_modules,id=node-modules \
+    pnpm install --no-frozen-lockfile
+
+# Copy source files
+COPY . .
+
+# Build the application with cache
+RUN --mount=type=cache,target=/app/.next/cache,id=next-cache \
+    --mount=type=cache,target=/app/node_modules,id=node-modules \
+    --mount=type=cache,target=/root/.local/share/pnpm/store,id=pnpm-store \
+    NEXT_TELEMETRY_DISABLED=1 pnpm run build
+
+# Production image
+FROM node:lts-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+# Copy build output from builder
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

services/ecran/src/app/problems/page.tsx

@@ -80,13 +80,26 @@ export default async function ProblemsPage(props: ProblemsPageProps) {
     <div className="container mx-auto">
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between">
-          <div className="text-2xl font-semibold tracking-tight text-zinc-900/50 dark:text-zinc-50/50">Problems</div>
           <SearchProblems defaultValue={search} />
+          <div className="flex items-center gap-2">
+            <span
+              className="rounded-full bg-zinc-100 px-2 py-0.5 text-sm font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100"
+              aria-label="Total number of problems"
+            >
+              {total}
+            </span>
+            <h1 className="text-xl font-semibold tracking-tight text-zinc-900/50 dark:text-zinc-50/50">Problems</h1>
+          </div>
         </div>
         <Suspense
           fallback={
             <div className="flex h-[400px] items-center justify-center">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-indigo-600 border-t-transparent" />
+              <div
+                className="h-8 w-8 animate-spin rounded-full border-4 border-indigo-600 border-t-transparent"
+                aria-label="Loading problems"
+              >
+                <span className="sr-only">Loading problems...</span>
+              </div>
             </div>
           }
         >