nginx deployment css normal download, but the page can not display properly css

Foreword

In a recent study of ant design of vue, based on this framework written permission of front-end architecture of a mock, just encountered a cloud to do the activities to buy a cloud server, ready to write their own examples of deployments demo run down look up effect, I did not expect to deploy up, but css can access the page to download the page to go down but not normal rendering themselves on the test environment and the machine is normal, through the investigation found Finally, since the server is based docker in nginx the deployment of a lack mime.types configuration file, because of their native nginx and test environments are deployed directly itself and therefore are included mime.types file and therefore can be a normal visit, so later modified it.

Error reproducibility

The following is the command to start docker without mime.types configuration file, if everyone on how to how to start nginx are not familiar with this blog I can look directly at docker: https://blog.csdn.net/linzhefeng89/article/ details / 101678391

docker run --name nginx-dev -p 8081:8081  -v /home/nginx/logs:/var/log/nginx  -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/html:/usr/share/nginx/html --privileged=true  -d docker.io/nginx

Then this time we visited deployed nginx server will find the following page:

our css has been downloaded normal down but it did not effect, which is why, by comparing my native I have found that when the Response Headers in return is not specified we read the type of file, thus resulting in not normal rendering our page.

Solve the problem

The next step is how we solve this problem is very simple and you only need to add mime.types configuration can be, and modify our nginx.conf configuration file:

#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}

http {
    sendfile        on;
    keepalive_timeout  65;
                      
    gzip  off;
    # 引入mime.types即可
    include       mime.types;
    default_type application/octet-stream;


    server {
        listen       8081;
        server_name  localhost;
        
        client_body_buffer_size 50m;
        client_max_body_size 50m;

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

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
       
    }
}

Then we start our nginx then again, and then we visit our nginx deployment server again, we can see that our server can be a normal loaded.

Here to solve the problems we encountered.