为什么我的 NextJS 14 应用程序在 Docker 容器中运行时没有响应？

Question

我有一个在 Docker 中运行的 Next 14 应用程序。构建完成，控制台会输出本地和网络 URL 来访问它，但是当我点击它们时，它们会挂起或给出类似主机“没有发送任何数据”的消息。

看起来下一个应用程序在 Docker 容器内正常启动，但由于某种原因访问它无法正常工作。

如果有人可以提供如何为 Next 14 获取可用 docker 镜像的帮助或示例，那就太好了。以下是我的 docker 文件供参考：

FROM node:18-alpine AS base

# 1. Install dependencies only when needed
FROM base AS deps
RUN apk add --no-cache libc6-compat

WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json pnpm-lock.yaml ./
COPY .npmrc ./
COPY ./src/constants/json/account.json ./account.json

ENV GOOGLE_APPLICATION_CREDENTIALS=./account.json

RUN  yarn global add pnpm && pnpm artifact-login && pnpm i; 

# 2. Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
# This will do the trick, use the corresponding env file for each environment.
COPY .env.development .env.production
RUN yarn global add pnpm && pnpm build

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

ENV NODE_ENV=production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

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

# 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 ./standalone
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static


USER nextjs

EXPOSE 3000

ENV PORT 3000
ENV HOSTNAME localhost

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

我尝试在新创建的接下来 14 个应用程序上运行更简单的 docker 版本，但没有成功。 还使用 docker ps 确保端口正确。他们正如预期的那样：

0.0.0.0:3000->3000/tcp

。

Answer 1

我怀疑问题与在

HOSTNAME

末尾设置

Dockerfile

有关。

这是一个可以使用的稍微精简的版本。我建议从这个开始，然后分层诸如

GOOGLE_APPLICATION_CREDENTIALS

之类的东西，直到你拥有你需要的东西。

├── Dockerfile
├── next.config.js
├── package.json
└── pages
    ├── _document.js
    └── index.js

🗎

Dockerfile

FROM node:18-alpine AS base

WORKDIR /app

FROM base AS deps
RUN apk add --no-cache libc6-compat

COPY package.json .
COPY .npmrc .

RUN  yarn global add pnpm && pnpm i

FROM base AS builder

COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN yarn global add pnpm && pnpm build

FROM base AS runner

ENV NODE_ENV=production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

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

USER nextjs

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

🗎

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
  productionBrowserSourceMaps: false,
}

module.exports = nextConfig

我不知道你的应用程序是什么样的，但为了说明目的，仅使用一个页面来显示它的工作原理。

1. 树立形象。
2. 运行指定

   -p 3000:3000

   的容器以公开端口。