# Домены, хостинги и рабочий сайт в интернете
Приближаемся к реальной разработке — разбираемся как устроен интернет и как проекту оказаться в нём

# Домены, хостинги и рабочий сайт в интернете

> Приближаемся к реальной разработке — разбираемся как устроен интернет и как проекту оказаться в нём

Окей, за нашими плечами опыт вёрстки, настройки девелоперских инструментов и разделения на исходники (удобные для разработчика) и билды (оптимизированные для продакшена).

Осталось разобраться с продакшеном!

## Домены, хостинги, ДНС

Как устроен интернет? Во [втором уроке](https://erodionov.ru/courses/verstka/FhTKluFzm7/nHdviS9Jil) мы немного коснулись этой темы, сейчас — разберёмся подробнее.

Интернет подобен городу: у нас есть **здания** (хостинги), в которых находятся **компании** (сайты), где **реестр арендаторов** (ДНС) указывает что в конкретном **офисе** (IP-адрес) находится **филиал** компании (домен).

Зафиксируем: с помощью ДНС (например, [Cloudflare](http://cloudflare.com/) или [Amazon Route 53](https://aws.amazon.com/route53/)) мы указываем, что на конкретном айпи-адресе находится наш домен.

Где взять домен? Где взять айпи-адрес?

Домены покупаются у регистраторов доменов (например, [Namecheap.com](http://www.namecheap.com/)), после этого вы его подключаете к какой-нибудь ДНС-панели (например, [Cloudflare](http://cloudflare.com)), где указываете его настройки.

После вы арендуете сервер, например, на [Scaleway](https://www.scaleway.com/) или популярном [DigitalOcean](https://m.do.co/c/814480d2eb4b). Тут уже придётся возиться с линуксами или докерами, но у ДО есть огромная [база туториалов](https://www.digitalocean.com/community/).

Окей, у вас есть сервер, вы его настроили ([поставив](https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-16-04) nginx), у вас есть его айпи-адрес. Его-то вы и указываете в ДНС-панели, выбрав А-запись.

![](https://i.imgur.com/2DUxQYd.png)

> MX-запись для почты, TXT для верификации домена у Яндекса ([Яндекс.Вебмастер](http://webmaster.yandex.ru/)) и Гугла ([Google Webmasters](https://www.google.com/webmasters)), CNAME для альясов (например, с помощью них работает [GitHub Pages](https://pages.github.com/) — хостинг фронтэнда от Гитхаба)

На самом сервере вы через веб-сервер типа [nginx](http://nginx.com/) должны настроить что должно быть по конкретному домену (или поддомену), например, на `erodionov.ru` можно настроить раздачу файлов из директории `/data/www/erodionov.ru`.

В эту директорию вы копируете файлы через утилиту [`scp`](https://en.wikipedia.org/wiki/Secure_copy).

---

Сложно? Да нет, в целом понятно, но можно ведь проще.

## CLI-хостинги

В последнее время стали популярны проекты типа [Now](https://zeit.co/now) и [surge](http://surge.sh/) — деплой через командную строку.

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

В Наусш такое не прокатит: он умеет только деплоить проекты и раздавать их. Да, вот так вот просто!

Как с этим работать? [`now`](http://npm.im/now) это пакет из Нпма, который ставится глобально в систему (`yarn global add now`).

![](https://i.imgur.com/fFUyfAv.png)

Эта утилита занимается многим: от управления ДНС (`now dns`) и доменами (`now domains`) до деплоев на ресурсы Зейта (компании, которая развивает Нау).

Давайте задеплоим наш тестовый проект:

![](https://i.imgur.com/AO8uQHc.png)

Как видите, ничего сложного — просто команда `now deploy [path]`, а в ответ — ссылка [https://test-now-zxzcvkslxi.now.sh](https://test-now-zxzcvkslxi.now.sh) на наш сайт.

Почему она такая некрасивая? Деплои у Зейта **иммутабельные** — это означает, что нельзя перезаписать один и тот же сайт, каждый деплой будет уникальным.

![](https://i.imgur.com/uJJ41q2.png)

Но мы ведь не можем давать людям такие ссылки? Как они будут заходить на сайт?

Нам помогут [альясы](https://zeit.co/docs/features/aliases): они укажут что за определенным адресом (`test-now-for-verstka.now.sh`) закреплен конкретный деплой.

![](https://i.imgur.com/Djtyb9A.png)

Можно ли свой домен `test-now-for-verstka.ru`? [Да](https://zeit.co/docs/features/aliases#custom-domains) — читайте документацию.

## Задание

Купите домен (например, `ubereats-demo-erodionov`, где `erodionov` ваши имя и фамилия) на [Namecheap](https://www.namecheap.com/), подключите его к [Cloudflare](http://cloudflare.com/) и задеплойте ваш проект на [Zeit](https://zeit.co/) через [Now](https://zeit.co/now).

Учтите, что задеплоен должен быть билд, а не исходник.

Логи деплоя доступны по адресу `/_logs`, а исходники — `/_src` (например, `ubereats-demo-erodionov.ru/_src`).

Придётся потратиться на домен и Зейт? Ну да, но вам же нужна практика.

## Итог

Сегодня мы узнали как устроен интернет — прошлись по сложным вещам типа айпи-адресов, ДНС, доменов и хостингов, а в конце пришли к удобному Зейту.