为什么当我 deproy 生产中的 Next.js 示例项目时 CSS 不起作用？
Why doesn't CSS work when I deproy the Next.js sample project in production?
我目前正在 Docker 中使用 Next.js 和 Nginx 开发应用程序。
CSS 在我 build 一个项目并检查浏览器中的显示后无法正常工作，如下所示。
我该如何解决这个问题？
部署过程及代码如下：
1.Make下一个项目
$ npx create-next-app@latest --use-npm next-nginx-docker
2.Make一个Dockerfile.prod
FROM node:16-alpine AS builder
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:1.19-alpine AS server
COPY ./etc/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app /
EXPOSE 80
3.Make一个docker-compose.prod.yml
version: "3"
services:
app:
build:
context: .
dockerfile: Dockerfile.prod
ports:
- "80:80"
4.Make一个nginx.conf
server {
listen 80;
listen [::]:80;
server_name mydomain.com;
root /.next/server/pages;
index index.html;
}
5.Upload创建的工程文件到远程服务器
6．在生产环境启动容器
$ sudo docker-compose -f docker-compose.prod.yml up -d
7.When我在浏览器里查看显示，CSS不行
8.Check浏览器显示index.html的view-source
- 单击下面与 CSS 相关的 link 将导致 404 错误。
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta charSet="utf-8"/>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="next-head-count" content="5"/>
<link rel="preload" href="/_next/static/css/27d177a30947857b.css" as="style"/>
<link rel="stylesheet" href="/_next/static/css/27d177a30947857b.css" data-n-g=""/>
<link rel="preload" href="/_next/static/css/149b18973e5508c7.css" as="style"/>
<link rel="stylesheet" href="/_next/static/css/149b18973e5508c7.css" data-n-p=""/>
<noscript data-n-css=""></noscript>
<script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script>
<script src="/_next/static/chunks/webpack-69bfa6990bb9e155.js" defer=""></script>
<script src="/_next/static/chunks/framework-00b57966872fc495.js" defer=""></script>
<script src="/_next/static/chunks/main-551bef8982a15171.js" defer=""></script>
<script src="/_next/static/chunks/pages/_app-f55443f2448c8e66.js" defer=""></script>
<script src="/_next/static/chunks/pages/index-bf8a59545a570ee7.js" defer=""></script>
<script src="/_next/static/vL3f544dl4bgUK74SRA_c/_buildManifest.js" defer=""></script>
<script src="/_next/static/vL3f544dl4bgUK74SRA_c/_ssgManifest.js" defer=""></script>
<script src="/_next/static/vL3f544dl4bgUK74SRA_c/_middlewareManifest.js" defer=""></script>
</head>
<body>
<div id="__next">
<div class="Home_container__bCOhY">
<main class="Home_main__nLjiQ"><h1 class="Home_title__T09hD">Welcome to <!-- --><a href="https://nextjs.org">Next.js!</a>
</h1>
<p class="Home_description__41Owk">Get started by editing<!-- --> <!-- --><code class="Home_code__suPER">pages/index.js</code>
</p>
<div class="Home_grid__GxQ85"><a href="https://nextjs.org/docs" class="Home_card___LpL1"><h2>Documentation
→</h2>
<p>Find in-depth information about Next.js features and API.</p></a><a href="https://nextjs.org/learn"
class="Home_card___LpL1"><h2>
Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p></a><a
href="https://github.com/vercel/next.js/tree/canary/examples" class="Home_card___LpL1"><h2>Examples
→</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p></a><a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
class="Home_card___LpL1"><h2>Deploy →</h2>
<p>Instantly deploy your Next.js site to a public URL with Vercel.</p></a></div>
</main>
<footer class="Home_footer____T7K"><a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank" rel="noopener noreferrer">Powered by<!-- --> <!-- --><span
class="Home_logo__27_tb"><span
style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span
style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img
style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
alt="" aria-hidden="true"
src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2772%27%20height=%2716%27/%3e"/></span><img
alt="Vercel Logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
decoding="async" data-nimg="intrinsic"
style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img
alt="Vercel Logo" srcSet="/vercel.svg 1x, /vercel.svg 2x" src="/vercel.svg" decoding="async"
data-nimg="intrinsic"
style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
loading="lazy"/></noscript></span></span></a></footer>
</div>
</div>
<script id="__NEXT_DATA__" type="application/json">{
"props": {
"pageProps": {}
},
"page": "/",
"query": {},
"buildId": "vL3f544dl4bgUK74SRA_c",
"nextExport": true,
"autoExport": true,
"isFallback": false,
"scriptLoader": []
}</script>
</body>
</html>
9.CheckCSS文件在容器中的目录
/.next/static/css # pwd
[更新]
就像发布的答案一样，我更改了 Dockerfile 但 CSS 不起作用
FROM node:16-alpine AS builder
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:1.19-alpine AS server
COPY ./etc/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app /
COPY --from=builder /app/public /public
EXPOSE 80
节点 16.0
Next.js 12.1
我认为您可能遗漏了以下内容：
COPY --from=builder /app/public ./public
在你
之后
RUN npm run build
在您的 Dockerfile 中，这应该会复制您的资产。
无论如何你可能想参考to the offical Dockerfile example
在您的 HTML 文件中，静态文件路径以 _next 开头。但是您的 Next.js 生成的代码在从 .next.
开始的路径中包含静态文件
您必须更改 nginx 配置才能从正确的位置获取 CSS/static 文件。
server {
listen 80;
listen [::]:80;
location ~ ^/_next/static/(.*)$ {
root /.next;
try_files "/static/" "/server/static/o" @proxy_pass;
}
server_name mydomain.com;
root /.next/server/pages;
index index.html;
}
由于Next JS使用SSR，静态网站使用ngix，所以需要使用node来托管next js网站。下面是我的下一个 js 应用 docker 文件，它适用于我。试试这个，让我知道。
# 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 yarn.lock ./
RUN yarn 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 export NODE_OPTIONS=--openssl-legacy-provider && yarn build && yarn install --production --ignore-scripts --prefer-offline
# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
# 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 --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
# USER nextjs
ENV PORT=80
EXPOSE 80
# 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.
ENV NEXT_TELEMETRY_DISABLED 1
CMD ["yarn", "start"]
我目前正在 Docker 中使用 Next.js 和 Nginx 开发应用程序。
CSS 在我 build 一个项目并检查浏览器中的显示后无法正常工作，如下所示。
我该如何解决这个问题？
部署过程及代码如下：
1.Make下一个项目
$ npx create-next-app@latest --use-npm next-nginx-docker
2.Make一个Dockerfile.prod
FROM node:16-alpine AS builder
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:1.19-alpine AS server
COPY ./etc/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app /
EXPOSE 80
3.Make一个docker-compose.prod.yml
version: "3"
services:
app:
build:
context: .
dockerfile: Dockerfile.prod
ports:
- "80:80"
4.Make一个nginx.conf
server {
listen 80;
listen [::]:80;
server_name mydomain.com;
root /.next/server/pages;
index index.html;
}
5.Upload创建的工程文件到远程服务器
6．在生产环境启动容器
$ sudo docker-compose -f docker-compose.prod.yml up -d
7.When我在浏览器里查看显示，CSS不行
8.Check浏览器显示index.html的view-source
- 单击下面与 CSS 相关的 link 将导致 404 错误。
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta charSet="utf-8"/>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="next-head-count" content="5"/>
<link rel="preload" href="/_next/static/css/27d177a30947857b.css" as="style"/>
<link rel="stylesheet" href="/_next/static/css/27d177a30947857b.css" data-n-g=""/>
<link rel="preload" href="/_next/static/css/149b18973e5508c7.css" as="style"/>
<link rel="stylesheet" href="/_next/static/css/149b18973e5508c7.css" data-n-p=""/>
<noscript data-n-css=""></noscript>
<script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script>
<script src="/_next/static/chunks/webpack-69bfa6990bb9e155.js" defer=""></script>
<script src="/_next/static/chunks/framework-00b57966872fc495.js" defer=""></script>
<script src="/_next/static/chunks/main-551bef8982a15171.js" defer=""></script>
<script src="/_next/static/chunks/pages/_app-f55443f2448c8e66.js" defer=""></script>
<script src="/_next/static/chunks/pages/index-bf8a59545a570ee7.js" defer=""></script>
<script src="/_next/static/vL3f544dl4bgUK74SRA_c/_buildManifest.js" defer=""></script>
<script src="/_next/static/vL3f544dl4bgUK74SRA_c/_ssgManifest.js" defer=""></script>
<script src="/_next/static/vL3f544dl4bgUK74SRA_c/_middlewareManifest.js" defer=""></script>
</head>
<body>
<div id="__next">
<div class="Home_container__bCOhY">
<main class="Home_main__nLjiQ"><h1 class="Home_title__T09hD">Welcome to <!-- --><a href="https://nextjs.org">Next.js!</a>
</h1>
<p class="Home_description__41Owk">Get started by editing<!-- --> <!-- --><code class="Home_code__suPER">pages/index.js</code>
</p>
<div class="Home_grid__GxQ85"><a href="https://nextjs.org/docs" class="Home_card___LpL1"><h2>Documentation
→</h2>
<p>Find in-depth information about Next.js features and API.</p></a><a href="https://nextjs.org/learn"
class="Home_card___LpL1"><h2>
Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p></a><a
href="https://github.com/vercel/next.js/tree/canary/examples" class="Home_card___LpL1"><h2>Examples
→</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p></a><a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
class="Home_card___LpL1"><h2>Deploy →</h2>
<p>Instantly deploy your Next.js site to a public URL with Vercel.</p></a></div>
</main>
<footer class="Home_footer____T7K"><a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank" rel="noopener noreferrer">Powered by<!-- --> <!-- --><span
class="Home_logo__27_tb"><span
style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span
style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img
style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
alt="" aria-hidden="true"
src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2772%27%20height=%2716%27/%3e"/></span><img
alt="Vercel Logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
decoding="async" data-nimg="intrinsic"
style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img
alt="Vercel Logo" srcSet="/vercel.svg 1x, /vercel.svg 2x" src="/vercel.svg" decoding="async"
data-nimg="intrinsic"
style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
loading="lazy"/></noscript></span></span></a></footer>
</div>
</div>
<script id="__NEXT_DATA__" type="application/json">{
"props": {
"pageProps": {}
},
"page": "/",
"query": {},
"buildId": "vL3f544dl4bgUK74SRA_c",
"nextExport": true,
"autoExport": true,
"isFallback": false,
"scriptLoader": []
}</script>
</body>
</html>
9.CheckCSS文件在容器中的目录
/.next/static/css # pwd
[更新]
就像发布的答案一样，我更改了 Dockerfile 但 CSS 不起作用
FROM node:16-alpine AS builder
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:1.19-alpine AS server
COPY ./etc/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app /
COPY --from=builder /app/public /public
EXPOSE 80
节点 16.0
Next.js 12.1
我认为您可能遗漏了以下内容：
COPY --from=builder /app/public ./public
在你
之后RUN npm run build
在您的 Dockerfile 中，这应该会复制您的资产。
无论如何你可能想参考to the offical Dockerfile example
在您的 HTML 文件中，静态文件路径以 _next 开头。但是您的 Next.js 生成的代码在从 .next.
您必须更改 nginx 配置才能从正确的位置获取 CSS/static 文件。
server {
listen 80;
listen [::]:80;
location ~ ^/_next/static/(.*)$ {
root /.next;
try_files "/static/" "/server/static/o" @proxy_pass;
}
server_name mydomain.com;
root /.next/server/pages;
index index.html;
}
由于Next JS使用SSR，静态网站使用ngix，所以需要使用node来托管next js网站。下面是我的下一个 js 应用 docker 文件，它适用于我。试试这个，让我知道。
# 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 yarn.lock ./
RUN yarn 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 export NODE_OPTIONS=--openssl-legacy-provider && yarn build && yarn install --production --ignore-scripts --prefer-offline
# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
# 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 --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
# USER nextjs
ENV PORT=80
EXPOSE 80
# 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.
ENV NEXT_TELEMETRY_DISABLED 1
CMD ["yarn", "start"]