NextJS Clerk Auth app fails to start ( Failed to proxy )

Question

I have a basic nextjs 14 app which uses clerk auth, the app fails to start when I deploy it.

I started with a basic deployment pipeline from azure devops which was deployed into azure webapp, the app failed to start sighting a vague error, I dockerized the app thinking maybe there was something wrong with how azure deploys the web app (linux).

I am still facing the same issue with the dockerized app, it fails to startup.

my logs show the following error code siting failure to reach clerk.

2024-11-15T06:42:50.8240550Z Failed to proxy http://169.254.137.3:3000/clerk_1731652970815 Error: connect ECONNRESET 169.254.137.3:3000
2024-11-15T06:42:50.8242320Z     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1605:16)
2024-11-15T06:42:50.8242359Z     at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
2024-11-15T06:42:50.8242390Z   errno: -104,
2024-11-15T06:42:50.8242415Z   code: 'ECONNRESET',
2024-11-15T06:42:50.8242438Z   syscall: 'connect',
2024-11-15T06:42:50.8242465Z   address: '169.254.137.3',
2024-11-15T06:42:50.8242487Z   port: 3000
2024-11-15T06:42:50.8242510Z }
2024-11-15T06:42:50.8290774Z Error: connect ECONNRESET 169.254.137.3:3000
2024-11-15T06:42:50.8291242Z     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1605:16)
2024-11-15T06:42:50.8291281Z     at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
2024-11-15T06:42:50.8291308Z   errno: -104,
2024-11-15T06:42:50.8291333Z   code: 'ECONNRESET',
2024-11-15T06:42:50.8291355Z   syscall: 'connect',
2024-11-15T06:42:50.8291384Z   address: '169.254.137.3',
2024-11-15T06:42:50.8291417Z   port: 3000
2024-11-15T06:42:50.8291439Z }

My dockerfile looks like which is the dockerfile template provided by Nextjs

FROM node:21-alpine AS base

# Install dependencies only when needed
FROM base 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

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .


# Ensure the `generated` folder is included in the build context

# 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 \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=development
# 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 ["node", "server.js"]

Answer 1

The ECONNRESET error occurs because the connection is being closed as it is targeting the local address 169.254.137.3 instead of Azure Web App.

I created a sample Next.js app with Clerk's authentication and deployed it to Azure Web App through Container Registry.

I used the basic code available on the Clerk website to integrate Clerk with the Next.js app.

Below is the Dockerfile I used to push the Next.js app to the container.

Dockerfile:

FROM node:18 AS base
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install --frozen-lockfile
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

I ran the below commands to build and run the app t in local docker container.

docker build -t <ContainerImageName> .
docker run -p <port>:<port> --env-file .env.local <ContainerImageName>

I ran the following commands to push the image to Azure Container Registry:

az login
az acr login -n <ContainerUserName>
docker tag <ImageName> <AzureContainerRegistryName>.azurecr.io/<imageName>:<tagName>
docker push <AzureContainerRegistryName>.azurecr.io/<ImageName>:<tagName>

While creating an Azure web app, I selected the 'Container' option for the 'Publish' setting, as shown below.

And I added NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY to the Azure Environment variables as shown below.

After following the above steps, I successfully ran the app in Azure.

Azure Web App Output: