当我在生产中部署 Next.js 示例项目时，为什么 CSS 不起作用？
Tio*_*Tio 4 node.js docker reactjs next.js
我目前正在开发一个使用Next.js和 的Nginx应用程序Docker。
CSSbuild在我创建一个项目并检查浏览器中的显示后，它不起作用，如下所示。
我该如何解决这个问题？
\n\n
部署的流程和代码如下\xef\xbc\x9a
\n1.制定下一个项目
\n$ npx create-next-app@latest --use-npm next-nginx-docker\n2.制作Dockerfile.prod
\nFROM node:16-alpine AS builder\n\nWORKDIR /app\n\nCOPY package.json ./\n\nCOPY package-lock.json ./\n\nRUN npm install\n\nCOPY . .\n\nRUN npm run build\n\nFROM nginx:1.19-alpine AS server\n\nCOPY ./etc/nginx.conf /etc/nginx/conf.d/default.conf\n\nCOPY --from=builder /app /\n\nEXPOSE 80\n3.制作docker-compose.prod.yml
\nversion: "3"\n\nservices:\n app:\n build:\n context: .\n dockerfile: Dockerfile.prod\n ports:\n - "80:80"\n4.制作nginx.conf
\nserver {\n listen 80;\n listen [::]:80;\n\n server_name mydomain.com;\n root /.next/server/pages;\n index index.html;\n\n}\n5.将创建的工程文件上传到远程服务器
\n6\xef\xbc\x8e生产环境启动容器
\n$ sudo docker-compose -f docker-compose.prod.yml up -d\n7.当我检查浏览器中的显示时，CSS不起作用
\n
8.检查浏览器中显示的index.html的view-source
\n- \n
- 单击下面与 CSS 相关的链接将导致 404 错误。 \n
索引.html
\n<!DOCTYPE html>\n<html>\n<head>\n <meta name="viewport" content="width=device-width"/>\n <meta charSet="utf-8"/>\n <title>Create Next App</title>\n <meta name="description" content="Generated by create next app"/>\n <link rel="icon" href="/favicon.ico"/>\n <meta name="next-head-count" content="5"/>\n <link rel="preload" href="/_next/static/css/27d177a30947857b.css" as="style"/>\n <link rel="stylesheet" href="/_next/static/css/27d177a30947857b.css" data-n-g=""/>\n <link rel="preload" href="/_next/static/css/149b18973e5508c7.css" as="style"/>\n <link rel="stylesheet" href="/_next/static/css/149b18973e5508c7.css" data-n-p=""/>\n <noscript data-n-css=""></noscript>\n <script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script>\n <script src="/_next/static/chunks/webpack-69bfa6990bb9e155.js" defer=""></script>\n <script src="/_next/static/chunks/framework-00b57966872fc495.js" defer=""></script>\n <script src="/_next/static/chunks/main-551bef8982a15171.js" defer=""></script>\n <script src="/_next/static/chunks/pages/_app-f55443f2448c8e66.js" defer=""></script>\n <script src="/_next/static/chunks/pages/index-bf8a59545a570ee7.js" defer=""></script>\n <script src="/_next/static/vL3f544dl4bgUK74SRA_c/_buildManifest.js" defer=""></script>\n <script src="/_next/static/vL3f544dl4bgUK74SRA_c/_ssgManifest.js" defer=""></script>\n <script src="/_next/static/vL3f544dl4bgUK74SRA_c/_middlewareManifest.js" defer=""></script>\n</head>\n<body>\n<div id="__next">\n <div class="Home_container__bCOhY">\n <main class="Home_main__nLjiQ"><h1 class="Home_title__T09hD">Welcome to <!-- --><a href="https://nextjs.org">Next.js!</a>\n </h1>\n <p class="Home_description__41Owk">Get started by editing<!-- --> <!-- --><code class="Home_code__suPER">pages/index.js</code>\n </p>\n <div class="Home_grid__GxQ85"><a href="https://nextjs.org/docs" class="Home_card___LpL1"><h2>Documentation\n \xe2\x86\x92</h2>\n <p>Find in-depth information about Next.js features and API.</p></a><a href="https://nextjs.org/learn"\n class="Home_card___LpL1"><h2>\n Learn \xe2\x86\x92</h2>\n <p>Learn about Next.js in an interactive course with quizzes!</p></a><a\n href="https://github.com/vercel/next.js/tree/canary/examples" class="Home_card___LpL1"><h2>Examples\n \xe2\x86\x92</h2>\n <p>Discover and deploy boilerplate example Next.js projects.</p></a><a\n href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"\n class="Home_card___LpL1"><h2>Deploy \xe2\x86\x92</h2>\n <p>Instantly deploy your Next.js site to a public URL with Vercel.</p></a></div>\n </main>\n <footer class="Home_footer____T7K"><a\n href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"\n target="_blank" rel="noopener noreferrer">Powered by<!-- --> <!-- --><span\n class="Home_logo__27_tb"><span\n 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\n 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\n style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"\n alt="" aria-hidden="true"\n 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\n alt="Vercel Logo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n decoding="async" data-nimg="intrinsic"\n 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\n alt="Vercel Logo" srcSet="/vercel.svg 1x, /vercel.svg 2x" src="/vercel.svg" decoding="async"\n data-nimg="intrinsic"\n 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%"\n loading="lazy"/></noscript></span></span></a></footer>\n </div>\n</div>\n<script id="__NEXT_DATA__" type="application/json">{\n "props": {\n "pageProps": {}\n },\n "page": "/",\n "query": {},\n "buildId": "vL3f544dl4bgUK74SRA_c",\n "nextExport": true,\n "autoExport": true,\n "isFallback": false,\n "scriptLoader": []\n}</script>\n</body>\n</html>\n9.检查容器中CSS文件的目录
\n/.next/static/css # pwd\n\n
[更新]
\n就像发布的答案一样，我更改了Dockerfile但CSS不起作用
FROM node:16-alpine AS builder\n\nWORKDIR /app\n\nCOPY package.json ./\n\nCOPY package-lock.json ./\n\nRUN npm install\n\nCOPY . .\n\nRUN npm run build\n\n\nFROM nginx:1.19-alpine AS server\n\nCOPY ./etc/nginx.conf /etc/nginx/conf.d/default.conf\n\nCOPY --from=builder /app /\nCOPY --from=builder /app/public /public\n\nEXPOSE 80\n\n
节点16.0
\nNext.js 12.1
\n在 HTML 文件中，静态文件路径以_next. 但是您的 Next.js 生成的代码在从.next.
您必须更改 nginx 配置才能从正确的位置获取 CSS/静态文件。
server {
listen 80;
listen [::]:80;
location ~ ^/_next/static/(.*)$ {
root /.next;
try_files "/static/$1" "/server/static/o$1" @proxy_pass;
}
server_name mydomain.com;
root /.next/server/pages;
index index.html;
}
| 归档时间： |
|
| 查看次数： |
9315 次 |
| 最近记录： |