Деплой сайта с GitHub на хостинг через SSH
Итак, чтобы разобраться со всей этой темой, вам понадобится:
- Базовые навыки работы с Git. Коммиты, пуши, пуллы и все такое.
- Хостинг, поддерживающий подключение по SSH.
- GitHub-репозиторий с поддержкой GitHub Actions (насколько я знаю, они работают везде, но мало ли).
Принцип
Вкратце скажу принцип работы всего этого действа: когда мы будем пушить данные в репозиторий, сработает GitHub Action, которому сказано подключиться к вашему хостингу по SSH и залить туда данные с помощью rsync.
Создание SSH-ключа
Итак, самое первое, что нам стоит сделать, это создать SSH-ключи – приватный и публичный. Лучше всего это делать непосредственно в консоли гита — Git Bash. Если же вы на Mac – подойдет и Терминал.
Открываем Git Bash, вводим следующую команду:
При использовании команды указывать парольную фразу не нужно.
Скриншот из консоли при вводе команды создания ключа
Данная команда создаст ключи и поместит их в папку .ssh на вашем ПК. К сожалению, не знаю, куда именно попадают ключи на Mac, но думаю вы легко найдете это в гугле. А на винде — C:\Users\ИмяПользователя.ssh. Если же вы откроете Bash в этой же папке — ключи попадут прямо в нее. Главное, не забудьте удалить их оттуда, чтобы они не попали в файлы репозитория!
В этой папке вы найдете ключи id_rsa и id_rsa.pub, приватный и публичный ключи соответственно.
Добавление ключей
Итак, когда вы создали ключи, их нужно добавить на хостинг и в репозиторий. Как именно устроено это на разных хостингах, я знать не могу, но покажу на примере cPanel, как это выглядит.
Скриншот из cPanel, доступ по SSH
Добавляем id_rsa.pub в публичные ключи репозитория, если потребуется, авторизуем его (просто нажатием кнопки), и сохраняем.
Теперь идем в репозиторий GitHub, переходим в Settings, оттуда переходим в Secrets. Внутри нужно будет назвать секрет и ввести приватный ключ (сохраните его заранее в буфер обмена). Называйте ключ просто – key, вставляйте ключ и сохраняйте.
Готово, оба ключа введены и должны работать.
Пишем файл для деплоя
Чтобы сделать собственно сам деплой, то есть дать понять гиту, что при изменении кода надо залить его на удаленный сервер, нам нужно написать скрипт на языке Yaml. Ниже я приложу код, вникать в него вовсе необязательно, но ниже я укажу действительно важные моменты.
- Итак, название файла deploy.yml
- Внутри также указан name: Deploy
- А далее указано действие, по которому сработает скрипт — on: push: branches: main . То есть, когда вы будете пушить что-то в ветку main – сработает скрипт. Конечно, если у вас другая ветка – можете поменять ее.
- Далее указана "работа", или же jobs. Там описано, где именно будет запускаться все это и как. А также указан путь к ключам, как — run: echo "$" > "$HOME/.ssh/key" . Как раз тут и указано наше название ключа, key, которое мы писали в секретах.
И самая интересная для нас часть кода — это build и deploy.
Первая строка по факту равноценна привычному npm i , просто через ci установить все это на гите быстрее. Вторая же строка — это строка опциональная. Если у вас в проекте есть npm-скрипт build — используйте. Если у вас вообще нет npm-скриптов — удалите эти строчки.
Ну а здесь происходит буквально деплой данных. Сперва, командой cd app мы переходим в папку app (опять же, абсолютно опциональная вещь, если у вас просто нет папки app и никуда не надо переходить – можно убрать эту команду). Ну и далее для нас важна только строка, указывающая, куда все это деплоить:
Это полный путь к моему серверу, причем в конце еще и указан адрес конкретного сайта, в данном случае blog.maxgraph.ru. Если вдруг вы не знаете этот путь – можете уточнить у поддержки вашего хостинга. И будьте внимательны, чтобы случайно не задеплоить данные не туда, куда надо, ведь подобный деплой полностью затирает то, что было ранее.
Что дальше
Итак, файлик deploy.yml нужно поместить в ваш проект в специальную папку .github, чтобы гитхаб о ней узнал, и затем просто запушить проект.
После пуша вы сразу можете перейти во вкладку actions вашего репозитория и вживую посмотреть, как все команды из yml файла выполняются прямо там.
Скриншот вкладки GitHub Actions с рабочим запуском deploy.yml
Заключение
Надеюсь, данная статья была вам полезна. Если же вам интересна видео-версия – в начале статьи есть видео, переходите и смотрите! До скорого!
Как настроить сайт с помощью GitHub и Cloudflare: иллюстрированное руководство
Перейдите на главную страницу GitHub Pages и выберите опцию «Project site», чтобы найти инструкции по созданию базовой страницы с нуля:
Шаг 2. Настроить GitHub Pages для репозитория
Перейдите в настройки для своего репозитория (вкладка «Settings»):
В разделе «Github Pages» выберите ведущую ветку для обслуживания вашего веб-сайта (master branch):
После этого можете перейти на https://<названиевашегосайта>.github.io/repository, чтобы увидеть сайт в действии, как показано на изображении ниже:
Шаг 3. Добавить собственный домен
Добавьте домен, который вы купили, и нажмите на кнопку «Save»:
Теперь нужно настроить Cloudflare для использования всех приятных фишек, о которых упоминалось в начале статьи.
Шаг 4. Настроить домен в Cloudflare
Залогиньтесь в Cloudflare. Если вы там впервые, то увидите примерно такую же картину, как на изображении ниже. Если вы уже использовали сервис, то можете сразу нажать на опцию «Add Site» в строке навигации (вверху справа), затем добавить новый домен. Введите имя домена, с которым будете работать, и нажмите на «Begin Scan»:
Шаг 5. Настроить записи DNS для вашего домена
На этом этапе вы указываете Cloudflare на ваш домен на GitHub, используя две записи A (адресные записи, соответствие между именем и IP-адресом):
- 192.30.252.153
- 192.30.252.154
После настройки все запросы к вашему домену (например, вашличныйдомен.com) будут перенаправлены на ваш сайт на GitHub, настроенный на шаге 3.
И есть еще кое-что. Например, вам хочется использовать субдомен типа www для своего веб-сайта, т. е. www.вашличныйдомен.com. Для этого вам нужно будет добавить запись CNAME, которая укажет корневому домену (@) на ваш поддомен (www).
Примечание. Не пытайтесь сразу перейти к своему пользовательскому домену. Это не сработает, ведь вы выполнили только настройку Cloudflare для GitHub.
Нажмите «Continue» для перехода к следующему шагу.
Шаг 6. Выбрать бесплатный план в Cloudflare
Бесплатный план для Cloudflare предоставляет множество опций, которые перечислены в начале статьи. Выберите план:
Нажмите «Continue», чтобы перейти к следующему шагу.
Шаг 7. Обновить серверы имён у регистратора
После того, как вы попали на эту страницу, откройте её в одной вкладке, а регистратор доменных имён (место, где вы купили свой домен) — в другой.
Теперь вам нужно заменить существующие серверы имен (nameservers) в настройках вашего домена на странице регистратора теми, что показывает Cloudflare. Вот пример того, как регистратор ведет себя после успешной замены:
Ура! Вы почти настроили свой собственный домен, чтобы использовать Cloudflare в качестве DNS-провайдера. Теперь если вы перейдете к пункту «Overview» cверху, то обнаружите, что сервис все ещё ожидает изменения серверов имен:
Нужно дождаться, пока статус на вкладке «Overview» поменяется на «Active»:
Теперь можете попробовать зайти на свой сайт, он должен заработать.
Шаг 8. Настроить минификацию
В настройках скорости («Speed»), разделе «Auto Minify» поставьте галочки для автоматической минификации у всех пунктов: JavaScript, CSS, HTML.
Эти настройки применяются Cloudflare «на лету» один раз, а затем кэшируются. Всякий раз, когда какая-либо из ваших личных настроек будет изменяться, Cloudflare будет всё кэшировать.
Преимущество минификации заключается в том, что размер исходного кода сильно уменьшится, поскольку Cloudflare удалит все ненужные пробелы и комментарии.
Шаг 9. Настроить срок действия кэша браузера
Если вы прокрутите вниз ту же страницу, где находится «Auto Minify», то найдете раздел «Browser Cache Expiration». В идеале срок действия должен быть установлен на 30 дней / 1 месяц, чтобы WebpageTest не выдавал никаких предупреждений:
Это время показывает, что после загрузки вашего сайта в любом браузере последний не будет запрашивать данные во второй раз, пока период кэширования не истечет.
Прежде чем перейти к следующему шагу, проверьте криптографические настройки («Crypto») на Cloudflare. В разделе SSL должна появиться зеленая надпись «Active Certificate»:
Примечание: Попробуйте перезагрузить страницу, иногда она не обновляется.
Дальше нужно настроить постоянное использование HTTPS на вашем сайте. Чтобы всё работало без проблем, понадобится активный сертификат на Cloudflare.
Шаг 10. Настроить правила для страниц
На этом шаге вы сделаете две важные вещи:
- переадресацию всех запросов с www.вашличныйдомен.com на вашличныйдомен.com;
- переадресацию всех запросов с http://вашличныйдомен.com на https://вашличныйдомен.com.
Зайдите во вкладку «Page Rules» и нажмите на «Create Page Rule»:
Для обработки переадресации с www.вашличныйдомен.com на вашличныйдомен.com замените tweetify.io на картинке ниже на вашличныйдомен.com. Нажмите «Save and Deploy»:
Для обработки переадресации с http:/www.вашличныйдомен.com на https:/вашличныйдомен.com, замените tweetify.io на вашличныйдомен.com. Нажмите «Save and Deploy»:
Напомним, что в марте этого года популярность протокола HTTPS достигла переломного момента: доля HTTPS-запросов превысила отметку в 50%, а число сайтов, использующих этот протокол, за последний год удвоилось. Использование HTTPS — это норма, а не исключение, поэтому советуем не пренебрегать необходимыми настройками.
Шаг 11. Настроить HSTS
Теперь нужно снова зайти в криптографические настройки («Crypto»), после чего прокрутить страницу вниз до «HTTP Strict Transport Security (HSTS)». Кликните «Enable HSTS». Вас спросят, точно ли вы знаете, что делаете. Прежде чем нажмете на «I understand», прочтите, зачем нам вообще включать HSTS.
Если пользователь в прошлом уже открывал ваш сайт, то теперь он всегда автоматически будет направляться на HTTPS-версию сайта. Это ускоряет загрузку сайта при последующих посещениях, поскольку перенаправление с HTTP на HTTPS происходит на клиентской стороне, а не за счёт правила в Cloudflare, которое мы создали на предыдущем шаге.
Осталось активировать те же опции, что и на скриншоте:
Такие заголовки Cloudflare будет добавлять к запросам к вашему домену после того, как вы настроили HSTS: