Приближаемся к реальной разработке — разбираемся как устроен интернет и как проекту оказаться в нём
Приближаемся к реальной разработке — разбираемся как устроен интернет и как проекту оказаться в нём
Окей, за нашими плечами опыт вёрстки, настройки девелоперских инструментов и разделения на исходники (удобные для разработчика) и билды (оптимизированные для продакшена).
Осталось разобраться с продакшеном!
Как устроен интернет? Во втором уроке мы немного коснулись этой темы, сейчас — разберёмся подробнее.
Интернет подобен городу: у нас есть здания (хостинги), в которых находятся компании (сайты), где реестр арендаторов (ДНС) указывает что в конкретном офисе (IP-адрес) находится филиал компании (домен).
Зафиксируем: с помощью ДНС (например, Cloudflare или Amazon Route 53) мы указываем, что на конкретном айпи-адресе находится наш домен.
Где взять домен? Где взять айпи-адрес?
Домены покупаются у регистраторов доменов (например, Namecheap.com), после этого вы его подключаете к какой-нибудь ДНС-панели (например, Cloudflare), где указываете его настройки.
После вы арендуете сервер, например, на Scaleway или популярном DigitalOcean. Тут уже придётся возиться с линуксами или докерами, но у ДО есть огромная база туториалов.
Окей, у вас есть сервер, вы его настроили (поставив nginx), у вас есть его айпи-адрес. Его-то вы и указываете в ДНС-панели, выбрав А-запись.
MX-запись для почты, TXT для верификации домена у Яндекса (Яндекс.Вебмастер) и Гугла (Google Webmasters), CNAME для альясов (например, с помощью них работает GitHub Pages — хостинг фронтэнда от Гитхаба)
На самом сервере вы через веб-сервер типа nginx должны настроить что должно быть по конкретному домену (или поддомену), например, на erodionov.ru можно настроить раздачу файлов из директории /data/www/erodionov.ru.
В эту директорию вы копируете файлы через утилиту scp.
Сложно? Да нет, в целом понятно, но можно ведь проще.
В последнее время стали популярны проекты типа Now и surge — деплой через командную строку.
Эти проекты заточены под одну функциональность: работа с веб-приложениями. Обычные серверы ведь неотличимы от компьютера — туда можно накидать хоть раздачу сайтов, хоть скачивание торрентов, хоть прослушивание музыки.
В Наусш такое не прокатит: он умеет только деплоить проекты и раздавать их. Да, вот так вот просто!
Как с этим работать? now это пакет из Нпма, который ставится глобально в систему (yarn global add now).
Эта утилита занимается многим: от управления ДНС (now dns) и доменами (now domains) до деплоев на ресурсы Зейта (компании, которая развивает Нау).
Давайте задеплоим наш тестовый проект:
Как видите, ничего сложного — просто команда now deploy [path], а в ответ — ссылка https://test-now-zxzcvkslxi.now.sh на наш сайт.
Почему она такая некрасивая? Деплои у Зейта иммутабельные — это означает, что нельзя перезаписать один и тот же сайт, каждый деплой будет уникальным.
Но мы ведь не можем давать людям такие ссылки? Как они будут заходить на сайт?
Нам помогут альясы: они укажут что за определенным адресом (test-now-for-verstka.now.sh) закреплен конкретный деплой.
Можно ли свой домен test-now-for-verstka.ru? Да — читайте документацию.
Купите домен (например, ubereats-demo-erodionov, где erodionov ваши имя и фамилия) на Namecheap, подключите его к Cloudflare и задеплойте ваш проект на Zeit через Now.
Учтите, что задеплоен должен быть билд, а не исходник.
Логи деплоя доступны по адресу /_logs, а исходники — /_src (например, ubereats-demo-erodionov.ru/_src).
Придётся потратиться на домен и Зейт? Ну да, но вам же нужна практика.
Сегодня мы узнали как устроен интернет — прошлись по сложным вещам типа айпи-адресов, ДНС, доменов и хостингов, а в конце пришли к удобному Зейту.