预编译

Question

首先让我首先说一下，对于Ruby＆amp; amp; Rails，所以我希望我不会犯一个noob错误。

我已经找到了我已成功部署到heroku的应用程序的源代码;并且在开发模式下运行它工作正常，但当我将其切换到生产模式时，图像不会显示。

该应用正在使用 assets_sync Gem，并且应使用S3存储桶从AWS提供图像和其他资产。 css和js文件正确但不是图像。这篇文章很好地解释了它应该如何工作 https://firmhouse.com/blog/complete-guide-to-serving-your-rails-assets-over-s3-with-asset_sync

据我所知，css和图像是预编译的;使用从sass生成的css，并将图像组合成一个精灵。我发现这篇文章对于解释这里发生的事情很有用http://compass-style.org/help/tutorials/spriting/（对于经验丰富的rails开发人员来说可能并不新鲜）

如果我深入挖掘并查看正在运行的应用程序的css，则背景图片url属性将丢失网址中的存储桶名称。

这是一个例子;我确定//.s3部分应该是//mybucket.s3：

someclass {
    background: url(http://.s3.amazonaws.com/assets/myicon.png)
}

如果我把网址直接放在浏览器地址栏中 - 没有图像！但是，只要我添加了存储桶名称，就会下载图像。也就是说，以下工作确认了s3存储桶中存在的图像。

http://my-bucket.s3.amazonaws.com/assets/myicon.png

这意味着css没有预编译正确，也许无法从配置中找到存储桶名称。

我已检查过heroku配置是否正确。使用以下设置：

我花了相当多的时间在墙上搜索谷歌搜索没有结果的问题。那么以前是否有人看过这个问题，或者提出解决可能出现问题的方法？

Answer 1

好的，欢迎来到Rails社区！

从我自己使用asset_sync gem开始，我可以给出的最佳建议是在推送到Heroku之前在本地预编译。此外，您必须做几件事才能使其正常工作：

您需要使用CSS中的asset_path_helpers

您需要更改生产环境的asset_path，以反映S3实施

这是您需要做的事情：

-

<强>预处理

#app/assets/stylesheets/application.css.scss #-> notice the SCSS
someclass {
    background: asset_url("myicon.png")
}

您需要在Rails中使用one of the css preprocessors（基本上是SCSS），才能使用动态asset path helpers。这是第一步，因为它将正确引用您的资产。

-

资产主机

其次，您需要/config/environments/production.rb文件中的change the asset_host：

#config/environments/production.rb
config.action_controller.asset_host = "//#{ENV['FOG_DIRECTORY']}.s3.amazonaws.com"

这将允许Rails在您创建资产路径时为您的资产路径添加正确的网址，从而允许您通过S3

提供这些网址

-

最后，在使用asset_sync时，您应始终在本地进行预编译。我忘记了原因，但它主要是以正确的顺序获取所有文件等等：

$ rake assets:precompile RAILS_ENV=production

这允许asset_sync上传正确运行所需的文件。或者至少它应该：）