Rails 4 + Sass - нет фонового изображения в процессе производства

Я знаю, что на этом есть много подобных вопросов/ответов, и я пробовал хотя бы 7 из предложенных методов. Я могу отображать фоновое изображение приложения локально различными способами. Пробовав около 40 часов, кажется, нет никакого способа сделать это на производстве. Она работает на следующее:Rails 4 + Sass - нет фонового изображения в процессе производства

Рубин 2.1.5
Rails 4.1.8
Puma 2,1 с помощью Amazon Elastic Beanstalk (один экземпляр - без балансировки нагрузки)

Я пробовал каждая комбинация config.serve_static_assets = [true | false] и установка RAILS_SKIP_ASSET_COMPILATION в true и false.

Ран рек активов: прекомпиляции RAILS_ENV = производство

Пытался каждый путем я могу думать, но это не находя фоновое изображение. Одна вещь, которую я заметил, это то, что прекомпиляция изменяет имя изображения при копировании в каталог public/assets. (пример: «foo.jpg» становится «foo-ilfajwe8hjsa8erfjsdf.jpg») Поэтому я попытался скопировать исходные файлы изображений в новый каталог public/assets, надеясь, что приложение найдет их там. Это не сработало.

Я думаю, что это может быть так, как я ссылаюсь на него в моем css, потому что странно отображается файл favicon, как и шрифты из папки «fonts» моего приложения. И оба имеют свои имена, добавленные так же, как и фоновое изображение.

Вот мой application.html.erb ..

<!DOCTYPE html> 
<html> 
<head> 
    <title>Capstone v1.4.5</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
    <%= favicon_link_tag 'capstone_icon.png' %> 
</head> 
<body> 
    <% if notice %> 
     <p class="alert alert-success"><%= notice %></p> 
    <% end %> 
    <% if alert %> 
     <p class="alert alert-danger"><%= alert %></p> 
    <% end %> 
    <%= render 'navigation' %> 
    <main> 
     <%= yield %> 
    </main> 
</body> 
</html>

Вот application.css.sass ..

/* 
*= require bootstrap.min 
*/ 

@import "bootstrap-sprockets" 
@import "bootstrap" 

@font-face 
    font-family: 'Cinzel-Regular' 
    src: font-url('Cinzel-Regular.ttf') 

@font-face 
    font-family: 'Oxygen' 
    src: font-url('Oxygen.otf') 

html 
    position: relative 
    min-height: 100% 

body 
    background-image: image-url("snowy_prairie_bg.jpg") 
    background-repeat: no-repeat 
    background-position: center top 
    font-family: 'Oxygen' 
    margin: 0 0 95px

Содержание моего общественного каталога (после прекомпиляция)

application-6cca23f2f72df0ad7d26279535719396.css 
application-6cca23f2f72df0ad7d26279535719396.css.gz 
application-fddd9c84ba451526dbd2ef5bf46e494c.js 
application-fddd9c84ba451526dbd2ef5bf46e494c.js.gz 
bootstrap 
capstone_icon-ed6ffe0ae4bbbb56a8b74a4d7ff230cf.png 
capstone_icon.png 
Cinzel-Regular-59dcda430d3afc3ace221f1835d7fb08.ttf 
images 
manifest-73d04c0fd1290b15fb280becfcf62b7b.json 
Oxygen-1c736bd9242de63cf87c07f0a48c9b5c.otf 
Oxygen-Bold-01bc72645c864aa090d57754565ef634.otf 
Oxygen-BoldItalic-cfe32a5aedef7b25f8b1efdfcbdbd72a.otf 
Oxygen-Italic-2a51c29c8f2bd242ac27e6fb7860f6a1.otf 
snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a.jpg 
snowy_prairie_bg.jpg

Я ссылаюсь на изображение неправильно в моем css? Опять же, это делает большой локально. Должен ли я использовать Пассажир вместо Puma? Это не очень маленькое приложение, и я много вкладываю в базу данных, также размещенную на Amazon. Но, как я уже сказал, Я приближаюсь 40 часов, просто пытаясь получить этот фон, сделанный.

Если у вас есть идеи, пожалуйста, помогите. Я готов попробовать что угодно!

Спасибо

FYI - вышеуказанные бутстрэпами, шрифты, изображения и другие SASS стили делают отлично. Это только фоновое изображение. Спасибо

EDIT: Когда я перехожу на страницу, capstonesavings.com, в dev отображается следующая ошибка. console: Не удалось загрузить ресурс: сервер ответил статусом 403 (Запрещено). Нужно ли мне менять разрешения на что-то?

источник

2015-03-21 B. Bulpett

ОК, ТАК Я ДУМАЮ, ЧТО Я ИСКЛЮЧАЛ ЭТО!

Большая часть приведенного выше кода является правильным, но я изменил следующее из вышеприведенного application.css.sass ..

Изменено

background-image: image-url("snowy_prairie_bg.jpg")

Для

background-image: asset-url("snowy_prairie_bg.jpg")

Затем I SSH'ed в примере (eb ssh) и сделал следующее:

кд/вар/приложение/тока

следует

Суда CHMOD 755 государственных/активов/snowy_prairie_bg-d246fbbe1178a09d38df31be96aee79a. jpg

Я уже пробовал вышеупомянутое изменение в SaSS, но это не сработало без изменения разрешений. Благодаря инструментам разработчика Chrome я заметил (крошечный) флаг ошибки при визуализации страницы. Я щелкнул его, и он показал ошибку 403, которую я добавил в приведенном выше правиле. Это то, что Amazon использует для обеспечения безопасности, поскольку я предполагаю, что вы можете перенаправить ваши файлы журналов и т. Д. В соответствующий ведро S3. Вот почему я явно нацелил рассматриваемое изображение при изменении perms. На этом сайте не будет тонны изображений, но если бы это было так, я бы, вероятно, потратил время на разработку хранилища в ведре и установил более широкие perms соответственно.

Это спасло мне день. Надеюсь, это поможет кому-то другому.

источник

2015-03-21 22:24:48

Rails 4 + Sass - нет фонового изображения в процессе производства

ответ

Смежные вопросы