Nginx 导致 React 应用程序的静态构建中断

Question

我正在尝试使用 Nginx 为 ReactJS 应用程序的静态构建提供服务，但发生了一些非常奇怪的事情：未应用样式表并且未加载图像。我可以在开发人员工具中看到资源在那里（见下图），只是没有得到应用。然而，javascript文件是运行--否则屏幕上不会有任何内容。

更奇怪的是，我尝试使用 python http 服务器（命令：python3 -m http.server 80）在同一目录中提供文件，结果很好；所有资产都已正确加载。

因为它似乎是一个 nginx 问题，这是我的 nginx 配置：

nginx.conf

events {
    worker_connections 1024;
}

http {
    resolver 127.0.0.11;

    # Http redirect to https (unless it's a challenge)
    server {
        listen 80;
        listen [::]:80;

        server_name ambitx.io www.ambitx.io wc.ambitx.io rk.ambitx.io;
        server_tokens off;

        include letsencrypt.conf;

        location / {
            return 301 https://$server_name$request_uri;
        }
    }

    # React frontend
    server {
        listen 443 default_server ssl http2;
        listen [::]:443 ssl http2;

        server_name ambitx.io www.ambitx.io;
        
        include ssl.conf;
        include letsencrypt.conf;
        
        location / {
            root /var/www/staticfiles;
            index  index.html index.htm;
            try_files $uri /index.html =404;
        }
    }

    # Websocket backend
    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        
        server_name wc.ambitx.io;

        include ssl.conf;
        include letsencrypt.conf;

        location / {
            proxy_pass "http://wsserver:8080";
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }
    }

    # Rocket backend
    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;

        server_name rk.ambitx.io;

        include ssl.conf;
        include letsencrypt.conf;

        location / {
            proxy_pass "http://rocketserver:80";
        }
    }
}

letsencrypt.conf

location /.well-known/acme-challenge/ {
    root /var/www/certbot;
}

ssl.conf

ssl_certificate /etc/letsencrypt/live/ambitx.io/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/ambitx.io/privkey.pem;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # don't use SSLv3. Ref: POODLE
ssl_prefer_server_ciphers on;

在此先感谢您的帮助。

Answer 1

我想通了：原来 Nginx 服务器缺少它的 MIME 类型（浏览器认为 css 文件是 text/plain 而不是 text/css）。

通常最好的做法是将文件添加到 /etc/nginx/conf.d/（并将您的 docker 卷安装在那里）而不是编辑 nginx.conf 直接，但我希望能够将其他文件放在 /etc/nginx/ 目录中，所以我决定挂载我的 docker那里的音量。

事实证明，这是一个坏主意。我在 docker 容器中覆盖了许多其他重要的配置文件。现在，我可以将所有这些文件复制到我的 docker 卷中并称其为好，但我认为以“正确”的方式这样做是值得的，这样我以后就不会搞砸了。

所以，现在我在 /etc/nginx/cond.f/ 上安装了一个 docker 卷，在 [=20= 上安装了另一个卷]/etc/nginx/lib/ 这样我就可以在没有主要 nginx.conf 读取的情况下导入文件作为服务器配置。

Nginx 导致 React 应用程序的静态构建中断

Nginx causes static build of React app to break

nginx

reactjs