个人中心
gpt4 book ai didi

node.js - 为什么我在生产环境中 deproy Next.js 示例项目时 CSS 不起作用？

转载 作者：行者123 更新时间：2023-12-05 01:04:38 26 4
gpt4 key购买 nike

我目前正在 Docker 中使用 Next.js 和 Nginx 开发应用程序。

CSS 在我 build 一个项目并检查浏览器中的显示后，如下所示。

我该如何解决这个问题？

要部署的流程和代码如下:

1.制作下一个项目

$ npx create-next-app@latest --use-npm next-nginx-docker

2.制作一个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.制作一个docker-compose.prod.yml

version: "3"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile.prod
    ports:
      - "80:80"

4.制作一个nginx.conf

server {
   listen 80;
   listen [::]:80;

   server_name mydomain.com;
   root /.next/server/pages;
   index index.html;

}

5.将创建好的工程文件上传到远程服务器

6．在生产环境中启动容器

$ sudo docker-compose -f docker-compose.prod.yml up -d

7.当我在浏览器中查看显示时，CSS不起作用

enter image description here

8.查看浏览器显示的index.html的view-source

  • 点击下方与 CSS 相关的链接会导致 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&amp;utm_medium=default-template&amp;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&amp;utm_medium=default-template&amp;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.查看容器中CSS文件的目录

/.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

Node 16.0

Next.js 12.1

最佳答案

在您的 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;

}

关于node.js - 为什么我在生产环境中 deproy Next.js 示例项目时 CSS 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71739571/

26 4 0
文章推荐： c++ - 演示 move 构造函数的有用性
文章推荐： r - 检查矩阵中的至少 2 列是否至少有 3 个值...但它们必须在同一行中(用于成对测试)
文章推荐： 从 r 中的列中删除重复的元素
文章推荐： javascript - 无法在 react 中安装@mui/x-data-grid
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com