5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Resource interpreted as Stylesheet but transferred with MIME type text/plain のエラーの対処法

Last updated at Posted at 2018-12-10

エラー状況

Herokuにこんなサービスをアップしています。(メルカリだけ使えないので対応中です)
AWSに、unicorn + nginx + capistranoを使用し、こちらの記事を参考に作業を進め、ブラウザからアクセスすることに成功しました。
しかし、CSSが反映されていませんでした・・・JSや画像は読み込めておりasset周りに問題はなさそう。実際に検証画面からNetworkタブを見てみても、間違いなくCSSやJSや画像が読み込まれている・・・なのにCSSだけ反映されていない、そんな状況でした。

ConsoleにWarningが出ていた

検証画面のConsoleには、記事タイトルのワーニング:Resource interpreted as Stylesheet but transferred with MIME type text/plain が出ていました。
ローカルでサービスを起動してみても出てきましたが、Herokuにアクセスした場合はワーニングが出てこなかったので、ここが悪さをしているのではないか・・・

nginxのmime.typesが読み込めていなかった

Webサービス用のnginx設定ファイルがあるのですが、その中に以下のmime.types読み込みの設定をすることで解消できました。設定場所は、httpブロックの中です。

webservice.conf
http {

    include  mime.types;

}

nginx用のconfファイルには上記が最初から記入してあり、下記のように、webサービス用のconfをIncludeする設定が含まれていました。

nginx.conf
http {

    include  mime.types;

    include /etc/nginx/conf.d/*.conf;

}

そのため、nginx.confを読み込んでからwebservice.confを読み込む・・・問題ないな!と勘違いしていました。実際は調べたところ、webservice.confのみが読み込まれており、mime.typesのincludeは反映されていなかったので、追記してみたところ解消した次第です。
一緒に解決法を探してくださったAmazon Loftの技術者の方ありがとうございました。

このエラーの解消法は探しても見当たらなかったので記事にしてみました。
誰かのお役に立てれば幸いです。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?