Problem setting up Next.js docker application to ACR and app services

Karl-Emil Grarup Hertz 0 Reputation points
2024-05-31T11:18:45.95+00:00

Hey fellow developers,

I have decided to move from AWS to Azure and am very new in this new devOps environment.The way i want to setup my pipeline is as follows:

  1. I want to push my container web app (next.js) with github actions to ACR.
  2. Then the app services should automatically notice that a new image is in the ACR and update the web app with the new image for a nice CD/CI flow.

I can run the image locally without any problems the issue it when it is being run on the cloud (app service) it crashes after it pulls the image from ECR as seen in the deployment logs from the image below:User's image

I tried finding more informative logs, but dont know where to look.

I have setup my enviornmental varibles in the app services.

This is my dockerfile:

DEPENDENCIES

FROM --platform=linux/amd64 node:20-alpine AS deps RUN apk add --no-cache libc6-compat openssl WORKDIR /app

Install Prisma Client - remove if not using Prisma

COPY prisma ./

Install dependencies based on the preferred package manager

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ RUN
if [ -f yarn.lock ]; then yarn --frozen-lockfile;
elif [ -f package-lock.json ]; then npm ci;
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i;
else echo "Lockfile not found." && exit 1;
fi

BUILDER

FROM --platform=linux/amd64 node:20-alpine AS builder ARG DATABASE_URL ARG NEXT_PUBLIC_CLIENTVAR WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN npm run build

RUNNER

Use a minimal Node.js image with necessary libraries

FROM node:20-alpine AS runner WORKDIR /app RUN apk add --no-cache musl libc6-compat openssl ENV NODE_ENV production COPY --from=builder /app/public ./public COPY --from=builder /app/package.json ./package.json

Set the correct permission for prerender cache

COPY --from=builder /app/.next/standalone ./ COPY --from=builder /app/.next/static ./.next/static EXPOSE 3000 ENV PORT 3000 CMD ["node", "server.js"]

Thanks for the help in advance!!

Azure Container Registry
Azure Container Registry
An Azure service that provides a registry of Docker and Open Container Initiative images.
461 questions
Azure
Azure
A cloud computing platform and infrastructure for building, deploying and managing applications and services through a worldwide network of Microsoft-managed datacenters.
1,018 questions
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,902 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Andriy Bilous 11,426 Reputation points MVP
    2024-05-31T20:29:33.3766667+00:00

    Hello Karl-Emil Grarup Hertz

    Azure App Service only exposes ports 80 and 443.
    Incoming requests from client would just be over 443/80 which should be mapped to the exposed port of the container.
    App Service will attempt to detect which port to bind to your container, but you can also use the WEBSITES_PORT app setting and configure it with a value for the port you want to bind to your container.
    In APPLICATION SETTINGS you need to set the key / value pair WEBSITES_PORT to 3000

    https://stackoverflow.com/questions/67755217/how-does-azure-app-service-manage-port-binding-with-docker-container-does-it-re
    https://stackoverflow.com/questions/48693878/how-do-you-expose-port-3000-using-an-azure-web-app-container

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.