为啥使用 nginx 服务的网站没有应用样式

Posted 2023-02-24

【中文标题】为啥使用 nginx 服务的网站没有应用样式

【英文标题】：Why sites served with nginx have no styling applied为什么使用 nginx 服务的网站没有应用样式

【发布时间】：2019-05-10 00:38:58

【问题描述】：

我尝试使用 nginx 在 localhost/ 上构建 react 应用程序。据我了解，我需要使用“npm run build”构建应用程序，然后为构建目录提供静态内容。几个小时后，我设法让它与 docker 和我的 django 服务一起作为 localhost/api/ 下的 api 工作。但是这个网站上的css和js不起作用。在任何页面上，它都没有反应或 django 端点，只有带有附加 css 但无法正常工作的原始 html。在多次尝试更改配置等之后，我以相同的原始 html 结束。为什么在 nginx 上网站上没有样式，即使检查这些页面也有链接到它们的 css。 这是我的nginx.conf

http 

  server 
  listen 80;
  listen [::]:80;
        root /var/www/html;
  server_name localhost;
         index index.html index.htm;
  location /api/ 
        proxy_pass "http://web:8000/";

  location / 
        include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;

        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ 
        root /var/www/html;
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        

这是docker-compose的一部分

  nginx:
    image: nginx:latest
    ports:
      - 80:80
      - 443:443
    volumes:
    - ./nginx_conf/:/etc/nginx/
    - ./frontend/build/:/var/www/html/
    depends_on:
      - web

当我使用 npm start 运行此应用程序时：image 当我在运行 nginx 的情况下进入 localhost/ 时：image

【问题讨论】：

我想，你没有用 nginx 正确地提供 .css 文件。当您使用npm start 运行它时，开发服务器正在运行，默认情况下它会自动处理对本地项目静态文件的请求。

是的，我知道。但我可以看到 nginx 在控制台中提供了这些文件。 pastebin.com/PXEb5iWc

您的意思是，在浏览器的 Network 选项卡中，您会看到200 用于这些文件？如果是真的，你能看一下文件的内容吗？这正是那个文件，或者，mb，它只是 HTML？

是的，我可以在状态为 200 的网络选项卡 css 文件中看到。

请检查文件内容。或者只是转到这些文件的 url。您可能会看到您的网页而不是文件。

【参考方案1】：

好吧，我不明白为什么。但是我在搞乱检查员，我不小心点击了禁用 http 缓存并加载了引导程序！？我真的不知道如何，但现在它可以工作了。

【讨论】：

好吧，Sh*t 发生了 :)