Production guidelines

[back-2-95]

I tried to emulate creating "production" version of the Next.js part with Dockerfile and Docker Compose.

Was hoping to get some advices/examples on how to deploy next.js of this project to production.

My discoveries so far:

• I cannot use npm ci --only=production as typescript is in devDependencies of package.json
• I cannot use npm run build in Dockerfile as it tries to load content from Drupal
• Current CMD below works but fails quite fast as it cannot connect to Drupal container (Drupal is in http://app:8080)

Here is the current Dockerfile:

ARG NODE_VERSION=16

FROM node:${NODE_VERSION}-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

COPY package.json package-lock.json /app/

#RUN npm ci --only=production
RUN npm ci

# Rebuild the source code only when needed
FROM node:${NODE_VERSION}-alpine as builder

ENV NEXT_TELEMETRY_DISABLED 1
ENV NODE_ENV production

WORKDIR /app

COPY . .
COPY --from=deps /app/node_modules ./node_modules
COPY .env.docker .env

RUN npm config set update-notifier false

ENV PORT 3000

EXPOSE 3000

CMD ["npm", "run", "preview"]

[shadcn]

Hmm, I don't use docker that often but I'll see if I can get someone on the team to help with this.

Does this example https://github.com/vercel/next.js/tree/canary/examples/with-docker help?

[back-2-95]

@shadcn No it does not. It's not about that. Running npm run build in the Dockerfile (build time) tries to connect to Drupal jsonapi. See the picture:

[back-2-95]

Maybe this needs to be thinked like:

• Production Drupal must be online
• Build prod image as part of any CI pipeline
• Dockerfile can on build time connect to production Drupal

[iamfredrik]

Any progress on this? I'm using the latest starter with DrupalClient, but can't get it to build. No problems when running dev.

[email protected] build next build

info - Loaded env from /var/www/vhosts/mydomain.com/mydomain.com/.env.production info - Checking validity of types...

./pages/index.tsx 25:9 Warning: Custom fonts not added at the document level will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font @next/next/no-page-custom-font

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules info - Creating an optimized production build... info - Compiled successfully info - Collecting page data... info - Generating static pages (0/8) info - Generating static pages (2/8) info - Generating static pages (4/8) info - Generating static pages (6/8) info - Generating static pages (8/8)

Error occurred prerendering page "/sv". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: Cannot read properties of null (reading 'get') at /var/www/vhosts/mydomain.com/mydomain.com/node_modules/next-drupal/dist/index.js:2192:48 at DrupalClient.getMenu (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next-drupal/dist/index.js:2201:8) at getMenu (/var/www/vhosts/mydomain.com/mydomain.com/.next/server/pages/index.js:42:31) at getStaticProps (/var/www/vhosts/mydomain.com/mydomain.com/.next/server/pages/index.js:369:25) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async renderToHTML (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/server/render.js:492:20) at async /var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/export/worker.js:253:36 at async Span.traceAsyncFn (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/trace/trace.js:79:20)

Error occurred prerendering page "/en". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: Cannot read properties of null (reading 'get') at /var/www/vhosts/mydomain.com/mydomain.com/node_modules/next-drupal/dist/index.js:2192:48 at DrupalClient.getMenu (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next-drupal/dist/index.js:2201:8) at getMenu (/var/www/vhosts/mydomain.com/mydomain.com/.next/server/pages/index.js:42:31) at getStaticProps (/var/www/vhosts/mydomain.com/mydomain.com/.next/server/pages/index.js:369:25) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async renderToHTML (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/server/render.js:492:20) at async /var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/export/worker.js:253:36 at async Span.traceAsyncFn (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/trace/trace.js:79:20)

Build error occurred Error: Export encountered errors on following paths: /: /en /: /sv at /var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/export/index.js:398:19 at runMicrotasks () at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Span.traceAsyncFn (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/trace/trace.js:79:20) at async /var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/build/index.js:1034:21 at async Span.traceAsyncFn (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/trace/trace.js:79:20) at async /var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/build/index.js:910:17 at async Span.traceAsyncFn (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/trace/trace.js:79:20) at async Object.build [as default] (/var/www/vhosts/mydomain.com/mydomain.com/node_modules/next/dist/build/index.js:58:29)

[iamfredrik]

For me it was the TypeScript Interface NodePageProps etc. that was causing the problems. Removed them and it builds just fine.

[back-2-95]

I'd say now that we have launched our first next-drupal project I can say my initial thoughts in the issue is false.

I'm not saying one not could use Docker image BUT the main thing is that Drupal (the backend) must be available when that Docker image is build. Our initial problem was that hosting platform was building Drupal AND Next.js images at the same time (aka deployment) and next.js image build ofc failed.

What we did: we host next.js on Vercel and Drupal on Amazee.io Lagoon. Drupal instance(s) must be online and available for the Next.js builds.

Closing the issue.