ruby-on-rails - 使用 asset_sync 通过 s3 进行 Rails Assets - CSS 背景图像 url 缺少 AWS 存储桶名称

Question

首先我要说的是，对于 Ruby 和 Rails，我完全是个新手，所以希望我没有犯菜鸟错误。

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

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

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

如果我深入挖掘并查看正在运行的应用程序的 css，则背景图像 url 属性缺少 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配置是否正确。进行以下设置:

• FOG_PROVIDER，
• AWS_ACCESS_KEY_ID
• AWS_SECRET_ACCESS_KEY
• FOG_DIRECTORY
• FOG_REGION

我花了相当多的时间在谷歌上搜索这个问题，但没有得到任何结果，这让我陷入了困境。 那么有没有人以前见过这个问题，或者提出解决可能出现问题的方法？

Answer 1

好的，欢迎来到 Rails 社区!

---

预编译

从我们自己使用 asset_sync gem 来看，我能给出的最好建议是在推送到 Heroku 之前在本地进行预编译。此外，您必须做几件事才能使其正常工作:

1. You need to use the asset_path_helpers in your CSS
2. You need to change the asset_path for your production environment, to reflect the S3 implementation

这是您需要执行的操作:

--

预处理

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

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

--

Assets 托管

其次，您需要 change the asset_host在您的 /config/environments/development.rb 文件中:

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

这将允许 Rails 在您创建 Assets 路径时将正确的 URL 添加到 Assets 路径前面，从而允许您从 S3 提供它们

--

最后，在使用 asset_sync 时，您应该始终在本地预编译。我忘记了原因，但本质上是为了以正确的顺序获取所有文件等:

$ rake assets:precompile RAILS_ENV=production

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