ruby - 在 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 block 来满足任何其他请求，该 block 返回内容类型为 text/html 的 index.html 文件。

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

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

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

并将您的 css 文件放在 public/css 目录中(在我写的时候，看起来您已经这样做了)。

这会解决您眼前的问题，但您可能会遇到问题，例如，如果您希望在顶级目录中有多个 HTML 页面。

另一种实现为任何没有路径的请求提供 index.html 服务的静态站点的解决方案可能是使用 rack-rewrite gem和一个 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 堆栈，您还可以查看 faking a php app in order to get “real” static hosting with Apache。

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