Следующее приложение js (работающее внутри контейнера docker) не загружает статические изображения файлов, расположенные в общедоступном каталоге

#reactjs #docker #next.js

Вопрос:

Я пытаюсь запустить следующее приложение js локально внутри файла docker. Когда я запускаю контейнер, все работает так, как ожидалось, за исключением того, что мои файлы изображений не отображаются на странице. Проверка с помощью инструментов разработчика указывает на сбой сетевого запроса для этих изображений (код 4XX не указан). Неудачный запрос выглядит следующим образом:

введите описание изображения здесь

Когда я создаю npm run build и запускаю приложение локально npm run start , я вижу, что этот же запрос успешно выполняется. Та же история успеха, когда я работаю в режиме разработки npm run dev .

Вот раздел кода, в котором используется следующий модуль изображения. import Image from "next/image";

   <Image
    src="/images/computerStation.png"
    alt=""
    height={300}
    width={600}
  />
 

И мое дерево общедоступных каталогов:

 root   
│
└───public
    │   
    └───images
        │
        └───computerStation.png
 

Учитывая мой успех в локальной сборке/разработке, я думаю, что я делаю что-то не так с моим файлом docker. Я в значительной степени просто вырвал это из следующих документов js и настроил его для работы с npm вместо yarn. Смотрите Файл Dockerfile ниже:

 # Install dependencies only when needed
FROM node: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 ./
RUN npm install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build

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

ENV NODE_ENV production

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN chown -R nextjs:nodejs /app/.next
USER nextjs

EXPOSE 3000

# 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.
RUN npx next telemetry disable

CMD ["node_modules/.bin/next", "start"]
 

Любая помощь в этом будет весьма признательна. Спасибо!

Ответ №1:

Вам нужно проверить версию узла docker, которая должна быть

 FROM node:14-alpine AS deps

FROM node:14-alpine AS builder

FROM node:14-alpine AS runner
 

Next.js возникли некоторые проблемы в узле 16 (узел:альпийский).

Комментарии:

1. Это сработало, спасибо! Должно быть, я пропустил это в документах.