Getting 502 on Contentful request when deploying dockerized nextjs app

Question

I'm trying to deploy a dockerized nextjs application but since I added Contentful to my app, the deployment fails on it's request. Error: ApolloError: Response not successful: Received status code 502

[slug].tsx

import {
  GetStaticPathsContext,
  GetStaticPropsResult,
  InferGetStaticPropsType,
} from 'next';
import { useContentfulLiveUpdates } from '@contentful/live-preview/react';
import { useTranslation } from 'next-i18next';

import { client, previewClient } from 'contentful/client';
import { BlogPostPage } from 'pages/Blog';
import { getServerSideTranslations } from 'utils';

function Page(props: InferGetStaticPropsType<typeof getStaticProps>) {
  const { t } = useTranslation();

  const blogPost = useContentfulLiveUpdates(props.blogPost);
  const relatedPosts = blogPost?.relatedBlogPostsCollection?.items;

  if (!blogPost || !relatedPosts) return null;

  return <BlogPostPage blogPost={blogPost} relatedPosts={relatedPosts} />;
}

const revalidateDuration = 5;

export async function getStaticProps({
  params,
  locale,
  draftMode: preview,
}: any): Promise<GetStaticPropsResult<any>> {
  if (!params?.slug || !locale) {
    return {
      notFound: true,
      revalidate: revalidateDuration,
    };
  }

  const gqlClient = preview ? previewClient : client;

  try {
    const [blogPageData, landingPageData] = await Promise.all([
      gqlClient.pageBlogPost({ slug: params.slug.toString(), locale, preview }),
      gqlClient.pageLanding({ locale, preview }),
    ]);

    const blogPost = blogPageData.pageBlogPostCollection?.items[0];
    const landingPage = landingPageData.pageLandingCollection?.items[0];

    const isFeatured = landingPage?.featuredBlogPost?.slug === blogPost?.slug;

    if (!blogPost) {
      return {
        notFound: true,
        revalidate: revalidateDuration,
      };
    }

    return {
      revalidate: revalidateDuration,
      props: {
        ...(await getServerSideTranslations(locale)),
        blogPost,
        isFeatured,
      },
    };
  } catch (e) {
    console.log('e', e);
    return {
      notFound: true,
      revalidate: revalidateDuration,
    };
  }
}

export async function getStaticPaths({
  locales,
}: GetStaticPathsContext): Promise<any> {
  const dataPerLocale = locales
    ? await Promise.all(
        locales.map((locale) =>
          client.pageBlogPostCollection({ locale, limit: 100 }),
        ),
      )
    : [];

  const paths = dataPerLocale
    .flatMap((data, index) =>
      data.pageBlogPostCollection?.items.map((blogPost) =>
        blogPost?.slug
          ? {
              params: {
                slug: blogPost.slug,
              },
              locale: locales?.[index],
            }
          : undefined,
      ),
    )
    .filter(Boolean);

  return {
    paths,
    fallback: 'blocking',
  };
}

export default Page;

Dockerfile

##########
# Development
##########

FROM node:16-alpine AS deps

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package*.json ./

RUN npm ci

USER node

##########
# Build
##########

FROM node:16-alpine AS builder

WORKDIR /app

COPY --chown=node:node --from=deps /app/node_modules ./node_modules

COPY . .
COPY .env.prod ./.env

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

# remove dev dependencies
RUN npm prune --production

USER node

##########
# Production
##########

FROM node:16-alpine AS runner

WORKDIR /app

USER node

ENV NODE_ENV production

COPY --chown=node:node next.config.js ./
COPY --chown=node:node .env.prod ./.env
COPY --chown=node:node --from=builder /app/public ./public

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

ENV NEXT_TELEMETRY_DISABLED 1

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

Compose

version: '3'

services:
  website:
    build:
      context: ./website
      dockerfile: ./Dockerfile.prod
    ports:
      - ${LOCAL_IP}:${WEBSITE_PORT}:3000
    env_file:
      - ./website/.env.prod
    dns:
      - 8.8.8.8
      - 4.2.2.4
      - 1.1.1.1

What I have tried:

I have tried adding dns to config compose file
Checking that all env variables are present
The Contentful server is accessible in the container

Getting 502 on Contentful request when deploying dockerized nextjs app

0 Answers0