React - Docker 部署 - Issue - MIME 类型 texthtml 不是 textcss

背景简介

 Nginx 服务器在处理静态文件时返回了错误的 MIME 类型。具体来说，JavaScript 和 CSS 文件被错误地标记为 text/html，这导致浏览器无法正确解析这些文件。

环境信息

1. Nginx 1.22.1

解决步骤

第一步： 确保 Docker 容器中的 nginx.conf 包含 MIME 类型配置

http {
    # ...

    include /etc/nginx/mime.types;
    default_type application/octet-stream;
    
}

第二步： 在 React App 代理的 /etc/nginx/conf.d/app.conf 配置文件中添加静态文件处理

server {
    listen 80;

    # 使用环境变量来设置server_name
    server_name your_server_name;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri /index.html;
    }

    # 如果需要，可以添加一个专门处理静态文件的位置块
    location ~* \.(js|css)$ {
        root /usr/share/nginx/html;
        expires 1h; # 设置缓存策略
        add_header Cache-Control "public, no-cache";
        try_files $uri =404;
    }
}

可选步骤： 如在实际部署的环境中外部再次使用 Nginx进行代理，则需添加静态文件配置。

server {
    	listen 80;

    	# 使用环境变量来设置server_name
    	server_name your_server_name;
    
        location /static/ {
                proxy_pass http://127.0.0.1:30065/static/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }
        
        location / {
                proxy_pass http://127.0.0.1:30065;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;

                # 开启 gzip 压缩
                gzip on;
                gzip_types text/css application/javascript application/json application/xml text/plain text/x-component;
                gzip_vary on;

                # 设置缓存策略
                expires 1h;
                add_header Cache-Control "public, no-cache";

                # 确保正确处理前端路由
                try_files $uri /index.html;
        }

以上便是本文的全部内容，感谢您的阅读，如遇到任何问题，欢迎在评论区留言讨论。