Итак, на своём сайте мы столкнулись с ошибкой 504 Gateway Time-out и не знаем, что же делать. В этом посте постараюсь описать полный алгоритм действий для решения этой проблемы, а так же поведать о причинах её возникновения. Следуйте под кат!
Так вот, продолжим. Для начала выясним, что это за HTTP код ошибки такой, а точнее, что же он означает? 504 - пятьсот четвёртая ошибка, она же Gateway Timeout, а точнее, на русском это звучит примерно так: «Время прохождения через шлюз истекло». Код означающий, что сервер при работе в качестве внешнего шлюза или прокси-сервера не получил своевременно отклик от вышестоящего бэкенда сервера, к которому он обратился, пытаясь исполнить запрос.
По этой ошибке легко можно представить внутреннюю организацию вашего web сервера. Это явно связка двух web серверов в которой один выступает в роли фронтенда (переднего сервера) и второй в качестве бэкенда (заднего сервера). И скорее всего, так бывает в 99% случаев, установлен веб сервер nginx, который выступает в качестве фронтенда и так же стоит сервер Apache в качестве бэкенда. Nginx берёт на себя роль распределяющего proxy сервера и отдаёт статику (картинки, файлы), а apache вместе с PHP обрабатывает динамику, там же и MySQL неподалёку. И ошибку 504 Gateway Time-out вы получаете именно от nginx.
В общем вернёмся к делу. Ситуация предельно ясна! За отведённое время сервер nginx просто не дожидается обратного ответа от apache и сообщает об этом вам. Т.е. прослеживаются явные перегрузки на «внутренней» стороне бэкенда. Другой вопрос в том, что именно порождает эти перегрузки от чего apache не успевает во время ответить? Это уже вопрос другой. Тут так просто не разобраться, надо смотреть логи сервера. Ну понятное дело, что кто то перегружен. Либо скрипт долго работает, либо СУБД не успевает обработать множество запросов, что кстати бывает чаще всего ведь коннектор с СУБД это самое слабое место. В общем ваш внутренний сервер не успевает в срок выполнить скрипт, точнее он просто долго выполняет, а nginx не хочет ждать и спешит отдать вам 504 ошибку. От чего не укладывается по времени apache так же ясно, либо много запросов извне и ресурсов сервера не хватает (это можно узнать из счётчика посещаемости сайта), либо выполняемый скрипт очень тяжёлый.
В общем речь сейчас не об этом, а том как справится с ошибкой 504. Многих веб мастеров вполне устраивает, то что страница генерируется по несколько минут, может быть оно того стоит.
В общем, ближе к делу, наша задача сказать серверу nginx, что бы он ждал ответа от apache подольше и не торопился отдавать клиенту ошибку 504. С этим всё просто! Естественно нужно иметь root доступ к своему серверу, о виртуальных хостингах и даже говорить не буду. В общем заходим на своей сервер, хоть даже по протоколу ssh в терминал и идём в папку с конфигурационными файлами сервера nginx. Сразу скажу, что они меняются от версии к версии и поэтому точно сказать какой именно файл будет не могу. Плюс ко всему всё ещё зависит от того в каком режиме работает nginx и кто его вам настраивал. Грубо говоря нам нужен текущий файл настроек сервера nginx. Возможно это даже будет nginx.conf, как в общем то и должно быть.
Заходим в условный файл настроек виртуальных хостов сервера nginx, расположенному по адресу: /etc/nginx/nginx.conf
Здесь можем либо поискать уже установленные директивы (если есть) или дописать вручную. Можно дописать естественно как для всех хостов, так и для каждого конкретного, не важно. В общем пишем следующее:
Proxy_send_timeout 60; # время ожидания при передаче запроса proxy_read_timeout 60; # время ожидания при чтении ответа
Эти директивы нужны для изменения времени ожидания. Лучше вставлять в контекст location. У меня получилось примерно следующим образом:
Server { listen xxx.xxx.xxx.xxx:80; # ip адрес сервера и прослушиваемый порт server_name someserver.loc; # имя сервера rewrite ^(/manager/.*)$ https://$host$1 permanent; error_page 404 = @fallback; # Далее две строки, которые надо добавить proxy_send_timeout 600; # время ожидания при передаче запроса proxy_read_timeout 600; # время ожидания при чтении ответа location / { proxy_pass http://xxx.xxx.xxx.xxx:8080; # протокол и адрес проксируемого сервера, а также необязательный URI, на который должен отображаться location proxy_redirect http://sitename.loc:8080/ /; # текст, который нужно изменить в полях заголовка “Location” и “Refresh” в ответе проксируемого сервера proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Real-IP $remote_addr; } }
Далее сохраняем файл конфигурации и перезапускаем сервер nginx. Теперь он будет ждать ответа от apache именно столько времени, сколько вы указали в добавленных директивах, а не по значению по умолчанию. Думаю понятно, что время вы сами выставляете какое хотите. Всё, теперь ошибка 504 Gateway Time-out вас беспокоить не будет. Понятное дело, что это лишь вершина айсберга и нужно будет разбираться с самой причиной долгой генерации страницы, но это уже другая тема. Возможно придётся так же поставить таймаут побольше и для PHP, а то может быть такое, что и он начнёт ругаться, мол ему дают мало времени на обработку. Для этого используем PHP директивы max_input_time и max_execution_time в файле настроек PHP - php.ini или в файле локальных настроек сервера Apache - .htaccess
Неожиданные ошибки при загрузке и обновлении софта порой нарушают привычный режим использования устройства на ОС Андроид. Для большинства из них уже найдено решение в процессе изучения операционной системы, предложены эффективные инструкции по их устранению. Код ошибки 504 Play Market постигла та же участь.
Чаще всего пользователю не нужны специфические знания для решения этой ошибки. Достаточно проследовать инструкции, которая будет приведена в данной статье, только в особо тяжелых случаях придется обратиться к дополнительным инструментам, расширяющим возможности вашего телефона.
Причины появления проблемы- Нестабильное подключение к сети Интернет.
- . Произошел сбой в процессе автоматической настройки даты и времени.
- Устаревший или переполненный кэш, поврежденные данные Маркета и его вспомогательных сервисов.
- Некорректное обновление Магазина или самой операционной системы.
- Недостаточное количество свободного места в разделе для установки по умолчанию.
- Некорректная работа внешней карты памяти, вызванная аппаратной ошибкой, системным сбоем или некачественным контактом между карточкой и самим устройством.
Сразу же проверьте, возникает ли ошибка. Если код ошибки 504 приложения play market более не появляется, постарайтесь не обновлять Маркет до выхода корректной и исправленной версии.
Восстановление из копииЕсли ошибка появилась после очередного обновления операционной системы, следует откатиться на предыдущую версию. Здесь может помочь встроенный инструмент отката (если он есть в данной операционной системе) либо же придется обратиться к ранее сделанной копии с помощью расширенного рекавери (). Сделайте копию текущей версии системы со всеми параметрами, «вайпните» все разделы, исключив из списка внешнюю карту памяти, затем на очищенную памяти восстановите нужную копию из меню «Restore».
Восстановление из копии
Если ошибка не проявляется, постарайтесь не обновляться до выхода более стабильной версии. Свяжитесь с разработчиком, локализатором или сборщиком прошивки, сообщите ему о возникшей проблеме в Плей Маркете.
Работа с картой памятиУбедитесь, что на памяти, установленной по умолчанию, достаточно свободного места для загрузки и установки нового приложения. Оптимальное количество свободного пространства, которое желательно иметь для этих целей – 10% от общего объема, или 1 ГБ. Если места недостаточно, существует несколько способов его освободить:
Если обновляемое приложение находится на карте памяти (или же для устанавливаемых памятью по умолчанию служит внешний накопитель), нужно перенести имеющиеся данные на системные разделы, затем накопитель отключить. Для этого перейдите к параметрам проблемного приложения, нажмите на кнопку «Переместить на телефон».
После завершения операции перейдите к разделу «Память», пролистайте в самый низ и нажмите на кнопку «Отключить внешнюю карту памяти» или "Извлечь SD-карту".
После этого снова перейдите в Маркет и попробуйте скачать необходимое. Как вариант извлечения внешнего накопителя – физически извлечь его из слота после выключения телефона.
Не перенося данные, можно выключить телефон, на несколько секунд достать карту, затем снова ее вставить и включить аппарат. Проверьте качество контактов с обеих сторон. При легких загрязнениях рекомендуется аккуратная очистка ватной палочкой, слегка смоченной медицинским спиртом.
Данная ошибка 504 решается достаточно просто, несмотря на сравнительно большое количество причин ее возникновения. В процессе манипуляций с параметрами и данными обязательно делайте резервные копии важных элементов и запоминайте изначальное положение ползунков, чтобы в случае неполадок в системе после изменений все можно было вернуть вспять.
Давайте признаемся самим себе — мы не можем прожить без интернета. Представьте современного человека, который не пользуется интернетом. Либо это человек, проживающей в отдалённой от города местности (селе, посёлке), либо человек преклонного возраста.
А может быть и два в одном. Каждый человек активно пользуется интернетом, он только облегчает нашу жизнь. Но пользуемся мы чем? Браузерами. Они дают доступ ко всем возможным сайтам, но… Бывают случаи, когда на сайт зайти не получается.
Возникает ошибка 504 gateway time-out. А что оно вообще такое? Давайте приступим к разбору.
Что такое 504 gateway time-outНа самом деле, у каждого сайта есть свой HTTP. Это такой определённый доступ к сайту, который позволяет загружать из него любую информацию. Без разницы, что из себя представляет эта информация, сайт должен загрузиться сам. И чтобы он загрузился, нужно использовать .
Но ведь бывает ошибка, которая имеет число 504. У неё есть несколько классификаций. Либо она возникает в случае, когда на сайте технические неполадки. Либо она возникает, когда не получается установить связь с сайтом. В нашем случае происходит именно ошибка номер два.
Почему мы так решили? Потому что «gateway time-out» означает, что вышло время на загрузку этого самого сайта. Странно, но как она возникает? Давайте разбираться.
Первая причина — нестабильное соединение с интернетом. Вы используете кабель, что угодно. И интернет работает, но может быть и так, что связь крайне нестабильна и загрузить сайт на самом то деле не очень простая работа.
Приходится, конечно же, решать проблему. А может быть она как у Вас, так и у сайта. Либо у сайта какие-то проблемы, либо у Вашего провайдера. Проверьте ещё раз, есть ли у Вас интернет, попробуйте загрузить другие сайты . Если у Вас получилось это сделать без проблем, то проблема остаётся только лишь в самом сайте.
Он не даёт получить доступ из-за своей ограниченной скорости, что и приводит к негативным последствиям. Если же не грузят другие сайты так же, как и этот, то звоните своему провайдеру. Это его проблемы.
Вторая причина — неполадки на сайте . Да, мы упомянули их выше, но сейчас расскажем поподробнее. Что такое сайт? Это такая страница, которая позволяет содержать на себе абсолютно разную информацию. Будь то какие-то развлекательные или поучительные мотивы.
Всё равно, он должен загрузиться перед тем, как отображать информацию. Но может быть и так, что на сайте на данный момент есть проблемы, не позволяющие работать ему быстро. Поэтому отважная команда решила разобраться с проблемами и временно остановила его работу.
Или же не остановила, но в следствии ремонтных работ пропал сам сайт. Бывает и так. Так что не стоит переживать и винить сразу провайдера, может проблема на стороне самих создателей сайта.
Третья причина — нестабильная работа сайта . А вот этот пункт объединяет сразу два прежних. В него мы решили вместить ту информацию, без которой Вы не можете обойтись. Если сайт не грузит, то есть две причины.
Либо у него крайне нестабильная связь, либо он сам не грузит. И вот в том случае, когда у него плохая связь может быть так, что Вы открыли страницу. Вы активно ей пользуетесь, всё в порядке, а потом оп, и она снова выключается. Вернее, пропадает, будто и не работала.
Такая ситуация возникает часто, особенно на тех порталах, где об этом не предупреждают. Если Вы пользуетесь часто социальными сетями, то не удивляйтесь, что не открывается какая-то из вкладок. Может быть разработчики сайта на данный момент проводят какие-то ремонтные работы, которые привели к такому нестабильному состоянию сайта.
Все мы люди и все мы должны понимать, что не может быть в нашей жизни всё вечным. Приходится иногда выдавать все силы, чтобы получать нужный результат. А если это ещё и в ситуации, когда это относится к сайту, то может быть проблема и не такой уж простой.
На этом всё. Наша статья завершается на очень позитивной ноте. Мы сумели решить проблему легко и просто. Часто проблемы решаются лёгким путём, часто — не особо.
В этой статье мы подобрали лёгкие методы. Хотя это даже не методы, а скорее объяснение проблемы, которую нужно решать либо своими руками, либо руками других людей. Странно звучит, но это так. Мы благодарим Вас, уважаемого читателя за то, что Вы дочитали эту статью до конца.
Мы крайне надеемся, что она оказалась полезной для Вас, ведь описанная выше ошибка возникает часто, а как решать — не знает никто. Используйте эту статью в любой ситуации и у Вас никогда не будет проблем в дальнейшем.
К тому же, лучше узнать о проблеме от профессионалов, которые помогут решить её. Не нужно стараться сделать всё самому. Может быть, это будет очень плохим решением для Вас. Желаем Вам никогда больше не встречаться с такого рода проблемой и быть всегда на позитиве!
Адаптировать свой сайт под мобильные устройства уже пытаются очень многие. Используют новые возможности CSS3 и на простых сайтах и на куда более сложных. В процессе возникают некоторые сложности, причем одной из важнейших является поведение меню сайта при просмотре на маленьких экранах. Решают данную проблему, как выяснилось, несколькими способами. Для меня же данная задача недавно стала особенно актуальной, поэтому я слежу за материалами в сети, касающимися адаптивного дизайна. И недавно я наткнулся на хороший анализ существующих паттернов адаптивной навигации.
Так как я имею отношение к опен-сорсному адаптивному HTML5-шаблону Simpliste, то решил все существующие возможности работы с навигацией
испробовать на практике. Но кроме получения собственного опыта, мне удалось создать несколько наглядных примеров, доступных для использования любым желающим, а также подготовить описание процесса, с которым приглашаю вас ознакомиться.
Сама статья, заинтересовавшая меня и подтолкнувшая к действию, называется Responsive Navigation Patterns . На нее я и буду опираться, а в качестве примеров будут выступать страницы шаблона Simpliste с реализацией паттернов и полным описанием того, как добиться такого же результата.
Существует несколько подходов к адаптивной навигации. Рассмотрим их по порядку.
Такой подход используется в темах оформления Simpliste.
Преимущества Достигается проще всего. Не нужно использовать Javascript (и нет зависимости от него), не нужно невероятных маневров с CSS.Недостатки Проблема может начаться тогда, когда количество пунктов меню слишком велико. Во-первых, высота блока навигации может стать такой, что он полностью перекроет содержимое сайта на первой странице и пользователю придется «листать» сайт вниз, чтобы добраться до нужной ему информации. И так на каждой странице сайта. Во-вторых, возникает вопрос многоуровневых меню. Если их просто выстроить одно под другим, то возвращаемся к проблеме высоты блока навигации. В-третьих, если все заранее не предусмотреть, то добавление новых пунктов меню может вызвать неприятное «съезжание» и переносы.
Этот метод не так распространен. Суть его в том, что в шапке создается ссылка, которая на широких мониторах скрывается, а отображается при необходимости на мобильных устройствах. Эта ссылка-якорь ведет к меню, которое находится в футере сайта. При этом само меню либо позиционируется с помощью CSS, либо дублируется в шапке и футере, тогда меню в шапке скрывается на малых разрешениях. В качестве ссылки можно использовать как текст, так и какую-нибудь понятную иконку.
Достоинства Остается единственная ссылка в шапке, которая занимает очень мало места. Нет зависимости от скриптов.Недостатки Придется дописывать дополнительный CSS код, чтобы либо перемещать меню из футера вверх на настольных компьютерах (с помощью position:absolute или position:fixed), либо прятать меню в шапке на мобильных устройствах, если оно дублирует меню футера. Кроме того, ощущение от резкого «прыжка» при перемещении по такой ссылке может застать пользователя врасплох.
Такой подход распространяется все больше. Здесь используется Javascript, который «пробегается» по всем пунктам меню, создавая из них список. То есть навигацией станет интерфейсный элемент, поддерживаемый операционной системой посетителя.
Процесс написания скрипта для такого меню был подробно описан в статье на Smashing Magazine . Но можно воспользоваться готовым плагином jQuery , как я и сделал в собственном решении.
Достоинства Выгладит компактно. Узнаваемо как элемент навигации и привычно пользователю. Для сайтов со сложной навигацией и вложенными меню может стать отличным решением.Недостатки Сложно будет заставить элемент интерфейса мобильной ОС выглядеть так, как хочется вам. На разных устройствах внешний вид и поведение будут несколько отличаться. Зависимость от Javascript. Неудобство при навигации действительно больших размеров, когда все пункты выстраиваются в длинный однообразный ряд, хотя вложенность уровней сохраняется.
Этот подход тоже достаточно популярен. Особенно учитывая возможность экспериментировать с дизайном. Суть его в том, что в мобильной версии меню прячется, но остается ссылка или кнопка, нажав на которую можно раскрыть навигацию. Работает все с помощью Javascript. Можно сравнить подход со ссылкой на футер, но в данном случае меню возникает там же, где пользователь нажал на кнопку, то есть вверху страницы. Как вариант, пару самых главных ссылок можно оставить, а при нажатии на кнопку раскрывать остальные.
Достоинства Выглядеть может так, как пожелаете. Пользователя никуда не перебрасывает. Для вложенных меню есть возможность создавать иерархии с раскрытием при нажатии.Недостатки Зависимость от Javascript. Возможные проблемы с производительностью, если потребуется анимировать меню.
Данный вариант был описан как отдельный подход. Но на самом деле это скорее вариация раскрывающегося меню. Суть его в том, что при клике на ссылку или кнопку меню не просто раскрывается, но выезжает с края окна браузера, сдвигая при этом контент за предел окна.
Готового решения найти не получилось, поэтому было создано свое.
$(function(){
$("body").addClass("js");
$(".link_nav").click(function(){
$("body").toggleClass("mobile_nav");
});
})
На самом деле, не много скриптов.
Основную работу выполняет CSS. При изменении класса тега body меняется положение меню , которое спозиционировано через position:fixed, а контент приобретает дополнительный отступ слева , уступая место меню. В браузерах Webkit удалось даже добиться анимации через CSS transitions, то есть в айфонах и андроидах меню будет эффектно выезжать. Опять же, посмотреть и взять необходимые стили можно в
new player 16 января 2017 в 01:28 Мобильное меню для сайта. Плагин JQuery mmenu- jQuery
В этой статье речь пойдёт о том, как создать меню для мобильной версии сайта, которое бы вписывалось в адаптивный дизайн. Рассказать я хочу про плагин для JQuery под названием mmenu (можете сходить по ссылке чтобы скачать плагин и сразу посмотреть как будет выглядеть меню, которое мы будем делать). Плагин мы будем использовать, потому что строить свой велосипед каждый раз - не лучшая из практик. Наш путь - использовать наработки. Начнём.
Подключение. Автор советует использовать html 5 doctype, ну тут я думаю альтернативы нам и не нужны, используем его. В области head нашего документа нам нужно подключить сам JQuery и два файла плагина, подключаем:
Если нам нужно on-canvas меню, тогда нужно подключать файлы jquery.mmenu.oncanvas.min.js и jquery.mmenu.oncanvas.css. On-canvas - это такая версия меню, которая имеет position:absolute; width:100%; height:100%, что растягивает её на весь экран.
- Home
- About us
- History
- The team
- Our address
- Contact
- Home
- About us
- History
- The team
- Our address
- Contact
2. Чтобы сделать подменю всегда видимым, нужно добавить к нему класс «Inset».
3. Добавьте класс «Selected» к элементу меню, чтобы сделать его выделенным.
4. Можно создавать разделители следующим образом
- Website
- Home
- About us
- Contact
Класс Fixed я использовал чтобы установить position:fixed
Чтобы наше мобильное меню заработало, осталось только подключить следующий javascript код на страницу:
$(document).ready(function() { var $menu = $("#my-menu").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data("mmenu"); $icon.on("click", function() { API.open(); }); API.bind("opened", function() { setTimeout(function() { $icon.addClass("is-active"); }, 100); $icon.on("click", function() { API.close(); }); }); API.bind("closed", function() { setTimeout(function() { $icon.removeClass("is-active"); }, 100); $icon.on("click", function() { API.open(); }); }); });
Проблемы Используя mmenu я столкнулся с двумя проблемами. Сначала я пытался обернуть всё содержимое body в тег div, потому что это нужно чтоб плагин работал. Но в этом случае он почему-то скрывал всё содержимое, которое я оборачивал. Поэтому я отказался от этого. Если вы не завернёте всё в что у вас в body в div, то плагин сделает это за вас. Но тут будут проблемы двойного запуска js-скриптов и другие. После этого я сразу столкнулся со второй проблемой: плагин не оборачивает ничего кроме div. То есть если у вас есть h1 непосредственно внутри body (body > h1), как например было у меня, то mmenu их пропустит и будет оборачивать div"ы которые за ним. Это я решил просто оборачиванием в div всех других тегов, так чтобы непосредственно внутри body остались только div"ы.На этом у меня всё заработало. Надеюсь эта статья оказалась вам полезна.
Теги: адаптивный дизайн, вёрстка, jquery plugins
