Публикация работы

Веб-дизайн и разработка

Сегодня мы перенесем созданный сайт в интернет и посмотрим, что для этого нужно.
Глоссарий
Для успешного освоения материала рекомендуем вам изучить следующие понятия:
Домен
Символьное имя, служащее для идентификации областей, которые являются единицами административной автономии в сети Интернет, в составе вышестоящей по иерархии такой области. Каждая из таких областей называется доменом
Хостинг
Услуга по предоставлению ресурсов для размещения информации на сервере, постоянно имеющем доступ к сети
SSH
Сетевой протокол прикладного уровня, позволяющий производить удаленное управление операционной системой и туннелирование TCP-соединений
FileZilla
Свободный многоязычный FTP-клиент с открытым исходным кодом для Microsoft Windows, macOS и Linux. Поддерживает FTP, SFTP и FTPS и имеет настраиваемый интерфейс с поддержкой смены тем оформления
Виртуальный выделенный сервер
Услуга предоставления в аренду так называемого виртуального выделенного сервера. В плане управления операционной системой, по большей части она соответствует физическому выделенному серверу
Видеолекция
Конспект

Домен и хостинг
Чтобы сайт работал в интернете и был доступен, нужны две вещи:

1. Домен — имя, служащее для идентификации вашего сайта в интернете. Домен покупается сроком на 1 год и затем продляется.

2. Хостинг — услуга по предоставлению ресурсов для размещения информации на сервере. Хостинг обычно оплачивается ежемесячно, стоимость зависит от выбранного функционала и мощностей сервера.

Как правило, хостинг-провайдеры предоставляют базовый набор средств, которые требуются для обычного сайта. Например PHP, базу данных, phpMyAdmin для работы с базой, средства резервного копирования и прочие популярные инструменты. Кроме того, хостинги сразу позволяют развернуть популярные CMS, например WordPress, Joomla, Drupal и другие.
Выбор хостинга
На рынке существует множество хостинг-провайдеров. Все они предоставляют примерно одинаковый функционал и возможности, которые отличаются лишь тарифными планами. Мы рассмотрим процесс публикации на примере хостинга hoster.ru, потому что он предлагает бесплатный тестовый период, а с точки зрения функционала не отличается от многих других.
Регистрация в хостинге
1. Заходим на сайт hoster.ru и регистрируемся.

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

4. Копируем адрес и пробуем зайти по нему. Если заглушка отображается, значит все работает.
Создание базы на сервере
В легенде видим, какая иконка отвечает за базы данных, и переходим в базы данных. Баз у нас пока нет, давайте создадим.
1. Для начала нужно создать пользователя. Придумываем логин и пароль. Для теста используем стандартную комбинацию admin/admin, но в реальности так делать не стоит.
2. Возвращаемся к созданию базы. Придумываем имя базы, выбираем пользователя и даем ему все привилегии.
Отлично, теперь база есть, и мы переходим в phpMyAdmin для ее наполнения, поскольку по умолчанию она пустая.
Перенос локальной базы на сервер
Чтобы не создавать таблицы вручную, их нужно перенести.

1. Откройте локальный phpMyAdmin и выберите вашу базу данных.

2. Перейдите во вкладку Экспорт. Здесь можно экспортировать данные из базы вместе со структурой.

3. Нажмите Вперед и у вас скачается sql-файл.

4. Перейдите в phpMyAdmin на хостинге и выберите базу.

5. Дальше можно либо перейти во вкладку Импорт и там импортировать файл, либо просто перетащить его и он импортируется.

6. Теперь на хостинге у вас есть таблицы и данные в них.
Файловый менеджер
Если вы не хотите часто вносить изменения в ваш сайт или это одна html-страница, то загрузить код на хостинг можно с помощью встроенного файлового менеджера. На многих хостингах есть такой инструмент. В легенде можно найти иконку отвечающую за работу с файлами.
Совет
Обычно в таких файловых менеджерах на хостингах можно видеть структуру папок, создавать и удалять папки и файлы, скачивать их, а также загружать свои
Но мы рассмотрим более простой способ, который будет удобнее, если изменения на сайте предполагаются частыми.
Обзор программы
Чтобы перенести наш код на сервер, воспользуемся FTP-клиентом FileZilla.

1. Открываем его и переходим в менеджер сайтов.

2. Добавляем новый сайт.

3. Значение хоста копируем из нашей панели.

4. Логин и пароль — тоже оттуда.
На разных хостингах по-разному: где-то может потребоваться сначала создать FTP-пользователя, но тут он уже создан.

5. Нажимаем Connect для проверки подключения. Если в правой части программы появился каталог, значит мы подключились.

6. Слева каталог на нашем компьютере, а справа — на сервере.
Совет
В зависимости от хостинга корневая папка, куда нужно переносить сайт, может отличаться. В нашем случае это папка с названием домена. На других хостингах это может быть папка root, www, public или public_html
Перенос сайта
Если мы сейчас перетащим наш сайт с компьютера на хостинг, то, зайдя на сайт, увидим ошибку, так как данные для подключения к базе данных не соответствуют. Поэтому давайте внесем в них изменения.

1. Откроем db. php в редакторе.

2. Заменим хост с localhost на тот, что указан в панели администратора.

3. Указываем имя базы данных, которую мы создали, логин и пароль для подключения к базе.

4. Перетаскиваем все файлы на сервер в папку с именем нашего хоста и ждем окончания загрузки.
5. Обновляем страницу на хостинге и видим ранее созданный сайт. По адресу /admin должна отображаться админ панель.

6. Остается только проверить работу всех функций.
Итак, вы узнали, что такое хостинг и каким образом сайт оказывается в интернете. Вы самостоятельно можете разместить свой сайт в интернете на том хостинге, который вас устроит. Вместо хостинга можно использовать виртуальные выделенные сервера. С их помощью вы можете сделать намного больше, например, использовать node. js или даже написать микросервисы, но для управления таким сервером нужно обладать гораздо большими знаниями. Давайте проверим, как вы запомнили этот урок!
Дополнительные материалы
Node.js
Программная платформа, основанная на движке V8, превращающая JavaScript из узкоспециализированного языка в язык общего назначения
Микросервисная архитектура
Вариант сервис-ориентированной архитектуры программного обеспечения, направленный на взаимодействие, насколько это возможно, небольших, слабо связанных и легко изменяемых модулей — микросервисов
Программы
FileZilla

Git

Хостинги
https://www.reg.ru

https://jino.ru/

https://sprinthost.ru/

https://beget.com/ru

https://fozzy.com/ru/

Сервисы для хостинга IT-проектов и их совместной разработки
https://github.com/

https://bitbucket.org/
Интерактивное задание
Тест
Для закрепления полученных знаний пройдите тест
Стартуем!
Какой протокол мы использовали для подключения через FileZilla?
Дальше
Проверить
Узнать результат
Что необходимо приобрести для работы сайта в сети Интернет?
Дальше
Проверить
Узнать результат
Какая вкладка в phpMyAdmin позволяет скачать данные для переноса базы?
Дальше
Проверить
Узнать результат
Какая вкладка в phpMyAdmin позволяет загрузить данные из файла для переноса данных?
Дальше
Проверить
Узнать результат
Что такое домен?
Дальше
Проверить
Узнать результат
К сожалению, вы ответили неправильно
Прочитайте лекцию и посмотрите видео еще раз
Пройти еще раз
Неплохо!
Но можно лучше. Прочитайте лекцию и посмотрите видео еще раз
Пройти еще раз
Отлично!
Вы отлично справились. Теперь можете ознакомиться с другими компетенциями
Пройти еще раз