在heroku中的静态网站中加载css文件

Question

我的config.ru情况如下:

use Rack::Static, 
  :urls => ["/images"],
  :root => "public"

run lambda { |env|
  [
    200, 
    {
      'Content-Type'  => 'text/html', 
      'Cache-Control' => 'public, max-age=86400' 
    },
    File.open('public/index.html', File::RDONLY)
  ]
}

当我在本地加载它时,网站看起来很好,但是当我在Heroku上运行时,我在浏览器控制台中为CSS文件收到以下错误消息:

Resource interpreted as Stylesheet but transferred with MIME type text/html.

知道我为什么会收到这些错误吗？

示例站点:http://salus8.heroku.com.

Answer 1

您的应用目前以两种不同的方式响应请求./images通过搜索/public/images文件夹并返回与请求匹配的任何文件来提供以请求开头的请求.通过运行lambda块来提供任何其他请求,该块返回index.html内容类型为的文件text/html.

这适用于任何其他请求,因此当您的页面引用css文件并且浏览器尝试获取它时,您的应用程序将返回index.html具有HTML内容类型的页面,因此会显示有关MIME类型的警告.

解决此问题的一种方法是添加/css到Static中间件处理的URL列表:

use Rack::Static, 
  :urls => ["/images", "/css"],
  :root => "public"

并将您的css文件放在public/css目录中(因为我写的,看起来你已经完成了这个).

这可以解决您当前的问题,但是如果您想在顶层目录中拥有多个HTML页面,则可能会遇到问题.

另一个实现静态站点的解决方案index.html可以使用rack-rewritegem和Rack::File应用程序来实现一个静态站点,该站点可以处理任何没有路径的请求,这就是你在这里尝试做的事情.添加gem 'rack-rewrite'到您的Gemfile,然后使用config.ru如下所示:

require 'rack/rewrite'

use Rack::Rewrite do
  rewrite "/", "/index.html"
end

run Rack::File.new("public")

这将响应 具有匹配文件的所有请求(如果存在),并且将获得没有路径的任何请求index.html.(请注意,它不会index.html用于主目录下的子目录请求).

如果您正在使用Heroku的Cedar堆栈,您还可以考虑伪造一个php应用程序,以便通过Apache获得"真正的"静态托管.

我不知道为什么这会在本地工作,但不能在Heroku上工作,除非你只是直接在浏览器中打开文件.您是在本地运行服务器(例如,使用rackup),还是直接查看文件？