Add template NextJS dockerfile + build job (#2)

for work relating to 8696kuv0g

Author: matcor-bodc

.github/workflows/ts-build.yml

@@ -0,0 +1,42 @@
+name: Typescript Build
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - typescript-demo/**
+  pull_request:
+    paths:
+    - 'typescript-demo/**'
+  release:
+    types: [created]
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        if: ${{ github.event_name == 'release' }}
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build
+        uses: docker/build-push-action@v6
+        if: ${{ github.event_name != 'release' }}
+        with:
+          context: "{{defaultContext}}:typescript-demo"
+          push: false
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        if: ${{ github.event_name == 'release' }}
+        with:
+          context: "{{defaultContext}}:typescript-demo"
+          push: true
+          tags: "ghcr.io/british-oceanographic-data-centre/amrit-repos/typescript/app:${{ github.ref_name }}"

.github/workflows/ts-lint.yml

@@ -22,4 +22,4 @@ jobs:
       run: npm install
     - name: Run ESLint
       working-directory: ./typescript-demo
-      run: npm run lint
+      run: npm run lint

typescript-demo/.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

typescript-demo/Dockerfile

@@ -0,0 +1,65 @@
+FROM cgr.dev/chainguard/node AS base
+
+LABEL org.opencontainers.image.authors="matcor@noc.ac.uk"
+LABEL org.opencontainers.image.description="Example OCI image for a NextJS application."
+LABEL org.opencontainers.image.url="https://github.com/British-Oceanographic-Data-Centre/amrit-repos"
+LABEL org.opencontainers.image.source="https://github.com/British-Oceanographic-Data-Centre/amrit-repos"
+LABEL org.opencontainers.image.documentation="https://github.com/British-Oceanographic-Data-Centre/amrit-repos/wiki"
+LABEL org.opencontainers.image.licenses="TBD"
+LABEL org.opencontainers.image.vendor="Advance Marine Research Infrastructures Together (AMRIT)"
+
+USER root
+
+# Install dependencies only when needed
+FROM base AS deps
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+CMD ["server.js"]

typescript-demo/README.md

@@ -1,5 +1,7 @@
 This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
+Docker image is available publicly using `docker pull ghcr.io/british-oceanographic-data-centre/amrit-repos/typescript/app:{TAG}`.
+
 ## Getting Started
 
 

typescript-demo/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "standalone",
 };
 
 export default nextConfig;