установка скрипта на хостинг

Как устанавливать скрипты?

Скрипт – это очень полезная функция, когда хочется сделать свой сайт оригинальным и не похожим на другие. Большинство веб-страничек создаются по одному и тому же шаблону, поэтому похожи друг на друга, как братья-близнецы, особенно если сделаны через конструктор сайтов. Если же есть желание создать что-то свое, более оригинальное, то нужно узнать, как устанавливать скрипты на свой сайт. Это делается довольно легко, и справиться с такой задачей может любой человек, который более-менее умеет работать в браузере. Для этого нужен только компьютер и программа Smart FTP Client или ее какой-нибудь аналог.

Как устанавливать скрипты: инструкция

Для начала нужно запустить программу Smart FTP Client на компьютере. Далее укажите адрес вашего сайта в адресной строке по ftp. Данный адрес должен выглядеть как ftp.domen.zone, где указан домен сайта и зона его нахождения.

Далее нужно заполнить поля с логином и паролем, которые вы получили, зарегистрировав свой домен. Если ваш хостер не предъявляет дополнительных условий, то в «Порт» нужно вписать 21. После того как все поля заполнены, вам нужно нажать на пиктограмму со стрелкой, которая стоит рядом с меню «Адрес».

Теперь найдите с левой стороны папку «Public html» и откройте ее. Одновременно нужно открыть папку со скриптом и перетащить все элементы этой папки в центральное окно программы.

Когда копирование закончится, необходимо установить атрибуты. Это и есть самое главное в том, как установить скрипт на сайт. Для этого нужно найти нужный файл и выбрать в свойствах » CHMOD». После того как атрибуты установятся, нужно выбрать в диалоговом окне все нужные вам права. То же самое нужно сделать со всеми остальными папками.

Если ваш скрипт содержит любые установочные файлы, например, install.php, то скрипт можно устанавливать напрямую. Для этого можно прописать в адресной строке браузера http:⁄⁄имя вашего сайта.install.php и пройти установку.

Есть еще один, намного более простой способ установить скрипт с базой данных. Чтобы установить скрипт, нужно попасть в базы данных на сервер хостинга и создать там свою базу, придумать пароль. Чтобы установить соединение базы данных со скриптом, нужно установить все настройки, которые находятся в файле Readme.

В поле Login вам необходимо вместо Root прописать имя своей базы данных. При этом логин и пароль должны совпадать с теми данными, которые вы прописали, регистрируя свою базу данных. Вот и все, что нужно сделать для установки скрипта.

Виды скриптов

Перед тем как установить скрипт на сайт, необходимо разобраться с видами и назначениями скриптов. Существуют цикличные скрипты, мета-скрипты, скрипты переключения, скрипты, которые выполняют какие-то циклические действия, те, которые при нажатии на клавишу выполняют одно действие, а при отпускании клавиши – другое. Кроме того, существует огромное количество дополнительных скриптов, которые используются в компьютерных играх, на сложных флеш-сайтах, но это уже другой тип скриптов, и устанавливается он по-другому.

Источник

Подробная инструкция по установке любого скрипта на любой хостинг

Первоначальные действия по установке практически любого скрипта на любой нормальный хостинг одинаковы: нужно создать базу данных, залить файлы скрипта на сервер, прилинковать домен. В этом посте будет приведена подробная инструкция по установке скрипта интернет магазина (или любой другой CMS) на хостинг BeGet. Этот хостинг подойдет как нельзя кстати: 30 дней бесплатного тестового доступа позволят вам вдоволь потренироваться.

Введение

Эта инструкция подойдет практическидля любого хостинга. Так как панели управления всех хостингов схожи. Возможны различия в названиях пунктов меню и в диалогах. Но я думаю вы разберётесь: все хостинги выполняют одну функцию и смена названий не меняет общий смысл.

Весь список рекомендуемых нами хостинг-провайдеров можете посмотреть в разделе Хостинг нашего сайта. А в этой статье вы сможете подобрать бесплатный хостинг, а так же хостинг с длительным бесплатным тестовым аккаунтом.

Итак, вы зарегистрировались на хостинге, вы скачали дистрибутив со скриптом. Давайте осмыслим что мы будем делать дальше. Скрипт это набор папок и файлов. В этих файлах содержится инструкции по управлению сайтом. А что же есть сайт — это набор данных: текста, картинок, товаров, производителей. Для хранения этих данных скрипт будет использовать базу данных. Чаще всего MySQL. Значит перед тем как установить скрипт нам нужно на хостинге создать базу данных, а скрипту сообщить параметры доступа к этой базе. Это делается один раз при установке. Сайт также должен иметь уникальное имя: доменное имя. Это имя привязывается к папке со скриптом.

Получается, что сайт физически это папка со скриптом, который имеет доступ к базе данных, для хранения всей информации. К этой папке можно прилинковать любое доменное имя. Отсюда хронология наших действий будет такая:

Зарегистрироваться на хостинге я думаю не составит труда: выбираем тариф Старт (впринципе не важно какой, если станет тесно — в любой момент можно сменить тариф), вводим в форме своё имя и E-mail и ждём письма, в котором будут указаны пароли для доступа на хостинг. После регистрации у вас есть 30 дней на попробовать, если не захотите пользоваться хостингом, то через 30 дней ваш аккаунт и сайты просто будут удалены.

После регистрации и входа на хостинг видим Панель управления (ПУ) хостингом:

Панель управления хостинга Beget

Создаём на хостинге базу данных

Для того что бы создать базу данных на хостинге нужно в ПУ кликнуть на пиктограмме MySQL. В результате откроется панель управления базами данных:

Создание базы данных на хостинге

Сдесь мы указываем имя базы данны и пароль. Жмём кнопку Создать. База данных создана. Нам остаётся только запомнить введённые данные. Мы их и будем передавать скрипту при установке. Замечаем что перед именем базы данных есть префикс и именем базы будет считаться то имя которое получается в результате склейки этого префикса и того имени которое вы ввели. В дальнейшем при установке скрипта нужно будет ввести: имя базы данных, имя пользователя, пароль. Имя пользователя на этом хостинге не вводится — оно совпадает с именем базы данных.

Создаём сайт (директорию для сайта) и прилинковываем доменное имя

Для того что бы закачать файлы скрипта на хостинг нам нужно создать под сайт отдельную папку: ведь на хостинге может быть расположено несколько сайтов — файлы каждого должены располагаться в отдельной директории. При создании аккаунта на хостинге автоматически создаётся одна папка: public_html. В неё и будем заливать скрипт. Если в дальнейшем понадобится создать второй сайт то используем пункт Сайты в ПУ:

Создание директории для сайта

Для того что бы создать сайт (директорию) указываем имя и жмём кнопку создать.
Ничего сложного. В дальнейшем созданную директорию увидим в файловом менеджере при загрузке файлов скрипта на хостинг. Так же в этом пункте панели управления можно прилинковать (прикрепить) одно из имеющихся доменных имен к директории сайта. В нашем случае к директории public_html должно быть прилинковано бесплатное доменное имя третьего уровня вида НазваниеАккаунта.bget.ru. Его мы плучаем при создании аккаунта. В дальнейшем к уже созданному сайту можно прилинковать нормальное доменное имя второго уровня.

Закачиваем файлы скрипта на хостинг

Существует два способа закачки скрипта на хостинг: через файловый менеджер панели управления хостингом или через FTP.

Что бы использовать файловый менеджер ПУ заходим в соответствующий раздел. В отдельном окне откроется файловый менеджер:

Файловый менеджер хостинга BeGet

В файловом менеджере открываем одинарным сщелчком папку public_html. Там видим файл index.html, его нужно удалить. Затем жмём на кнопочку Закачать. Откроется стандартное окно выбора файла. Выбираем архив со скриптом и закачиваем на хостинг. Важно закачивать именно архив, а не папку с файлами — это намного быстрее. Архив после закачки нужно разорхивировать, после этого удалить сам файл архива.

Установка скрипта на хостинг

Что бы началась установка нужно в браузере ввести адрес вашего сайта: доменное имя в данный момент прилинкованное к сайту. У нас это рабочее имя 3 уровня полученное при регистрации: ИмяАккаунта.bget.ru.

В процессе установки вы введёте имя базы данных, имя пользователя и пароль к базе данных, полученные ранее.

Дальнейший ход установки интернет магазинов описан в соответсвующих постах:

[Робот подобрал для вас похожие посты:]

Источник

Mexanus

Инструкции по установке скриптов.

Log In

Калькулятор

Работа с хостингом

Инструкции по установке скриптов

Устранение неполадок

Скрипты

Статьи

Статьи от спонсоров

Корзина

Реклама

Опросы

Контакты

Свежие записи

Свежие комментарии

Последние сообщения на форуме

Обратите внимание что все скрипты взяты из открытых источником и я проверяю их только на наличие критических ошибок, потому вероятность вредоносных кодов и чужих ссылок очень высока по мере сил я исправляю скрипты но нет никакой гарантии что в дальнейшем в работе скриптов не будет проблем. Особо стоит обратить внимание на подключение автовыплат к скриптам ферм как показала практика они очень уязвимы. Не забудьте проверить скрипт на уязвимость

Установка скрипта букса MFS2.2

Установка скрипта букса MFS2.2

Предлагаю вашему вниманию подробную инструкцию по установке скрипта системы активной рекламы.

Немного о том что такое система активной рекламы и с чем ее едят. Если вкратце то это сайт на котором можно прорекламировать свои проекты либо же заработать немного денег на просмотре рекламы.

А теперь перейдем непосредственно к установке скрипта. Для этого нам потребуется домен хостинг и сам скрипт. как зарегистрировать домен и взять хостинг смотрим тут.

В качестве скрипта берем один из бесплатно распостраняемых в интернете MFS 2.2 c немного измененным дизайном. По сути данная инструкция подойдет для любого скрипта систем активной рекламы отличия в них не значительны.

Скачать скрипт можно тут

Первым делом нам нужно создать базу данных для этого заходим в хостинг панель

там выбираем базы данных

следующий шаг нам нужно создать базу данных и пользователя к ней там по сути стоит только вписать пароль имя пользователя и название базы совпадают. пароль имя пользователя и название базы нужно запомнить или записать они пригодятся нам позже.

затем входим в нашу базу данных и скачиваем файл с базой данных из архива со скриптом

в конечном итоге должно написать что импорт успешно завершен

теперь нам нужно залить архив со скриптом на сервер для этого в хостинг панели выбираем WebFTP

после загрузки нужно распаковать архив

следующий шаг нам нужно прописать данные базы данных в скрипте для этого заходим в папку admin

там ищем файл config.php

в файле прописываем имя пользователя базы данных, название базы, пароль к ней и адрес сайта. localhost так и оставляем на другом хостинге возможно надо будет сменить и его.

теперь возвращаемся назад и ищем файл config.php в корневой папке.

в нем также прописываем данные к базе данных

12 комментариев к записи Установка скрипта букса MFS2.2

У меня ошибку выдаёт в файле /zsecurity.php on line 18

Самая меньшая версия 5.4 и все равно не чего, и прогнал на дыры скачанный отсюда МФС Итог: почти 400 уязвимостей. Украинский хостинг.
Fatal error: Call-time pass-by-reference has been removed in /profiles/l/lo/loc/lock1/seo-/zsecurity.php on line 18

по сути это не ошибка а предупреждение но чтобы убрать надо поудалять в строках которых выдает ошибку символ & а вот на уязвимости не проверял его никогда ну тоже дело поправимое хотя не слишал не разу чтобы с mfs2.2 кто то деньги воровал но все возможно скрипт старенький в свое время возможно эти дыры и за уязвимости не считались

стоит подметить что бы не выдавало ошибку при загрузке базы данных нужно в файле базы сменить название базы на свое

Вот что выдает — Запрошенный URL /admin.php не найден на этом сервере.

а что за хостинг возможно не все файлы загрузились

РЕШЕНИЕ ВОПРОСА (как правило, характерного для украинских хостингов)

ЧТО ДЕЛАТЬ Если Сайт открывается, а в админку не зайти?
Выдает ошибку:
«Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator at webmaster@_______ to inform them of the time this error occurred, and the actions you performed just before this error.
More information about this error may be available in the server error log.
Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.»

Сперва заходим на хостинге в Журнал Ошибки (после попытке зайти в Админку по ссылке: https://сайт/admin)
Видим:
[Wed Sep 12 14:49:56.459719 2018] [core:alert] [pid 184597] [client ____________________________] /home/_______/public_html/admin/.htaccess: Invalid command ‘php_flag’, perhaps misspelled or defined by a module not included in the server configuration

Источник

Загружаем скрипты на бесплатный хостинг с PHP и MySQL. Подойдет для скриптов бота ВК

После того как я опубликовал статью Создаем собственного бота VK, подробная инструкция как создать бота VK за 5 минут! мне в личку стали очень часто обращаться в основном с вопросом — «Как загрузить на сервер скрипт?»

Приступаем. Я нашел бесплатный хостинг, который идеально подходит для нашей задачи. Очень давно я использовал для этого проект Hostinger, но они рекомендуют теперь другой сервис, его и возьмем.

2. Регистрируем аккаунт. Регистрацию можно пройти используя Google аккаунт, чем я и воспользовался.

При нажатии на кнопку Sign Up for FREE! нас переместит ниже, к выбору тарифа, выбираем бесплатный ( Free )

Нас перенаправит на страницу регистрации, можете использовать для этого как я писал выше Google или Facebook

3. Создаем бесплатный сайт. Можете перевести язык страницы на русский, но лучше оставьте как есть.

Выбираем пустой блок

Появится всплывающее окно с опросом, где хостер просит ответить на вопрос, зачем Вы решили выбрать их.

Выбираем Other или любой другой вариант, не принципиально. Появится новое окно

Website Name (optional): Название сайта (Необязательно) указываем что угодно или оставляем пустым.

Password: Можете тоже не менять, он нигде не пригодится. Нажимаем Create

Сайт создан

Переходим по ссылке и видим что наш сайт уже доступен, выглядит он вот так

Запомните URL (ссылку) сайта, в моем случае это: bot-kotoff-net.000webhostapp.com

4. Переходим к загрузке наших файлов.

Выбираем из меню (File manager)
Далее: Upload files now

Нас перекидывает на страницу загрузки файлов

Выбираем Upload files — Облако которое я обозначил стрелками, откроется всплывающее окно

Нажимаем Select files и выбираем наши файлы с компьютера, в нашем случае мы взяли прошлую статью, а значит нам нужно загрузить скрипт бота (bot.php) и библиотеку к нему (vk_api.php)

И загружаем на сервер

Наш список файлов обновился и теперь содержит наш скрипт
5. Получаем прямой адрес к скрипту и указываем его в группе ВК.

Выше я писал что бы вы запомнили свой адрес сайта, у меня это был bot-kotoff-net.000webhostapp.com теперь к нему дописываем название нашего файла через символ (слеш) /bot.php и получаем полный адрес к скрипту.

Проверить работу скрипта очень просто. Переходим по ссылке и смотрим
Есть некоторые варнинги, но на работу скрипта они не повлияют (Для проверки этого будет достаточно)

Теперь копируем нашу ссылку и идем в ВК

Как видим ВК принял наш скрипт, а значит он получил ответ от нашего сервера. Далее нам просто остается написать боту нашу команду, не забываем включать тип событий, об этом я писал в прошлой статье.

6. Проверяем работу бота

Почти все идеально, единственное, бот мне присылает 2 ответа, скорее всего это связано с нашим бесплатным хостингом, но для тестирования это идеальный вариант.
Можете попробовать заменить:

Надеюсь я помог, я старался как можно подробно описать каждый процесс, повторяйте и у Вас все получится. В будущем я рекомендую Вам перейти на платный хостинг, цена их в среднем 30-60 рублей.

Источник

Как подключить скрипт на сторонний сайт

Привет, Хабр! Это первый пост в нашем блоге. Многие знают нас как чат для сайта, именно с него мы начинали, а сейчас занимаем лидирующие позиции в сфере бизнес-мессенджеров. Мы постепенно эволюционировали в комплексное бизнес-решение, которое предоставляет множество возможностей для клиентов: callback, общение с клиентами через мессенджеры, соцсети, мобильные приложения, виртуальная АТС, CRM-функции и многое другое.

За несколько лет мы успешно решили множество технических проблем, накопили много интересного, а местами и уникального опыта, конечно же, писали свои костыли и велосипеды. Этим постом мы начинаем серию статей, в которых будем делиться своим опытом разработки, выстраивания процессов в полностью удаленной команде, расскажем про нашу архитектуру, технические решения, которые позволяют нам эффективно обслуживать сотни тысяч клиентов по всему миру.

Jivosite сегодня это:

Входная точка

Театр начинается с вешалки, а подключаемый сервис с кода-вставки. Он является входной точкой для любого сервиса или модуля на сайт. Как правило, его можно найти в инструкции установки, после чего необходимо добавить его в HTML-код сайта, а дальше происходит «магия», которая определенным образом загружает и инициализирует скрипт.

Казалось бы, что может быть проще подключения скрипта на сайт? По стандарту, необходимо просто добавить тег script в HTML-код страницы. Но на самом деле это важный этап, скрывающий много подводных камней. Например, идентификация пользователя, реализация резервного канала загрузки скрипта, настройка внешнего вида или логики, скорость загрузки страницы и так далее. Но давайте обо всем по порядку.

Идентификация

Просто так подключать скрипт мало кому интересно, наверняка скрипт выполняет какую-либо логику, а эта логика привязана к пользователю. Например, ID счетчика, APP_ID от соцсети, в нашем случае это ID созданного канала связи. То есть скрипт должен идентифицировать пользователя в запросах на сервер. Для идентификации клиента через код-вставки есть три варианта реализации.

Передавать ID прямо в ссылке на файл и на стороне сервера каким-либо способом прокидывать его в скрипт. В этом случае серверу на лету придется прописывать ID в файл или формировать JS-строку c ID, которая будет загружать file.js. Эта логика похожа на реализацию JSONP-запросов.

Долгое время мы работали по такому принципу, но минусы этого подхода в том, что добавляется «холостая» нагрузка на сервер и необходимость реализации серверного кэширования.

Атрибут async — говорит браузеру о том, что не нужно дожидаться загрузки скрипта для построения DOM, скрипт надо выполнить сразу после загрузки. Это уменьшает время загрузки страницы, но есть и обратная сторона медали: скрипт может выполняться до того, как DOM будет готов к работе.

Одна из самых популярных реализаций, так делают в том числе и крупные сервисы, отличается только синтаксис, но суть у всех одна.

У такого подхода есть два основных минуса, первый — усложняется код-вставки, а второй — очень важен порядок выполнения данного кода, в противном случае ничего работать не будет. К тому же необходимо делать выбор между скоростью (async) и стабильностью (без async), большинство выбирают 2-й вариант.

Аналогично первому варианту передавать ID в ссылке на файл, но извлекать его в браузере, а не на сервере. Это не так просто, как кажется, но возможно. В API браузера есть свойство document.currentScript, оно возвращает ссылку на скрипт, который загружен и в данный момент выполняется в браузере. Зная это, можно вычислить ID, для этого надо получить свойство document.currentScript.src и регуляркой вытащить из него ID.

Есть одно но: document.currentScript поддерживается не всеми браузерами. Для браузеров, не поддерживающих это свойство, мы придумали интересный хак. В коде file.js можно выбросить специальное «фейковое» исключение, обернутое в try/catch, после чего в стеке ошибки будет URL скрипта, в котором произошла ошибка. URL будет содержать ID, который мы получаем той же регуляркой.

Вот такая магия получается, но это работает. Нет заморочек с порядком выполнения, код-вставки выглядит просто и нет оверхеда на сервере. Последние два года мы используем именно такой подход, хотя сам код-вставки у нас отличается, но принцип тот же.

Настройки

В большинстве случаев у подключаемых скриптов есть какие-либо настройки, отвечающие за внешний вид или логику работы. Эти настройки необходимо «прокидывать» в подключаемый скрипт, для этого существуют два принципиально разных подхода.

К этому подходу также относится передача настроек в GET параметрах url скрипта, аналогично варианту #1 из раздела «Идентификация». Подход заключается в том, что если клиент хочет поменять настройки, то ему необходимо отредактировать код-вставки и обновить его на сайте.

Это хорошо тем, что все настройки хранятся на клиенте и их не надо хранить на сервере, разрабатывать и обслуживать всю связанную с этим бизнес-логику. Главным минусом такого подхода является неудобство для клиента, ему приходится все делать вручную, а если настроек много, то код-вставки превращается в сложно поддерживаемую простыню, в которой легко допустить ошибку. А чтобы обновления вступили в силу, надо обновлять сайт, это лишние телодвижения разработчиков и админов.

Второй подход заключается в том, что в случае необходимости изменения настроек клиенту не надо модифицировать код-вставки, все настройки хранятся на сервере. Для того чтобы поменять настройки, надо зайти в графическую панель, изменить нужные параметры и нажать кнопку «Сохранить». После этого настройки автоматически применятся для его сайта!

Не надо разбираться в коде и делать ради этого деплой, этим может заниматься человек, далекий от JavaScript, например менеджер. Конечно для пользователей такой вариант гораздо удобнее и проще, поэтому именно его мы используем. Но за удобство надо платить, такой подход требует разработки и поддержки логики на сервере и подразумевает дополнительную нагрузку на него. В следующих статьях мы обязательно расскажем, как мы ежедневно обрабатываем 150М таких запросов.

Обратная совместимость

Очень важно максимально быстро прийти к зрелой версии кода-вставки. Потому что обновлять уже установленные коды-вставки будет крайне сложно. Пример из нашей практики: в первых версиях мы использовали числовые ID, но по соображениям безопасности заменили их на число-буквенные. Оказалось, что очень сложно добиться изменения уже установленного кода-вставки. Многие даже не знают, что такое HTML и как устроены сайты. Например, сайт делали фрилансеры, студия или сайт создавался через CMS/конструктор и т. д. В большинстве случаев наши клиенты работают только с панелью настроек виджета. С тех времен у нас до сих пор в nginx работает мапа реврайта старых ID на новые, в которой около 40К записей.

Из-за этой особенности мы вынуждены сохранять обратную совместимость кода-вставки при всех рефакторингах, которых на нашей памяти было около 5.

Изоляция кода

Так как скрипт подключается на сторонний сайт, на котором уже есть JavaScript и CSS код сайта и других сервисов, первостепенной целью является не навредить сайту, чтобы наш код не изменил логику, а тем более не сломал ее. Это может быть JavaScript-ошибка, которая останавливает поток выполнения, или стили, которые переопределяют стили сайта. Но и код сайта может саффектить подключаемый скрипт, например используется библиотека которая модифицирует браузерное API, после чего код перестает работать или работает не так, как мы ожидаем.

Есть разные варианты изоляции кода. Например можно использовать префиксы в JS переменных, замыкания, чтобы не засорять глобальный контекст, использовать что-то наподобие БЭМ для стилей. Но самый простой способ — это выполнения кода в iframe, он решает большинство проблем изоляции, но накладывает определенные ограничения. Мы используем гибридный вариант, про изоляцию кода расскажем подробнее в следующих статьях.

Блокировка загрузки сайта

Событие onload — наступает после того, как веб-страница полностью загружена, включая изображения, стили и внешние скрипты. Важная особенность в том, что на большинстве сайтов JS-логика, сторонние скрипты и реклама начинают работать по наступлению этого события. Очень важным пунктом для всех подключаемых скриптов является не допустить негативного влияния на это событие.

Это происходит в тех случаях, когда сервер, с которого грузится скрипт, отвечает долго или вовсе не отвечает: тогда событие onload откладывается и дальнейшая загрузка страницы по сути блокируется. В случае, когда сервер недоступен, событие onload наступит только по истечении таймаута запроса, который больше 60 с. Таким образом, проблемы на сервере отдачи скрипта по сути «ломают» сайты, что является недопустимым.

Личный опыт
В прошлом я работал в компании, у которой был сайт с одновременным онлайном 100К, онлайн-знакомства. В те времена были попопулярны кнопки «Поделится в соцсетях». Чтобы они появились на сайте, надо было подключить скрипт (sdk) от нужных соцсетей. В один прекрасный день к нам прибежали коллеги и сказали, что наш сайт не работает! Мы посмотрели в мониторинги, в которых все было нормально, и сначала не поняли, в чем проблема. Когда начали разбираться глубже, поняли, что cdn-сервера Twitter прилегли, и их SDK не мог загрузиться, это блокировало нам загрузку сайта на

1.5 минуты. То есть после открытия сайта загружался небольшой HTML(остальное SPA) и только через 1.5 минуты все прогружалось, срабатывал тот самый таймаут запроса. Нам пришлось экстренно организовывать хотфикс и убирать их скрипт с сайта. После повтора этой ситуации мы решили убрать блок «Поделиться» совсем.

В первых версиях кода-вставки у нас не было это учтено, и в случае технических проблем на нашей стороне мы, мягко говоря, доставляли неудобства нашим клиентам, но со временем мы это исправили.

Решение простое, надо подписаться на событие полной загрузки сайта и только потом загружать скрипт, для этого надо использовать код-вставки, а не тег script.

Google Pagespeed

Результаты анализа мобильной версии habr.com

Большинство уделяют внимание скорости загрузки сайта, по многим исследованиям это напрямую влияет на прибыль, к тому же поисковые алгоритмы при ранжирование стали учитывать время загрузки страницы. В связи с этим владельцы сайтов часто используют подобные инструменты для оценки производительности сайта. Поэтому очень важно оптимально подключать код на сайт, так он напрямую влияет на его время загрузки.

Это означает, что надо использовать современные техники оптимизации загрузки страниц. Например использовать Gzip, кешировать статические файлы и запросы, использовать асинхронную загрузки скриптов, сжатие статики современными алгоритмами такими как WebP/Brotli/etc и использовать другие оптимизации. Мы регулярно проводим аудит и реагируем на предупреждения и рекомендации, чтобы соответствовать современным требованиям.

В первых версиях мы загружали статику с серверов приложения. Но у такого подхода есть минусы: дорогой трафик, удаленность от посетителей сайтов и излишняя нагрузка на канал серверов. Можно легко забить канал серверов приложения при хабр-эффекте сайтов, так как трафик статики очень «тяжелый».

С целью экономии бюджета, стабильности и уменьшения сетевой задержки оптимально загружать статику со специально предназначенных для этого серверов. Можно использовать готовые CDN-провайдеры, но на больших масштабах это недешево и приходится ограничиваться возможностями, которое предоставляет тот или иной провайдер.

Мы реализовали это просто, заказали недорогие сервера в России, Европе и Америке с безлимитным трафиком и широким каналом. Это дешево, не накладывает на нас никаких ограничений, мы можем настроить все под себя, а отказоустойчивость обеспечивается за счет механизма, работающего в браузере. В данный момент с наших CDN-серверов загружается 1ТБ статики ежедневно.

Отказоустойчивость

К сожалению, мир не идеален, случаются пожары, аплинки падают, ДЦ целиком уходят под воду, РКН блочит подсети, а люди совершают ошибки. Тем не менее, необходимо уметь обрабатывать такие ситуации и продолжать работать.

Мониторинг
Сначала надо понять, что что-то пошло не так. Можно, конечно, подождать, пока пользователи придут и пожалуются, но лучше настроить мониторинг и алерты, а после релизов, проверять все ли в порядке. Мы мониторим много различных параметров, как серверных, так и клиентских, и если что-то пошло не так, мы сразу это видим. Например, уменьшилось количество загрузок виджета или аномальный всплеск трафика на CDN-серверах.

Суммарное кол-во загрузок виджета по каждой версии

Сбор ошибок
JavaScript очень специфичный язык, и допустить в нем ошибку несложно. К тому же зоопарк браузеров в современном вебе очень большой; то, что работает в последнем Chrome, не факт, что будет работать в Safari или Firefox. Поэтому очень важно настроить сбор ошибок из браузера и вовремя реагировать на всплески. Если ваш код работает в iframe, то сделать это можно отслеживая глобальный обработчик window.onerror и в случае ошибки отправлять данные на сервер. Если код работает вне iframe, то реализовать сбор ошибок очень сложно.

Суммарное кол-ва ошибок со всех сайтов и браузеров

Информация по конкретной ошибке

CDN Failover
Выше я уже писал, что все имеет свойство падать, поэтому важно обрабатывать эти ситуации и лучше — автоматически. Мы прошли несколько этапов фаллбека CDN-серверов, начинали с ручного, а в итоге нашли способ делать это автоматически и оптимально для браузера.

В ручном режиме это работало просто: админам приходило СМС о том что CDN прилег, они совершали определенные манипуляции, после чего виджет начинал загружаться с серверов приложения. Это могло занять от 5 минут до 2 часов времени.

Для реализации автоматического фаллбека необходимо как-то детектить, что загрузка скрипта началась, но сделать это не так просто, как кажется. Браузер не дает возможности отслеживать промежуточные состояния загрузки тега script, как например событие onprogress в XMLHttpRequest, а сообщает только событие по окончанию загрузки и выполнения скрипта. Также нельзя за приемлемое время узнать, что сервер в данный момент недоступен, единственное событие onerror срабатывает по истечении таймаута запроса, больше 1 минуты. За минуту посетитель может уже покинуть страницу, а скрипт так и не загрузится.

Мы пробовали разные варианты, простые и сложные, но в итоге пришли к решению с ping-запросом CDN-сервера. Работает это так: мы сначала пингуем CDN-сервер, если ответил, то тогда мы загружаем виджет с него. Чтобы реализовать эту схему оптимально для браузера и наших серверов, мы используем легкий HEAD-запрос (без тела), а при последующих загрузках мы его не делаем, пока не обновится версия виджета, т. к. виджет уже в кеше браузера.

Таким образом мы получили очень быстрый и автоматически детект доступности сервера статики и в случае падения практически без задержек переходим на резервный сервер.

Loader

Чтобы загрузить свой скрипт на сторонний сайт, надо учесть множество моментов, но реализовать эту логику в коде-вставки сложно, так как он просто превратится в «мясо». Но делать это все равно надо, для этого мы создали небольшой модуль, который управляет всей этой логикой «под капотом» и загружает основной код виджета. Он загружается в первую очередь и реализует CDN Failover, кеширование, обратную совместимость со старыми кодами-вставки, А/Б тестирование, постепенную выкладку новой версии виджета и множество других функций.

Таким образом поэтапно мы пришли к схеме, которая покрывает основные кейсы загрузки и инициализации виджета. Она доказала свою эффективность за годы использования на большом количестве различных сайтов. При этом код-вставки остается простым и универсальным, так как в нем нет никакой логики и мы в любой момент можем ее поменять, при этом не заставляя пользователей менять код-вставки.

Сторонние сервисы

Ну и напоследок стоит упомянуть про сторонние сервисы, которые подключаются на сайт или каким-либо образом взаимодействуют с сайтами: поисковые боты, аналитика, различные парсеры и так далее. Эти сервисы оставляют отпечаток на работе, про это тоже не стоить забывать. Расскажу несколько случаев из нашей практики.

GoogleBot
В нашем приложении оператора есть функция «Посетители», в которой можно посмотреть посетителей, в данный момент просматривающих сайт, и различную информацию по ним: время на сайте, страницу, число просмотренных страниц и так далее. В определенный момент клиенты начали жаловаться, что у них «висят» посетители с других сайтов, то есть на сайте по продаже айфонов, клиент, у которого якобы открыта страница «Купить крем для лица». Когда начали разбираться, выяснили, что это GoogleBot, который при переходе от сайта к сайту кешировал LocalStorage первого и впоследствии передавал неправильные данные на сервер.

Решение простое, на сервере начали игнорировать данные от GoogleBot.

Яндекс.Метрика
В метрике есть замечательная функция — вебвизор, которая позволяет посмотреть, что видел и делал пользователь, в виде скринкаста. Для этого метрика записывает все действия пользователя, а после специальный бот метрики ходит по сайтам, совершает те же действия и записывает это. Проблема была в том, что для эмуляции мобильного браузера пользователя, по нашим данным, включался Firefox в режиме мобильной эмуляции, но при этом userAgent у бота был десктопный.

Это приводило к тому, что при просмотре мобильных пользовательских сессий в вебвизоре на записи открывалась десктопная версия виджета, хотя на самом деле у пользователей открывалась мобильная. Наши клиенты думали, что так и есть, и заваливали нас жалобами. В итоге нам пришлось детектить, что виджет загружен в вебвизоре, понимать, что в нем открыта мобильная версия, и в этом случае подсовывать туда мобильный виджет.

Примеров намного больше, но, думаю, этого будет достаточно для понимания сути.

Заключение

Надо очень внимательно относиться к коду, который вы отдаете клиентам для вставки на сайт. Мы кратко рассказали, с какими проблемами мы столкнулись и как их решали. В следующих статьях мы более подробно расскажем про некоторые упомянутые темы и другие участки нашей системы, например, как мы используем NodeJS в качестве бэкенда, как держим нагрузку всех 270К сайтов за счет продуманного кеширования и не боимся хабра-эффекта подключенных к нам сайтов, как работаем в полностью распределенной команде и многое другое.

Спасибо за внимание, будем рады ответить на ваши вопросы и комментарии!

Источник