Учим веб-программирование с нуля до трудоустройства. Сегодня будем выгружать страницу на сервер. Разберемся немного с FTP и SSH.
В этой статье будет много настроек. Если не понятно - не стесняйтесь спрашивать нас и других учеников в нашей открытой группе в телеграм:
Для тех, кто только к нам присоединился, ссылка на все уроки:
И ссылка на самый первый урок:
Ссылка на предыдущий урок:
Что было на прошлом уроке?
На прошлом уроке мы поработали со стилями на странице, разобрались в CSS и поработали со шрифтами. Страница получилась, надо сказать, довольно хорошей.
Что будет на этом уроке?
На этом уроке мы потренируемся в создании, настройке серверов и опубликуем наш сайт в интернете на реальном сервере.
На всякий случай, вот результат нашего предыдущего занятия. Можете скачать и открыть проект в phpstorm.
https://github.com/madmaker/srmt22-webclasses-lsn4/archive/refs/tags/lsn4.zip
С нашей страницей есть одна серьезная глобальная проблема, которую мы решим на этом занятии.
Наша страница не в интернете!
Сервер
#где взять сервер
Чтобы страница, сайт, веб-сервис, проект оказались в интернете, их нужно разместить на сервере.
Звучит страшно, а на самом деле все очень просто и довольно не дорого.
Что нам понадобится для размещения на сервере?
FTP-клиент
FTP - это File Transfer Protocol. Протокол передачи файлов по сети.
Он нам нужен для того, чтобы загружать файлы с нашего компьютера на сервер и обратно.
PhpStorm на наше счастье умеет работать с FTP-сервером.
Где взять сервер?
У нас несколько вариантов:
- Организовать бесперебойный интернет, сделать внешний IP адрес, организовать бесперебойное электроснабжение и держать все на своем компьютере дома - самый дорогой и бессмысленный вариант.
По личному опыту и опыту коллег, банально на электричестве и содержании этой железки вы проиграете. - Купить сервер и отвезти его в датацентр - дорогой, хороший вариант, но если сервер сломается - это ваши проблемы - идите и чините. В это время сайт работать не будет. Можно сделать отказоуйстойчивый вариант - купить два сервера и, если один выйдет из строя, то сразу все запускать на втором. Можно сделать катастрофоустойчивый вариант (если датацентр перестанет работать) - серверы разместить в разных ДЦ. На самом деле вариант достойный владельца датацентра, а не для нас. Я на практике сталкивался с тем, что акционеры ДЦ не поделили между собой что-то и просто отключили Датацентр от интернета, наплевав на всех клиентов.
- Взять в аренду сервер - дорого, но можно все. Один недостаток - если с "железом" начнутся проблемы, то скорее всего вам придется доказывать датацентру, что это их проблема, а не ваша. Я на практике сталкивался с таким не раз в датацентрах в России. Приходилось доказывать, что у сервера вышло из строя железо и он перезагружается именно по этой причине. Можно, конечно, взять сервер в аренду в Европе - работают очень надежно, но в 2022-м году опять же практика показала, что Европейцы просто могут наплевать на своих Российских клиентов, с которыми работают по 10 лет и просто отключить.
- Есть вариант виртуального сервера: VPS. Вы берете в аренду "кусочек" сервера. В возможностях не ограничены, но это будет всего несколько ГБ диска, несколько ГБ памяти и 1-2 ядра процессора. То есть по железу очень скудно. Но стоит от 150 рублей в месяц. Отлично, наш вариант! :)
- Хостинг - вы просто размещаете свой код и он должен соответствовать возможностям этого хостинга. Какие-то "особенные" функции не сделаете, доступа к консоли сервера не будет. Ценник еще ниже, но есть ли смысл экономить 50 рублей из-за ограничений?
Итого, резюмирую: мы берем VPS где-нибудь в России.
Я уже где только не размещался. На сегодняшний день оптимальным вариантом для простеньких проектов выбрал sprinthost. РФ, не дорого, работает вменяемо.
Регистрируемся у хостера
#недорогой vds
Итак, переходим по ссылке ниже.
Откроется сайт Спринт Хост. В главном меню выбираем VDS
Нам будет достаточно RAM 1GB и 1 ядра процессора для нашего обучения. На момент написания статьи стоимость со скидкой была всего 211 рублей в месяц.
Выбираем нужный тариф.
Вас перекинет на сайт sprintbox - там сразу нужно будет зарегистрироваться - заполняем адрес почты, придумываем пароль и жмем "зарегистрироваться".
После этого сразу попадаете в свою учетную запись. Нужно будет пополнить счет хотя бы на 100 рублей, чтобы создать "бокс".
Сверху нажимаем на 0,00 рублей и в открывшемся окошке нажимаем "Пополнить". Пополняете счет.
Создаем сервер
Далее возвращаемся в панель управления и нажимаем "Добавить бокс".
Дальше выбираем, как на картинке:
- из базового образа (можно еще из резервной копии другого сервера)
- Debian - операционная система нашего сервера . Когда нажмете на Debian, предложит выбрать версию - выбирайте Debian 10
- Аутентификация по паролю (можно по SSH-ключу, но об этом мы позже будем разговаривать)
- Использовать приватную сеть нам НЕ нужно
- Подключать бэкапы по расписанию нам НЕ нужно
- Защита DDos-Guard нам НЕ нужна
Когда выберите версию Debian, окно несколько изменится.
Жмите "Создать бокс".
Мы себе выберем один из самых дешевых тарифов (возможно у вас будет скидка).
Главное, чтобы был хотя бы 1ГБ RAM - это оперативная память. Меньше просто не потянет сервер через пару наших уроков.
Жмем "Создать".
Выскочит подтверждение - жмем ОК.
Сайт некоторое время "пошуршит" и выдаст вам ваш новый бокс. А на почту, указанную при регистрации отправит письмо с паролем и IP от вашего нового бокса.
В панели управления появится вот такой бокс:
Кстати, если пароль не пришел, то его можно сбросить, нажав на "Другие действия с боксом" и там выбрать "Сбросить пароль root"
Письмо на почте должно быть примерно таким:
Закачиваем нашу страничку на сервер
Мы почти у цели. Осталось только закачать нашу страницу на сервер.
Для этого нужно будет настроить phpstorm.
Подключение к серверу по SSH
#удобный ssh клиент
Но для начала, так как это новый сервер, нам обязательно нужно будет сменить пароль (иначе работать ничего не будет - это правило - при первом входе нужно сменить пароль).
Для того, чтобы сменить пароль, нам нужно будет подключиться к северу по SSH (спокойно, без нервов - там все просто. Я подскажу).
Так как у нас с вами у всех разные операционные системы, а хотелось бы всем посоветовать крутой инструмент для работы с сервером по SSH, я рекомендую Termius.
В самом низу страницы (в подвале) есть раздел загрузок. Выбираете свою операционную систему и переходите на страницу загрузки
На странице загрузки просто нажимаете кнопку Download ******.
Приложение скачается - его нужно будет установить. У него есть платная версия - она, конечно довольно удобная, но нам для наших целей возможностей бесплатной будет вполне достаточно.
На самом деле это только в Windows нужно что-то качать. В Mac OS и Linux из коробки есть терминал, который позволяет работать с удаленными серверами
Устанавливается просто и быстро.
При первом запуске предложит создать аккаунт. Можно обойтись и без него.
Жмите "Continue without account"
Далее жмем New host
#подключение к серверу по ssh
Далее заполняете данными из письма данные сервера и жмете на стрелочку
Вам нужно заполнить:
- label - как в Termius будет называться ваш сервер. Пишите, что угодно - это только для вас
- Address - это IP-адрес бокса
- Port - 22 порт SSH по умолчанию
- Username - root. Так называется самый главный админ-пользователь в линуксе
- Password - Пароль пользователя root из письма
После этого двойным кликом жмем на наш новый хост в списке Hosts
В следующем окне нас спросят, доверять ли этому серверу. Жмем Add And Continue
У меня, кстати, повторно спросило пароль. Я, судя по всему, ошибся, когда заполнял. Если будет также - скопируйте пароль из письма еще раз и вставьте в поле ввода пароля.
Итак, мы успешно подключились к серверу и от нас сейчас просят сменить пароль. Точнее, нас просят ввести текущий пароль - Current Password.
Можете ввести вручную или вставить скопированный. Обратите внимание, что на экране ничего не отобразится, когда вы будете вставлять или вводить пароль - это нормально. Сделано для защиты сервера.
И еще момент: если будете нажимать какие-то кнопки или символы, то они также могут быть вбиты в пароль и вам сервер выдаст ошибку о том, что пароль неверный. Если вводите не тот пароль, то сервер еще пару раз попросит ввести текущий пароль, а потом просто вас отключит.
После ввода Current Password, с вас запросят новй пароль: New password и потом еще раз повторить новый пароль - Retype new password.
Можете либо придумать новый пароль, либо к старому добавить, например, восклицательный знак.
В результате пароль должен быть изменен.
Давайте сразу новый пароль в настройках хоста введем, чтобы в следующий раз не мучиться.
В левом меню Termius выбираем Hosts - откроется список хостов.
Наводим на наш сервер - справа появится кнопка редактирования - жмем на нее
Обновите пароль.
Теперь можете гордо заявлять, что арендовали Linux сервер и администрировали его по SSH.
Настройка SFTP в PHPStorm
#Подключение SFTP в phpstorm
Сервер мы арендовали, пароль поменяли. Теперь нужно настроить PhpStorm, чтобы он мог закачать наш проект на сервер.
В верхнем меню PhpStorm выбираем Tools->Deployment->Configuration
В открывшемся окне нажимаем на плюс и выбираем SFTP (Secure FTP)
SFTP, FTP, FTPS, WebDAV - это все разные протоколы подключения к серверу. Нам подходит 2 варианта: SFTP и FTP. Secure - защищенный, просто FTP - нет, да еще и есть определенные ограничения. Поэтому выбираем только SFTP.
В следующем окне вводим название для нашего сервера (любое на ваш вкус) и жмем ОК
Сервер появится. Продолжаем его настраивать. Нам нужно настроить SSH (Тоже самое, что мы делали выше в Termius). Жмем на кнопку, как на скрине.
Откроется новое окно с SSH конфигурациями ваших серверов. Там будет пусто. Жмите на +.
Заполняем все по аналогии с настройкой Termius, которую мы делали выше.
После того, как заполните нужные поля, жмите Test Connection - нам нужно убедиться, что все настроено правильно. Не забудьте, что мы меняли пароль к нашему серверу.
В процессе подключения увидите такое же окно, как было в Termius при первом подключении - phpstorm спрашивает, можно ли доверять этому серверу. Жмем ОК.
В результате должно появиться такое окно: Successfully connected!
Это значит, что мы успешно проверили соединение с сервером в PhpStorm. Жмем ОК в сообщении об успешном подключении, а потом жмем ок в самом окне SSH Configuration.
Вас должно вернуть в окно Deployment, где мы продолжим настраивать PhpStorm для того, чтобы он мог закачать наши файлы на сервер в нужное место.
Теперь заходим во вкладку Mappings и в Deployment Path вписываем /www
Жмем ОК - закрываем окно настройки.
Теперь правой кнопкой жмем на название нашего проекта (где список всех файлов), выбираем Deployment->upload to myserver
PhpStorm может запросить подтвердить загрузку файлов на сервер. Жмем Yes, если появится такое окно
Все, файлы загружены на сервер.
Давайте проверим это. Откроем панель с файлами на сервере. Для этого в основном меню PhpStorm выберем Deployment->Browse Remote Host
Откроется панель справа, в которой будут видны наши файлы на сервере в папке /www
Файлы загрузили.
Резюме проделанных действий
Я так полагаю, что голова уже кипит.
Давайте резюмируем, чем мы вообще занимаемся.
1. Мы сделали красивую веб-страничку и захотели ее опубликовать в интернете, чтобы поделиться со всем миром
2. Мы арендовали сервер, а точнее виртуальный сервер VDS
3. Мы немного поадминили сервер, поковырялись в настройках PhpStorm и загрузили наш проект на этот сервер в папку /www
4. Теперь нам нужно еще немного поколдовать с сервером, чтобы научить его выдавать наш проект браузеру
Как работает сервер
Сервер - это такой же компьютер, как и ваш. На нем операционная система Debian Linux, а работаем мы с ним не через клавиатуру, мышь и монитор, а удаленно через консоль через SSH.
У сервера, как и у нашего компьютера есть сетевой IP-адрес. С разницей в том, что сервер виден всему интернету, а наш компьютер виден только нашей домашней сети (в общем случае. Если ваш компьютер виден всему интернету, то зачем вы это читаете? Вы и так все знаете).
Еще момент терминологии: сервер - это и машина, компьютер, и программное обеспечение.
Если мы в браузере введем адрес нашего компьютера, то браузер не вернет веб-страницу. Так и сервер. Нужно настроить серверное приложение, которое будет возвращать нам нашу веб-страницу в ответ на запросы браузера.
Если не поняли - не страшно. У нас экспресс-курс. Мы разбираемся со всем на практике. Еще с серверами поработаем.
Настраиваем Docker
#Установка DOcker в debian
Для нас самый быстрый путь, чтобы наша веб-страница выдавалась браузеру - установить Docker. Docker - это один из основных инструментов на сегодня в мире веб-разработки. Если на пальцах, то он нам позволяет без особых заморочек запускать различные серверные приложения на "голом" сервере.
Один только момент - этот Docker нужно установить. Это будет самое сложное, но не сложнее копирования отсюда и вставки в Termius.
Итак, открываем Termius, дважды кликаем на наш хост и подключаемся к нему.
Дальше копируем команды как есть целиком по одной и нажимаем Enter.
Я буду курсивом отмечать, что мы вообще делаем.
Сравнивайте ваш вывод в консоли с тем, что у меня на скриншотах. Должно быть похоже. Если не понятно - пишите за помощью в наш чат клуба в телеграм.
Обновляем репозиторий
sudo apt-get update
Устанавливаем необходимые пакеты
sudo apt-get install ca-certificates
sudo apt-get install curl
При установке этого пакета в консоли будет вопрос "Do you want to continue" - хотите ли вы продолжить. Чтобы продолжить, нужно ввести Y (от англ. Yes) и нажать Enter
sudo apt-get install gnupg
Аналогично попросит подтверждения - вводим Y и жмем Enter
sudo apt-get install lsb-release
Все, пакеты установили.
Теперь нужно добавить официальный ключ GPG Docker
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
Настраиваем репозиторий (репозиторий - это некий "Архив", в котором хранятся дистрибутивы приложений
echo \ "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
Еще раз обновляем репозиторий
sudo apt-get update
Устанавливаем Docker Engine
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin
При установке пакетов всегда просит подтверждать установку - вводим Y и жмем Enter
Проверяем, что все установилось правильно
sudo docker run hello-world
Если все правильно, то у вас должно быть сообщение Hello from Docker!
Запускаем веб-сервер в docker
Выполняем вот такую нехитрую команду в консоли (копируем, вставляем и жмем Enter)
docker run --name my_simplehttpserver -p 80:80 -v /www:/var/www -d aikain/simplehttpserver:0.1
Открываем нашу страницу в браузере
В хроме открываем новую вкладку и в адресной строке вводим IP-адрес нашего сервера (он в письме от Sprintbox приходил, мы его вводили в Termius, PhpStorm - подсмотрите где-нибудь в этих местах).
То есть я ввел просто http://141.8.199.31, а вам нужно ввести цифры от своего сервера.
Если вы все сделали правильно, то на экране отобразится ваша страница. Если нет - пишите нам в телегу. Поможем.
Может быть, что вместо страницы отобразится список файлов, как н картинке ниже:
Это означает, что вы свою HTML-страницу назвали не index.html, а как-то по-другому. На скрине страница называется CVgeneral.html - если кликнуть на этот файл, то браузер откроет вашу страницу. Переименуйте этот файл в index.html - тогда при заходе на сайт сразу будет открываться эта страница.
index.html - это индексная страница. Браузер пытается найти ее и отобразить сразу. Если ее нет, то отображается список файлов.
Еще нюанс: если вы меняете файл у себя локально на компьютере, например, переименовываете их, то не забудьте загрузить изменения на сервер. Ниже скрин для напоминания.
Для тех, кому понравилось администрировать сервер по SSH:
Для остановки сервера команда docker stop my_simplehttpserver
Для повторного запуска команда docker start my_simplehttpserver
Для удаления docker-контейнера с сервером команда docker rm my_simplehttpserver
Поздавляю!!! Вы успешно создали страницу, сами построили сервер, выложили свой проект на сервер в интернете и теперь его видит весь мир (на самом деле пока только те, кто знает адрес вашего сервера).
Если у вас все получилось, то это очень крутой результат и всего лишь на 5-м занятии.
Самостоятельное задание
Поэкспериментируйте со своим сервером. Попробуйте менять css, html своего проекта и закачивать на сервер через phpstorm.
Попробуйте открыть свой сайт на другом компьютере, отправьте ссылку друзьям, добавьте в комментарий к статье - я посмотрю, попробуйте открыть на телефоне (может, кстати, не открыться - телефон пытается подключиться по безопасному SSL протоколу, а мы до такого еще не дошли. Тогда в конце адреса сервера после последней цифры допишите двоеточие и номер порта - :80, чтобы получилось что-то вроде http://141.8.199.31:80 - тогда и телефон откроет)
Почитайте самостоятельно о Docker, об SSH, о том, как работают web-серверы, если будет время.
Что делать дальше и как нам помочь?
1. Поставить лайк
2. Написать в комментарии, за сколько времени удалось сделать урок, с чем возникли сложности, что бы хотелось разобрать более детально
3. Подписаться на этот канал
4. Добавиться к нам в группу в наш открытый клуб веб-разработки в телеграм: https://t.me/srmt22_webclub
5. Подписаться на наш канал курсов в телеграм: https://t.me/srmt22class
6. Сделать репост этого урока себе в соцсети.
7. Скрин результата своей работы прислать в комментарии к этой статье.
Что будет на следующем занятии?
Открывать свой сайт, вводя IP-адрес - это, конечно, занимательно, но хотелось бы что-то типа srmt22.ru или фашафамилия.ru. Этим и займемся. Мы зарегистрируем подберем, зарегистрируем доменное имя и настроим его работать с нашим сервером. Если останется время, то еще и вашу личную почту настроим на вашем домене.
Ссылка на следующее занятие:
https://dzen.ru/media/id/62d57767cc38491671976547/62d8bfb8c13ec8377120f976