web-dev-qa-db-ja.com

Nginxが単純なPHPプロジェクトでCSSを正しく提供しない

私はこれのいくつかの例を見ました:Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3001/assets/css/bootstrap.min.css"。しかし、私はそれを引き起こしているかもしれないものを理解することができませんでした。

私のシンプルなPHP=プロジェクトのCSSファイルは提供されていません。ステータスコードは200であり、ファイルはロードされ、その内容は開発者コンソールから表示できます。また、 /etc/nginx/mime.typesファイルを確認すると、text/cssのエントリがあります。最後に、これが私のサイト構成です。

server {
    listen 3001 default_server;
    listen [::]:3001 default_server;

    server_name _;

    location / { 
        root /media/common/code/projects/newdf;
        try_files $uri $uri/ =404;
        include fastcgi_params;
        fastcgi_index index.php;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
    }   
}

コードでも、HTMLタグはタイプをtext/cssとして指定します。

<link rel="stylesheet" type="text/css" href="<?php echo $server_url; ?>/assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo $server_url; ?>/assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo $server_url; ?>/assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="<?php echo $server_url; ?>/assets/css/style.css">

何が起こっているのか理解できません。

興味深いことに、JSファイルはエラーなしでロードされます。組み込みのPHPサーバーでサイトを実行しても問題はありません。

3
ankush981

基本的な問題は、静的コンテンツと動的コンテンツの両方のphp-fpmを介してすべてのコンテンツを提供していることです。通常、nginxが静的コンテンツを提供できるようにします。その場合、nginxは、ファイル拡張子に基づいてContent-Typeヘッダーを設定します。

現在の構成では、すべてがphp-fpmに渡され、Content-Typeのデフォルトのtext/htmlを受け取ります。おそらく、これを機能させるためにsecurity.limit_extensionsを無効にしています。

静的コンテンツ用と動的コンテンツ用の2つのlocationブロックを使用できます。以下はあなたの質問と この例はnginx wikiから に基づいています:

server {
    listen 3001 default_server;
    listen [::]:3001 default_server;

    root /media/common/code/projects/newdf;
    index index.php;

    location / { 
        try_files $uri $uri/ =404;
    }

    location ~ [^/]\.php(/|$) {
        fastcgi_split_path_info ^(.+?\.php)(/.*)$;
        if (!-f $document_root$fastcgi_script_name) {
            return 404;
        }

        include fastcgi_params;
        fastcgi_index index.php;
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
        fastcgi_param HTTP_PROXY "";
        fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
    }   
}

編集:パス情報を必要としないアプリケーションのために、次の簡略化された例を追加しました:

server {
    listen 3001 default_server;
    listen [::]:3001 default_server;

    root /media/common/code/projects/newdf;
    index index.php;

    location / { 
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        try_files $uri =404;

        include fastcgi_params;
        fastcgi_pass unix:/run/php/php7.0-fpm.sock;
        fastcgi_param HTTP_PROXY "";
        fastcgi_param SCRIPT_FILENAME $request_filename;
    }   
}
3
Richard Smith