Docker部署Nginx出现MIME类型错误，该如何解决？

问题场景 #

使用以下docker-compose.yml部署Nginx容器：

version: "1.0"
services:
  web:
    container_name: webserver
    image: nginx
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - ./frontend:/frontend
    ports:
      - "8001:80"
    environment:
      - NGINX_HOST=someweb.com
      - NGINX_PORT=80

对应的nginx.conf配置：

user www-data www-data;
worker_processes auto;

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name some.server;
        include /etc/nginx/mime.types;

        location / {
            root /frontend;
            index index.html;

            gzip_static on;
        }
    }
}

静态文件目录frontend结构：

├── assets
│   ├── index-af7a4a31.css
│   ├── index-ef3b217c.js
│   └── logo-e79ddb16.gif
├── bootstrap.min.css
├── bootstrap.min.js
├── favicon.ico
├── index.html
├── popper.min.js
└── logo.gif

访问网站时浏览器提示MIME类型错误：

The stylesheet http://192.168.68.112:8001/bootstrap.min.css was not loaded because its MIME type, “text/plain”, is not “text/css”.

The stylesheet http://192.168.68.112:8001/assets/index-af7a4a31.css was not loaded because its MIME type, “text/plain”, is not “text/css”.

The script from “http://192.168.68.112:8001/bootstrap.min.js” was loaded even though its MIME type (“text/plain”) is not a valid JavaScript MIME type.

添加include /etc/nginx/mime.types后问题仍未解决，CSS无法加载，JS有警告。

问题原因与解决 #

核心问题：include /etc/nginx/mime.types的位置错误 #

Nginx的types指令（定义MIME类型映射）属于http级别的配置项，需要放在http块下、server块之外。当前把include /etc/nginx/mime.types放在了server块内部，导致Nginx无法正确解析全局的MIME类型映射，最终默认返回text/plain类型。

修改后的nginx.conf #

user www-data www-data;
worker_processes auto;

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;  # 移到http块下，server块之外
    server {
        listen 80;
        server_name some.server;

        location / {
            root /frontend;
            index index.html;

            gzip_static on;
        }
    }
}

额外验证步骤 #

• 确认容器内/etc/nginx/mime.types文件存在：
  执行命令进入容器查看：

  docker exec -it webserver ls /etc/nginx/mime.types
  

  官方Nginx镜像默认包含该文件，若不存在可从官方镜像中复制一份到本地挂载目录。

• 重启Nginx容器使配置生效：

  docker-compose restart web
  

• 验证MIME类型是否正确返回：
  使用curl查看CSS文件的响应头：

  curl -I http://192.168.68.112:8001/bootstrap.min.css
  

  正常情况下响应头应包含Content-Type: text/css。

内容的提问来源于stack exchange，提问作者Parker