♻️ Refactor dockerfile and upgrade next #1128 (#1308)

web/Dockerfile

@@ -1,104 +1,77 @@
-ARG ARG_DYNATRACE_IMAGE='node:lts-alpine'
-FROM ${ARG_DYNATRACE_IMAGE} AS dynatrace
+ARG ARG_DYNATRACE_IMAGE='node:16-alpine'
 
-FROM node:lts-alpine AS builder
+FROM ${ARG_DYNATRACE_IMAGE} AS dynatrace
 
-RUN npm install -g pnpm@^7.2.1
+FROM node:16-alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
 
-WORKDIR /opt/app
+COPY package.json pnpm-lock.yaml ./
+COPY web/package.json web/pnpm-lock.yaml web/
 
-# Should consider using pnpm fetch
-COPY ./package.json ./
-COPY ./pnpm-lock.yaml ./
-COPY ./tsconfig.base.json ./
-COPY ./satellitesConfig.js ./
-COPY ./FeatureFlags.js ./
-COPY ./pnpm-workspace.yaml ./
-COPY ./.npmrc ./
-COPY ./web ./web
+RUN \
+  if [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm m i --frozen-lockfile;\
+  else echo "Lockfile not found." && exit 1; \
+  fi
 
-# Replace workspace:* with the actual versions | Load css from public folder atm
-# RUN version=$(jq --raw-output .version ./legacy/css/package.json); \
-#  jq --arg legacy_css "$version" '.dependencies["@equinor/energyvision-legacy-css"] = $legacy_css' \
-#  ./web/package.json | sponge ./web/package.json
+FROM node:16-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/web/node_modules ./web/node_modules
+COPY . .
 
-ARG ARG_SANITY_PROJECT_ID
 ARG ARG_SANITY_DATASET
-ARG ARG_ALGOLIA_APP_ID
-ARG ARG_ALGOLIA_SEARCH_API_KEY
-
-ENV NEXT_PUBLIC_SANITY_PROJECT_ID ${ARG_SANITY_PROJECT_ID}
 ENV NEXT_PUBLIC_SANITY_DATASET ${ARG_SANITY_DATASET}
-ENV NEXT_PUBLIC_ALGOLIA_APP_ID ${ARG_ALGOLIA_APP_ID}
-ENV NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY ${ARG_ALGOLIA_SEARCH_API_KEY}
+ARG ARG_SANITY_PROJECT_ID
+ENV NEXT_PUBLIC_SANITY_PROJECT_ID ${ARG_SANITY_PROJECT_ID}
 
-#RUN pnpm install --recursive --frozen-lockfile
-RUN pnpm web install --frozen-lockfile
-RUN pnpm web build
+ENV NEXT_TELEMETRY_DISABLED 1
 
-FROM node:lts-alpine as runner
+RUN cd web && yarn build
 
-RUN npm install -g pnpm@^7.2.1
 
-WORKDIR /opt/app
+# Production image, copy all the files and run next
+FROM node:16-alpine AS runner
+WORKDIR /app
 
 ENV NODE_ENV production
-ENV PORT 3000
-ENV USER nextjs
-ENV UID 12345
-ENV GID 23456
-
-RUN addgroup -S "$USER" && \
-  adduser -S \
-  --disabled-password \
-  --gecos "" \
-  --home "/opt/app" \
-  --ingroup "$USER" \
-  --no-create-home \
-  --uid "$UID" \
-  "$USER"
-
-COPY --from=builder /opt/app/web/.next ./web/.next
-COPY --from=builder /opt/app/web/next.config.mjs ./web
-COPY --from=builder /opt/app/web/securityHeaders.mjs ./web
-COPY --from=builder /opt/app/web/package.json ./web
-COPY --from=builder /opt/app/web/node_modules ./web/node_modules
-COPY --from=builder /opt/app/web/pnpm-lock.yaml ./web
-COPY --from=builder /opt/app/web/languages.js ./web
-COPY --from=builder /opt/app/pnpm-lock.yaml ./
-COPY --from=builder /opt/app/web/public ./web/public
-COPY --from=builder /opt/app/package.json ./
-COPY --from=builder /opt/app/satellitesConfig.js ./
-COPY --from=builder /opt/app/pnpm-workspace.yaml ./
-COPY --from=builder /opt/app/.npmrc ./
-
-RUN chown -R "$USER":"$USER" .
-USER "$UID"
 
-ARG ARG_SANITY_PROJECT_ID
+ARG ARG_ENV
+ENV ENV ${ARG_ENV}
 ARG ARG_SANITY_DATASET
-ENV NEXT_PUBLIC_SANITY_PROJECT_ID ${ARG_SANITY_PROJECT_ID}
 ENV NEXT_PUBLIC_SANITY_DATASET ${ARG_SANITY_DATASET}
-
-ARG ARG_SANITY_API_TOKEN
-ARG ARG_SANITY_PREVIEW_SECRET
-
-ENV SANITY_API_TOKEN ${ARG_SANITY_API_TOKEN}
-ENV SANITY_PREVIEW_SECRET ${ARG_SANITY_PREVIEW_SECRET}
-
+ARG ARG_SANITY_PROJECT_ID
+ENV NEXT_PUBLIC_SANITY_PROJECT_ID ${ARG_SANITY_PROJECT_ID}
 ARG ARG_ALGOLIA_APP_ID
-ARG ARG_ALGOLIA_SEARCH_API_KEY
-ARG ARG_ALGOLIA_SEARCH_API_SERVER_KEY
 ENV NEXT_PUBLIC_ALGOLIA_APP_ID ${ARG_ALGOLIA_APP_ID}
+ARG ARG_ALGOLIA_SEARCH_API_KEY
 ENV NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY ${ARG_ALGOLIA_SEARCH_API_KEY}
+ARG ARG_ALGOLIA_SEARCH_API_SERVER_KEY
 ENV ALGOLIA_SEARCH_API_SERVER_KEY ${ARG_ALGOLIA_SEARCH_API_SERVER_KEY}
 
-ARG ARG_ENV
-ENV ENV ${ARG_ENV}
+ENV PORT 3000
+ENV USER nextjs
+ENV UID 12345
+# https://nextjs.org/telemetry
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup -S "$USER"
+RUN adduser -S --uid "$UID" "$USER"
+
+COPY --from=builder /app/web/public ./public
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown="$USER":"$USER" /app/web/.next/standalone .
+COPY --from=builder --chown="$USER":"$USER" /app/web/.next/static ./.next/static
 
+USER "$UID"
+
+# Copy dynatrace or "empty"
 COPY --from=dynatrace / /
 ENV LD_PRELOAD /opt/dynatrace/oneagent/agent/lib64/liboneagentproc.so
 ENV DT_TAGS=EQUINORCOM\ ENVIRONMENT=${ARG_ENV}\ DT_PROCESS_GROUP=${ARG_SANITY_DATASET}
 
 EXPOSE "$PORT"
-CMD ["pnpm", "web", "start"]
+
+CMD ["node", "server.js"]
+

web/pages/_middleware.ts → web/_middleware.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { getRedirectUrl, getDnsRedirect, getExternalRedirectUrl } from '../common/helpers/redirects'
+import { getRedirectUrl, getDnsRedirect, getExternalRedirectUrl } from './common/helpers/redirects'
 import { NextRequest, NextResponse } from 'next/server'
-import { getLocaleFromName } from '../lib/localization'
-import { Flags } from '../common/helpers/datasetHelpers'
-import { getDocumentBySlug } from '../common/helpers/getPaths'
-import archivedNews from '../lib/archive/archivedNewsPaths.json'
+import { getLocaleFromName } from './lib/localization'
+import { Flags } from './common/helpers/datasetHelpers'
+import { getDocumentBySlug } from './common/helpers/getPaths'
+import archivedNews from './lib/archive/archivedNewsPaths.json'
 
 const PERMANENT_REDIRECT = 301
 // const TEMPORARY_REDIRECT = 302
@@ -18,7 +18,7 @@ const pathExistsInSanity = async (pathname: string, isPreview = false): Promise<
 }
 
 // Check if preview mode is enabled in Sanity
-const isPreviewEnabled = (request: NextRequest): boolean => {
+const isPreviewEnabled = (request: any): boolean => {
   const { searchParams } = request.nextUrl
   const previewCookie = request.cookies['__next_preview_data']
   const previewParam = searchParams.get('preview')
@@ -67,9 +67,7 @@ export async function middleware(request: NextRequest) {
   }
 
   // Check if an internal redirect exists in sanity
-
   const redirect = await getRedirectUrl(pathname.replace(DOT_HTML, ''), request.nextUrl.locale)
-
   if (redirect) {
     const locale = getLocaleFromName(redirect.lang)
     return NextResponse.redirect(`${origin}/${locale}${redirect.to !== '/' ? redirect.to : ''}`, PERMANENT_REDIRECT)

web/next.config.mjs

@@ -34,10 +34,7 @@ const pageExtensions = getPageExtensions(dataset)
 
 export default withTM(
   withBundle({
-    experimental: {
-      // https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#self-hosting-isr
-      isrMemoryCacheSize: 0,
-    },
+    output: 'standalone',
     pageExtensions: pageExtensions,
     reactStrictMode: true,
     eslint: {

web/package.json

@@ -48,7 +48,7 @@
     "html-entities": "^2.3.2",
     "ics": "^2.35.0",
     "instantsearch.js": "^4.47.0",
-    "next": "^12.1.0",
+    "next": "^12.3.1",
     "next-sanity": "^0.8.4",
     "next-sanity-image": "^3.2.1",
     "next-seo": "^5.1.0",

web/pages/api/revalidate.js

@@ -23,21 +23,25 @@ export default async function handler(req, res) {
   }
   const data = JSON.parse(body)
   try {
-    // @TODO Remove 'unstable' after upgrading next to ^12.2.0
     if (['page', 'landingPage', 'event'].includes(data._type)) {
       const routes = await sanityClient.fetch(
         groq`*[_type match "route_*" && content._ref == $id]{"slug": slug.current}`,
         { id: data._id },
       )
+
       // Revalidade every path that points to the modified document
       routes.map(async (route) => {
         //console.log('Revalidated: ', route.slug)
-        if (route.slug) await res.unstable_revalidate(route.slug)
+        if (route.slug) {
+          console.log(new Date(), 'Revalidating: ', route.slug)
+          await res.revalidate(route.slug)
+        }
       })
       return res.json({ revalidated: true, slug: routes })
     } else {
       // console.log('Revalidated: ', data.slug)
-      if (data.slug) await res.unstable_revalidate(data.slug)
+      console.log(new Date(), 'Revalidating: ', data?.slug)
+      if (data.slug) await res.revalidate(data.slug)
       return res.json({ revalidated: true, slug: data.slug })
     }
   } catch (err) {