NextJS应用Docker化部署至Azure App Service后无法显示页面求助

本地Docker配置运行正常，但部署到Azure后页面无法加载（页面显示无法访问）。

部署日志 #

Azure Web App on Container Deploy

Got service connection details for Azure App Service:'myapplicationMYWEBAPPRESOURCE'
Single-container Deployment to the webapp 'myapplicationMYWEBAPPRESOURCE' as only the image detail was specified.
Trying to update App Service Configuration settings. Data:{"appCommandLine":null,"windowsFxVersion":"DOCKER|CMYACR/myapplication-app:3677087"}
Updated App Service Configuration settings.
Restarting App Service: myapplicationMYWEBAPPRESOURCE
App Service 'myapplicationMYWEBAPPRESOURCE' restarted successfully.
Successfully added release annotation to the Application Insight : myappinsight
Successfully updated deployment History at https://myapplicationMYWEBAPPRESOURCE.scm.azurewebsites.net/api/deployments/36770871678028437889

Pipeline配置 #

- task: Docker@2
  displayName: "Build Image"
  inputs:
    containerRegistry: MY-ACR
    repository: myapplication-app
    command: "build"
    Dockerfile: "$(project.dockerfile.path)"
    arguments: '--build-arg ACCESS_TOKEN="$(System.AccessToken)"'
    tags: "$(Build.BuildId)"

- task: Docker@2
  displayName: "Push Image: DEV"
  inputs:
    containerRegistry: MY-ACR
    repository: myapplication-app
    command: "push"
    tags: "$(Build.BuildId)"

- task: AzureWebAppContainer@1
  displayName: 'Azure Web App on Container Deploy'
  inputs:
    azureSubscription: ${{ parameters.azureServiceConnection }}
    appName: $(myapplication-app.webappName)
    imageName: MY-ACR/myapplication-app:$(Build.BuildId)

Dockerfile内容 #

# Install dependencies only when needed
FROM node:18-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

ENV PORT=8080

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN yarn build

FROM node:18-alpine AS runner
WORKDIR /app

ARG AUTH_URL
ARG AUTH_SECRET

ENV NODE_ENV production

ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 8080

ENV PORT 8080

CMD ["node", "server.js"]

Azure资源日志 #

2023-03-05T15:16:13.522Z INFO  -  Status: Image is up to date for 10.x.x.x:13209/appsvc/node:18-lts_20221208.1.tuxprod
2023-03-05T15:16:13.526Z INFO  - Pull Image successful, Time taken: 0 Minutes and 0 Seconds
2023-03-05T15:16:13.547Z INFO  - Starting container for site
2023-03-05T15:16:13.548Z INFO  - docker run -d --expose=8080 --name myappservice_6_d637d294 -e WEBSITES_PORT=8080 -e WEBSITE_SITE_NAME=myappservice -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_HOSTNAME=myappservice.azurewebsites.net -e WEBSITE_INSTANCE_ID=03162c5fb5bcdbeba70ac60be15b5262381392b93b18ebea9a3965fdf0c88c55 -e HTTP_LOGGING_ENABLED=1 -e WEBSITE_USE_DIAGNOSTIC_SERVER=True appsvc/node:18-lts_20221208.1.tuxprod
2023-03-05T15:16:14.711Z INFO  - Initiating warmup request to container myappservice_6_d637d294 for site myappservice
2023-03-05T15:16:16.735Z INFO  - Container myappservice_6_d637d294 for site myappservice initialized successfully and is ready to serve requests.

故障排查思路 #

• 镜像加载验证：从Azure资源日志可见，当前启动的是官方appsvc/node镜像，而非你构建的自定义镜像。需检查：
  • Azure App Service容器设置中是否指定了正确的ACR镜像地址
  • Pipeline的AzureWebAppContainer@1任务imageName参数是否与ACR中的镜像完全匹配
  • 确认ACR与App Service的权限配置，确保App Service有权拉取ACR镜像
• 端口与网络检查：
  • 通过SSH进入容器，执行netstat -tulpn确认NextJS应用是否确实监听8080端口
  • 检查App Service的防火墙、NSG规则，确认80/443端口到容器8080端口的流量未被阻断
• 应用启动日志排查：
  • 开启App Service日志流，查看容器内node server.js的启动日志，排查是否有未捕获异常或环境变量缺失（如AUTH_URL、AUTH_SECRET是否正确传入）
• 镜像本身验证：
  • 本地拉取ACR中的目标镜像，运行后测试是否能正常访问，排除镜像构建问题
• 运行环境检查：
  • 确认App Service操作系统为Linux，避免Windows环境的兼容性问题
  • 检查App Service SKU资源配置，排除资源不足导致应用无法启动的情况

内容的提问来源于Stack Exchange，提问作者Benjamin RD