{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":32,"offset":77}],"inlineStyleRanges":[],"text":"Пишу про полезные материалы про IT, и собираю свой ламповый нетворкинг тут - https://t.me/mindgroup_education. Присоединяйтесь!","type":"unstyled","key":"1121k"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":35,"offset":68}],"inlineStyleRanges":[],"text":"Также мы занимаемся заказной разработкой сайтов и веб приложений, и интернет продвижением полного цикла. Обращайтесь!","type":"unstyled","key":"2vhcd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оглавление.","type":"unstyled","key":"7pgbb"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":17,"offset":0}],"inlineStyleRanges":[],"text":"Часть 1. Введение","type":"unordered-list-item","key":"4jr1h"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":21,"offset":0}],"inlineStyleRanges":[],"text":"Часть 2. Запускаем CI","type":"unordered-list-item","key":"9j2r3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часть 3. Его величество, деплой!","type":"unordered-list-item","key":"fg6sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Введение","type":"unstyled","key":"djpg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":56,"style":"BOLD"},{"length":2,"offset":239,"style":"BOLD"}],"text":"На прошлых шагах, мы с вами разобрали базовые механизмы CI, которые позволили нам автоматизировать ряд рутинных операций. Самое время перейти к более сложному кейсу. Сказать откровенно – я несколько раз пытался подойти к освоению по части CD. Сложновато было найти руководство под мои нужны. А ознакомление с документацией не принесло пользы, в начале этого пути.","type":"unstyled","key":"2hgdn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому, как и в прошлые разы, давайте попробуем взглянуть на задачу максимально просто. Определить – что мы хотим получить, что нам для этого нужно, и какие инструменты потребуются. \uD83E\uDEE1","type":"unstyled","key":"eictm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Постановка задачи.","type":"unstyled","key":"5at3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":20,"offset":5,"style":"ITALIC"}],"text":"CD – Continuous delivery (непрерывная доставка). Простыми словами – деплой, публикация нашего приложения в среду эксплуатации. Если совсем просто – мы разработали приложение, и оно готово для того, чтобы отдать его на растерзание конечному пользователю. Но пока мы работаем над ним – делаем это в локальной среде, на домашнем или рабочем компьютере.","type":"unstyled","key":"vpia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":39,"style":"BOLD"},{"length":14,"offset":94,"style":"BOLD"},{"length":13,"offset":168,"style":"BOLD"}],"text":"Если брать в пример наше приложение на React – оно отлично запускается в режиме разработки на localhost:3000 (после выполнения стандартной для этого фреймворка команды npm run start). И мы видим результат в браузере. Но на этом этапе – никакой другой пользователь, не сможем открыть этот сайт.","type":"unstyled","key":"36l66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":9,"offset":106,"style":"BOLD"},{"length":11,"offset":152,"style":"BOLD"}],"text":"PS. В материале не будет рассматриваться вариант – открыть локальную машину наружу – приобретением белого IP адреса у провайдера, настройкой локального WEB сервера и т.д. Как правило, такой подход не оправдывает ожиданий, но справедливости ради – задачу может выполнить. Даже локальный домашний компьютер можно настроить так, что ваш сайт будет доступен с него в сети интернет. Но, как говорится, это тема совсем другой статьи.","type":"unstyled","key":"7a0iu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":172,"style":"BOLD"}],"text":"Таким образом, мы приходим к следующим требованиям. Наше приложение должно быть доступно в сети. Чтобы любой пользователь мог открыть браузер, набрать нужный адрес, нажать Enter и увидеть наше приложение. ✅","type":"unstyled","key":"e4243"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Что потребуется","type":"unstyled","key":"1871v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":120,"style":"BOLD"},{"length":11,"offset":180,"style":"BOLD"},{"length":10,"offset":270,"style":"BOLD"},{"length":6,"offset":302,"style":"BOLD"},{"length":13,"offset":366,"style":"BOLD"},{"length":2,"offset":400,"style":"BOLD"},{"length":3,"offset":405,"style":"BOLD"}],"text":"Здесь в игру вступает серверное железо. В конечно счете, нам нужно иметь в доступе машину, с «белым» (доступным в сети) ip адресом. Файлы нашего приложения на его жестком диске, и веб сервер – который будет прослушивать входящие запросы по сети, и отдавать в ответ нашу index.html страницу. У нас ведь React приложение – и все что будет уходить на клиент – это одна html страница. Плюс пара файлов – js и css, что является статикой.","type":"unstyled","key":"87m9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":78,"style":"BOLD"},{"length":30,"offset":281,"style":"BOLD"}],"text":"Мы пойдем одним из простых путей. Для таких объемов приложения, вполне хватит VPS/VDS сервера. Если вы не знакомы с этим – компании хостинг провайдеры, предоставляют сервера в аренду. По стоимости от нескольких рублей в день, до бесконечности. Забегая вперед – под это приложения (фронтенд, бекенд, админка + БД), отлично справляется тариф стоимость порядка 20-25 рублей в сутки. Не буду советовать конкретные компании, сам пользуюсь несколькими. В общим и целом – услуги серверов в целом похожи. Если Вас интересуют какие-то специфические составляющие, тут уже выбирайте под свои задачи.","type":"unstyled","key":"eev1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На сервере, очевидно, нам понадобится какая-то операционная система – чтобы им можно было бы пользоваться. Из хороших новостей – все серверы, в разных компаниях, с которыми мне довелось поработать, предоставляют очень удобный интерфейс базовой настройки. После регистрации и выбора тарифа – операционную систему можно установить в пару кликов. Вот пример с текущего проекта.","type":"unstyled","key":"rn9i"},{"data":{"image":{"id":"68cefc7918d5ad7517d4becb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбираем операционную систему для нашего сервера.\n","type":"atomic:image","key":"go7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":54,"style":"BOLD"}],"text":"Если нет специфических требований, я обычно использую Ubuntu последней версии. Просто больше практического опыта с ней, и подходит для большинства задач. Опять же – вариант ОС нас здесь особо не интересует. Если у Вас появляется специфические задачи – выбираем ось под них.","type":"unstyled","key":"c94id"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":78,"style":"BOLD"},{"length":60,"offset":182,"style":"BOLD"}],"text":"Также вас попросят либо установить пароль администратора сервера (как правило root), либо задать свой. И где-то в настройках, либо в письме на почту – дадут данные для подключения – ip адрес сервера, имя учетной записи администратора и пароль. Это то, с чего мы начинаем в плане железа.\uD83C\uDD97","type":"unstyled","key":"d6erq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":10,"offset":402,"style":"BOLD"}],"text":"PS. В случае с корпоративной средой – настройки, разумеется, будут отличаться. Но общая идея – что у нас должен быть в наличии боевой сервер, со всем установленным ПО, и файлами приложения – особо отличатся не будет. Да, он может запускать наш софт в рамках докер контейнера. Быть виртуальным или физическим. Но в общем и целом – это целевая машина (или кластер), до которой можно обратиться из вне по HTTP/HTTPS протоколу, и получить в ответ нужную информацию.","type":"unstyled","key":"fuu0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"},{"length":9,"offset":58,"style":"BOLD"},{"length":8,"offset":85,"style":"BOLD"},{"length":1,"offset":94,"style":"BOLD"}],"text":"Касательно средств CD – здесь мы также будем использовать GitLab CI и дописывать наш pipeline, с прошлых частей. Из новых инструментов здесь добавиться работа с переменными окружения. Но об этом мы поговорим на соответствующем шаге.","type":"unstyled","key":"9d577"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И важный момент – нужно понять, что мы подразумеваем под процессом деплоя. Опять же – здесь все очень сильно будет разниться от приложения, языка и стека, на котором вы работаете. Вам нужно понять – что является фактом запущенного приложения. Это может быть запуск исполняемого файла. Или раздача собранных файлов веб сервером – как будет в нашем случае.","type":"unstyled","key":"32pa2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":115,"style":"BOLD"},{"length":6,"offset":154,"style":"BOLD"},{"length":10,"offset":343,"style":"BOLD"},{"length":4,"offset":371,"style":"BOLD"}],"text":"Здесь давайте остановимся чуть более подробнее. Чтобы наше приложение можно было бы открыть в браузере – нам нужен веб сервер. Возьмем популярный вариант Apache. С учетом того, что приложение маленькое – дев и продуктовую версию будем держать в рамках одной машины. Договоримся, что дев – который мы рассматриваем в нашем примере – повесим на 10001 порт. Общая структура url будет следующая.","type":"unstyled","key":"e8hp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"http://:10001/admin","type":"blockquote","key":"5n8fr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":37,"style":"BOLD"},{"length":6,"offset":217,"style":"BOLD"}],"text":"Мы не будем на этом этапе подключать https и доменное имя – в нашем случае для приложения в режиме разработки этого не требуется. Для продуктовой версии это будет несложно сделать – внеся нужные правки в конфигурацию Apache. Плюс часть в адресе приложение из примера – админ панель. Она будет доступа по этому префиксу.","type":"unstyled","key":"4isui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/admin","type":"blockquote","key":"dmuhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":62,"style":"BOLD"},{"length":13,"offset":111,"style":"BOLD"},{"length":7,"offset":344,"style":"BOLD"},{"length":27,"offset":472,"style":"BOLD"},{"length":4,"offset":531,"style":"BOLD"},{"length":6,"offset":562,"style":"BOLD"}],"text":"И важный момент по самому приложению. Чего мы хотим добиться? CD – средство непрерывной доставки кода. Когда в develop ветке нашего приложения, а именно с нее мы будем собирать дев стенд – будут появляются изменения – мы хотим, чтобы на сервере они сразу были доступны. Таким образом – нам нужно, чтобы файлы с изменениями, которые хранятся на Gitlab (или в любом другом хранилище кода) – попадали на наш сервер. И приложение актуализировалось – проще говоря, происходила пересборка React приложения – и у нас появлялся актуальный билд. Который раздавался через Apache.✅","type":"unstyled","key":"26qkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"},{"length":10,"offset":400,"style":"BOLD"},{"length":5,"offset":433,"style":"BOLD"}],"text":"PS. Здесь хотелось бы отменить, реальную пользу автоматизации, которую я испытал на себе, настроив этот процесс впервые. Представьте себе ситуацию активной разработки, или исправлению багов. У себя на компьютере – открыть файл, исправить пару символов. Казалось бы – недолго. Сделать коммит и запушить. Тоже терпимо. А теперь нужно подключиться к удаленному серверу. Зайти в папку с проектом, сделать git clone. Запустить пересборку React. Кто делал – тот поймет.","type":"unstyled","key":"4anor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Промежуточные результаты.","type":"unstyled","key":"5501f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В абзаце выше, уже вполне сформировались шаги, которые мы сможем автоматизировать. Но часть настроек нужно будет сделать вручную. Давайте по пунктам","type":"unstyled","key":"5duhn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":62,"style":"BOLD"}],"text":"Заполучить себе в распоряжение боевой сервер, с установленной ОС (Ubuntu).","type":"unordered-list-item","key":"6j7uf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":19,"style":"BOLD"},{"length":3,"offset":28,"style":"BOLD"}],"text":"Установить на него NodeJS и npm.","type":"unordered-list-item","key":"19r4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":29,"style":"BOLD"}],"text":"Установить на него вебсервер Apache.","type":"unordered-list-item","key":"be6sl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":76,"style":"BOLD"}],"text":"Выбрать место хранения файлов приложения. Давайте остановимся на директории /var/www/development/admin. Это будет корневая папка нашего проекта (читай – корень репозитория)","type":"unordered-list-item","key":"8hql0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":7,"style":"BOLD"},{"length":4,"offset":38,"style":"BOLD"},{"length":13,"offset":47,"style":"BOLD"}],"text":"Собрать билд React приложения в папку dist, из develop ветки.","type":"unordered-list-item","key":"75uvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":10,"style":"BOLD"},{"length":4,"offset":55,"style":"BOLD"},{"length":6,"offset":92,"style":"BOLD"},{"length":6,"offset":147,"style":"BOLD"}],"text":"Настроить Apache на раздачу файлов приложения из папки dist, по нашему айпишнику и префиксу /admin. Плюс позаботится, чтобы он также отдавал файлы js/css.","type":"unordered-list-item","key":"fu64a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта первичная настройка нужна, во-первых, для проверки работоспособности, во-вторых – для подготовки основных инструментов.","type":"unstyled","key":"6248f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":87,"style":"BOLD"},{"length":8,"offset":165,"style":"BOLD"},{"length":7,"offset":244,"style":"BOLD"}],"text":"Так что же мы автоматизируем? Все следующие изменения – читай, коммиты и пуллревесты в develop ветку, будут приводить к следующему. На сервере будет актуализировать develop ветка – мы будем пулить свежие изменения из гита. И пересобирать билд. Apache прекрасно будет работать без перезапуска – он просто будет брать свежие файлы из папки.","type":"unstyled","key":"8mlf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом – любой новый код в деве – это запуск всех проверок (мы настроили их на предыдущем шаге) – и доставка этих изменений до дев среды. Через минуту – у вас на сервере проверенный код, приложение работает – все правки в наличии.✅","type":"unstyled","key":"ao9q1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":3,"offset":78,"style":"BOLD"},{"length":7,"offset":102,"style":"BOLD"}],"text":"PS – возможно, часть ручных действий также можно автоматизировать – установка ПО на сервер, настройка Apache и т.д. Я пока до такого не дошел. Если у вас есть практика автоматизации развертывания инфраструктуры – поделитесь в комментариях. Как это делать, и какие инструменты использовать.","type":"unstyled","key":"9i291"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Начинаем настраивать.","type":"unstyled","key":"2b5d3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":110,"style":"BOLD"}],"text":"Давайте начнем с предварительной настройки нашего удаленного сервера. Обычно для этого к нему подключаются по SSH протоколу. В варианте с моим хостинг провайдером – у них есть терминал для подключения прямо из браузера. Но мне больше нравится работать с локальной консолью.","type":"unstyled","key":"12vjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":10,"style":"BOLD"},{"length":4,"offset":38,"style":"BOLD"},{"length":7,"offset":80,"style":"BOLD"}],"text":"В версиях Unix – утилита для работы с SSH идет сразу из коробки. Тоже самое для Windows, начиная с 10-й версии.","type":"unstyled","key":"f463t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для подключения к серверу, наберите команду (подставив свои значения – логин и ip).","type":"unstyled","key":"9rrga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ssh <имя_пользователя>@","type":"blockquote","key":"an4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":13,"style":"BOLD"},{"length":16,"offset":87,"style":"BOLD"}],"text":"Если команда ssh не отзывается, проверьте и при необходимости установите на свою машину open ssh client.","type":"unstyled","key":"84gl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После попытки подключения – вас попросят ввести пароль. Сделайте это. Если все было сделано верно – мы увидим консоль удаленного сервера.","type":"unstyled","key":"at9ko"},{"data":{"image":{"id":"68cefd273f692457da08042b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Успешное подключение к консоли сервера по SSH\n","type":"atomic:image","key":"37mu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":54,"style":"BOLD"}],"text":"Отлично. Из списка требуемых инструментов, у нас была NodeJS + npm. В предыдущих статьях, мы разбирали, как установить их. Можно воспользоваться этим решением.","type":"unstyled","key":"du01p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполняем последовательно команды.","type":"unstyled","key":"5a9n5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"apt update","type":"blockquote","key":"86r1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"apt install -y curl","type":"blockquote","key":"c5356"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"curl -fsSL https://deb.nodesource.com/setup_22.x | bash","type":"blockquote","key":"429aq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"apt install nodejs -y","type":"blockquote","key":"139qp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":42,"style":"BOLD"},{"length":4,"offset":54,"style":"BOLD"}],"text":"Мы обновили данные по пакетам. Установили HTTP клиент curl, и с его помощью загрузили и установили ноду. Успешность установки можно проверить двумя командами.","type":"unstyled","key":"6v0kk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"node -v","type":"blockquote","key":"9nkrf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm -v","type":"blockquote","key":"eq2l0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы видите версии приложений, значит на этом этапе все хорошо.","type":"unstyled","key":"fcc5n"},{"data":{"image":{"id":"68cefd59e29178009053b2ff"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Успешная установка NodeJS + npm\n","type":"atomic:image","key":"81fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":21,"style":"BOLD"}],"text":"Дальше устанавливаем Git.","type":"unstyled","key":"9dsma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"apt install git","type":"blockquote","key":"a83f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверяем версию.","type":"unstyled","key":"9qtnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"git -v","type":"blockquote","key":"fbd85"},{"data":{"image":{"id":"68cefd8cc7cf380a13a12d73"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Успешная установка Git\n","type":"atomic:image","key":"b8jnn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":27,"style":"BOLD"}],"text":"Теперь установим вебсервер Apache.","type":"unstyled","key":"e6qrv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"apt install apache2","type":"blockquote","key":"1fjl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы проверить его установку, проверим – есть ли он в списке запущенных служб.","type":"unstyled","key":"e9fk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"systemctl status apache2","type":"blockquote","key":"4htqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если мы видим информацию о службе – значит установка прошла успешно.","type":"unstyled","key":"d7556"},{"data":{"image":{"id":"68cefdbafbe45e79079b05a0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вебсервер Apache успешно запущен\n","type":"atomic:image","key":"3jig5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь давайте займемся файлами проекта. Как показывал выше – я предлагаю разместить их в каталоге.","type":"unstyled","key":"2bcj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/var/www/development/admin","type":"blockquote","key":"bccgg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"},{"length":17,"offset":86,"style":"BOLD"}],"text":"/var/www – стандартный путь, который часто используют для хранения данных веб сайтов. development/admin – Это уже внутренние папки. Как говорил, на этом сервере планируется храниться продакшн версия приложения, админ панель, фронт, бекенд. Поэтому эти папки – просто для структурирования информации.","type":"unstyled","key":"a3l0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В теории, вы можете выбирать любую файловую структуру.","type":"unstyled","key":"dl0a1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":12,"style":"BOLD"}],"text":"Переходим в var/www.","type":"unstyled","key":"7se07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd var/www","type":"blockquote","key":"er7rl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":20,"style":"BOLD"}],"text":"Создаем здесь папку development.","type":"unstyled","key":"f6206"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mkdir development","type":"blockquote","key":"bi8ed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":37,"style":"BOLD"}],"text":"Заходим в нее, и в ней создаем папку admin.","type":"unstyled","key":"3g1tm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd development","type":"blockquote","key":"46kj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"mkdir admin","type":"blockquote","key":"aqp8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd admin","type":"blockquote","key":"b048a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":90,"style":"BOLD"},{"length":1,"offset":146,"style":"BOLD"}],"text":"Итак, мы в корне нашего будущего репозитория. Давайте затащим сюда файлы нашего проекта с gitlab. Не забывайте подставить адрес своего репозитория.","type":"unstyled","key":"dh691"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"git clone –branch develop ./","type":"blockquote","key":"durid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":34,"style":"BOLD"}],"text":"Здесь мы вытаскиваем сразу нужную develop ветку, и размещаем файлы в текущей папке.","type":"unstyled","key":"2angn"},{"data":{"image":{"id":"68cefe1be3a3820f0b40cdea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Клонируем приложение\n","type":"atomic:image","key":"6l2r2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Делаем установку зависимостей, и сборку приложения.","type":"unstyled","key":"7dtho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install","type":"blockquote","key":"39pb0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm run build","type":"blockquote","key":"atohd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если все было сделано верно, мы получим собранное приложение.","type":"unstyled","key":"e60sh"},{"data":{"image":{"id":"68cefe4a2a0efa402de1eb9e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Успешная сборка\n","type":"atomic:image","key":"9s696"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":28,"style":"BOLD"},{"length":20,"offset":67,"style":"BOLD"}],"text":"Теперь вернемся к настройке Apache. Для нашей задачи воспользуемся виртуальными хостами. Если в двух словах – это механизм, позволяющий на одном сервере размещать несколько сайтов (ресурсов). Для наших нужд подойдет – мы настроим виртуальный хост для дев стенда. А в последствии, когда будет готова продакшн версия – создадим ее, попутно настроив доменное имя.","type":"unstyled","key":"77tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":45,"style":"BOLD"}],"text":"Перейдем в папку с конфигурационными файлами Apache","type":"unstyled","key":"6fss0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd /etc/apache2/sites/available","type":"blockquote","key":"7mdj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь по умолчанию 2 конфигурационных файла. Удобно под каждый проект, создавать свой конфиг. Давайте сделаем это.","type":"unstyled","key":"1ifls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"touch mimoza.conf","type":"blockquote","key":"cotp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":27,"style":"BOLD"}],"text":"Название любое, расширение .conf.","type":"unstyled","key":"6fjnt"},{"data":{"image":{"id":"68cefe77613ec730f5a3089c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файл конфигурации Apache, для нашего проекта\n","type":"atomic:image","key":"2adrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открываем файл на редактирование.","type":"unstyled","key":"btrt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"nano mimoza.conf","type":"blockquote","key":"59uhd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже приведен листинг настройки.","type":"unstyled","key":"b0a07"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8vm5c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" DocumentRoot /var/www/development/admin/dist","type":"blockquote","key":"6foda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"7dorl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Options Indexes FollowSymLinks","type":"blockquote","key":"56mb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Require all granted","type":"blockquote","key":"al4i7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" RewriteEngine On","type":"blockquote","key":"65udl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" RewriteCond %{REQUEST_URI} ^/admin","type":"blockquote","key":"3eb8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" RewriteRule ^admin/.*$ /index.html [L]","type":"blockquote","key":"fr83m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"djbo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ErrorLog ${APACHE_LOG_DIR}/error.log","type":"blockquote","key":"ab6mh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" CustomLog ${APACHE_LOG_DIR}/access.log combined","type":"blockquote","key":"71k30"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"71pi5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Header set Content-Type \"application/javascript\"","type":"blockquote","key":"k0pc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"9n25d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"3f7r1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Header set Content-Type \"text/css\"","type":"blockquote","key":"2r465"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"60fqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bfpdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь 5 важных блоков настроек:","type":"unstyled","key":"1o1dh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":39,"style":"BOLD"},{"length":6,"offset":70,"style":"BOLD"},{"length":10,"offset":106,"style":"BOLD"},{"length":6,"offset":137,"style":"BOLD"},{"length":10,"offset":188,"style":"BOLD"},{"length":4,"offset":217,"style":"BOLD"}],"text":"Мы создаем виртуальный хост на текущем ip адресе, и прослушиваем порт :10001. Теперь все подключения вида :10001 будут обслуживаться Apache. И нам нужно, чтобы он в ответ отдавал нашу index.html страницу из папки dist","type":"unordered-list-item","key":"ccjdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"},{"length":6,"offset":80,"style":"BOLD"}],"text":"DocumentRoot – здесь указываем корневую папку проекта, на которую прицеливается Apache.","type":"unordered-list-item","key":"7sij7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":19,"offset":50,"style":"BOLD"},{"length":11,"offset":90,"style":"BOLD"},{"length":13,"offset":167,"style":"BOLD"},{"length":2,"offset":235,"style":"BOLD"},{"length":10,"offset":248,"style":"BOLD"},{"length":5,"offset":320,"style":"BOLD"},{"length":5,"offset":394,"style":"BOLD"}],"text":" - С учетом того, что все пути в рамках :10001/admin/* должны приводить на index.html страницу, здесь мы добавляем редиректы. Это связано с особенностью SPA на React. Любой путь на сайте – будет обслуживаться средствами JS, в рамках index.html страницы. Поэтому мы редиректим все запросы на нашу корневую html страницу. Клиент получает ее, загружает – а дальше начинает работать React.","type":"unordered-list-item","key":"5b2o6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":6,"offset":51,"style":"BOLD"}],"text":"ErrorLog – здесь стандартные настройки логирования Apache","type":"unordered-list-item","key":"3inha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":12,"style":"BOLD"},{"length":5,"offset":44,"style":"BOLD"},{"length":7,"offset":100,"style":"BOLD"},{"length":4,"offset":127,"style":"BOLD"},{"length":9,"offset":150,"style":"BOLD"}],"text":"2 директивы FilesMatch – здесь мы добавляем http заголовок с нужным типом содержимого. По умолчанию Apache отдает файлы в виде text. Указание нужного Mime type нужно для корректной работы других типов файлов.","type":"unordered-list-item","key":"3n58a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":21,"style":"BOLD"},{"length":6,"offset":69,"style":"BOLD"},{"length":12,"offset":115,"style":"BOLD"}],"text":"Теперь зайдем в файл ports.conf, и добавим правило для прослушивание 10001 порта. Он находится в директории выше - /etc/apache2.","type":"unstyled","key":"8snb7"},{"data":{"image":{"id":"68ceff0f4f779e33f528d9fe"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем прослушивание 10001 порта\n","type":"atomic:image","key":"dc4ic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":22,"style":"BOLD"},{"length":4,"offset":32,"style":"BOLD"}],"text":"Активируем 2 модуля – rewrite и mime.","type":"unstyled","key":"i3uh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"a2emod rewrite","type":"blockquote","key":"2aebt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"a2emod mime","type":"blockquote","key":"8o25b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":15,"style":"BOLD"}],"text":"И перезапустим Apache, чтобы наши изменения вступили в силу.","type":"unstyled","key":"avoac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"systemctl restart apache2","type":"blockquote","key":"7ind0"},{"data":{"image":{"id":"68ceff3512e1b53b4efab2fb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Применение изменений Apache\n","type":"atomic:image","key":"56tla"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь если попробовать сделать запрос, например на адрес :10001/admin/login","type":"blockquote","key":"39rg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":95,"style":"BOLD"}],"text":" будет отзываться наше приложение. Значит первый деплой мы сделали верно. Приложение работает, Apache отдает нашу статику.","type":"unstyled","key":"eq81r"},{"data":{"image":{"id":"68ceffa62d81755c32868b63"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приложение доступно в сети\n","type":"atomic:image","key":"5f0df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно переходить к автоматизации. \uD83E\uDEE1","type":"unstyled","key":"1tov7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Gitlab CD","type":"unstyled","key":"7aduu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":22,"style":"BOLD"},{"length":7,"offset":45,"style":"BOLD"},{"length":15,"offset":59,"style":"BOLD"},{"length":7,"offset":91,"style":"BOLD"},{"length":10,"offset":128,"style":"BOLD"}],"text":"Возвращаемся к нашему Pipeline. В интерфейсе Gitlab идем в Pipeline editor, выбираем ветку develop. Добавляем еще одну стадию – dev deploy.","type":"unstyled","key":"2d41a"},{"data":{"image":{"id":"68ceffc890b25a0ab39d14aa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начинаем дорабатывать наш Pipeline\n","type":"atomic:image","key":"37ldu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":14,"style":"BOLD"}],"text":"Добавим новую Job.","type":"unstyled","key":"ele3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"dev deploy:","type":"blockquote","key":"9nmtg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" stage: dev deploy","type":"blockquote","key":"4s59m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" image: ubuntu:22.04","type":"blockquote","key":"f9ljg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" before_script:","type":"blockquote","key":"bi8rq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" - apt update","type":"blockquote","key":"7r1gq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" - apt install openssh-client -y","type":"blockquote","key":"dm02s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7ko8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":44,"style":"BOLD"},{"length":14,"offset":71,"style":"BOLD"},{"length":6,"offset":152,"style":"BOLD"}],"text":"Указываем название и стадию. Образ выбираем Ubuntu 22. И устанавливаем openssh-client, чтобы подключаться к удаленному серверу. В моих тестах на чистой Ubuntu, клиента не было, поэтому я добавил вариант его установки.","type":"unstyled","key":"6m17d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":38,"style":"BOLD"}],"text":"Идея будет заключатся в том – что наш runner, будет подключаться к удаленному серверу. И на нем уже выполнять все требуемые команды. Матрица среди нас – сервера управляют серверами. \uD83D\uDE31","type":"unstyled","key":"81mp6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":137,"style":"BOLD"},{"length":17,"offset":191,"style":"BOLD"}],"text":"Теперь нужно понять, каким образом сервера будут общаться друг с другом. Здесь мы пойдем таким же путем, как это делали локально – через ssh подключение. Но вместо пароля, будем использовать SSH ключи доступа. Чуть более надежно, и удобно, с точки зрения настройки.","type":"unstyled","key":"d0gmc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":35,"style":"BOLD"},{"length":4,"offset":207,"style":"BOLD"}],"text":"Если Вы ранее не работали с парами ssh ключей, краткая теория. Мы генерируем пару ключей – открытый и закрытый ключ. Открытый хранится на сервере – закрытый на клиенте. При попытке подключиться к серверу по SSH – мы передаем закрытый ключ. Сервер проверяет его – сверяясь с открытым. Если пара корректная – значит авторизацию можно разрешить.","type":"unstyled","key":"2ko7k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте настроим этот процесс.","type":"unstyled","key":"8ehfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":80,"style":"BOLD"},{"length":10,"offset":118,"style":"BOLD"}],"text":"Первым делом нужно сгенерировать пару ключей. Наверняка вы локально используйте GIT. В его терминале работает команда ssh-keygen.","type":"unstyled","key":"9sq0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":10,"style":"BOLD"}],"text":"Запустите git cmd.","type":"unstyled","key":"dttsk"},{"data":{"image":{"id":"68cf003ce73c4076d4d5ca96"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"GIT CMD\n","type":"atomic:image","key":"3jehp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В появившемся терминале выполните","type":"unstyled","key":"5e0pn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ssh-keygen -t rsa","type":"blockquote","key":"9efb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":83,"style":"BOLD"}],"text":"Вас попросят указать место хранения ключей. Можно оставить по умолчанию – нажимаем Enter","type":"unstyled","key":"ae8oi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":78,"style":"BOLD"}],"text":"Парольную фразу можно добавить по желанию. Можно пропустить. Дважды прожимаем Enter. Получаем сгенерированную пару.","type":"unstyled","key":"53sk6"},{"data":{"image":{"id":"68cf0101613ec730f5a55cf9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сгенерировали новую пару SSH ключей\n","type":"atomic:image","key":"fko16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь нам нужно перенести открытый ключ на клиент. На своей локальной машине, вы найдете 2 пары ключей.","type":"unstyled","key":"6bpr8"},{"data":{"image":{"id":"68cf011efbe45e79079e4c56"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ключи на жестком диске\n","type":"atomic:image","key":"187fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":39,"style":"BOLD"}],"text":"Откройте в блокноте файл с расширением .pub. Информацию скопируйте. Теперь нам нужно перенести его на наш удаленный сервер.","type":"unstyled","key":"3np69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вернитесь в терминал, где мы подключены к нашему серверу.","type":"unstyled","key":"9elnd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":62,"style":"BOLD"},{"length":15,"offset":130,"style":"BOLD"}],"text":"Перейдите в домашнюю директорию текущего пользователя, в папку .ssh. Если вы настраиваете сервер с нуля, здесь нужно создать файл authorized_keys. Если вы уже добавляли пары ключей, то этот файл уже существует. У нас первый вариант. Давайте создадим файл, и вставим сюда скопированный ранее открытый ключ","type":"unstyled","key":"3vks6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"nano authorized_keys","type":"blockquote","key":"db142"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ctrl + C наш ключ","type":"unstyled","key":"f9j34"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраняем файл.","type":"unstyled","key":"ethe5"},{"data":{"image":{"id":"68cf01486feca60ee0a169eb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Список публичных ключей на сервере\n","type":"atomic:image","key":"b4aal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":57,"style":"BOLD"}],"text":"Теперь мы можем подключаться к серверу используя команду SSH, и указывая наш ключ.","type":"unstyled","key":"3fcab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ssh -I <путь до закрытого локального ключа> <имя_пользователя>@","type":"blockquote","key":"fitdt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Налаживаем связь между серверами","type":"unstyled","key":"b4mhg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Локально мы научились подключаться к удаленному серверу. Давайте сделаем тоже самое в нашем runner.","type":"unstyled","key":"a5v5v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":44,"style":"BOLD"},{"length":6,"offset":55,"style":"BOLD"},{"length":30,"offset":70,"style":"BOLD"},{"length":12,"offset":127,"style":"BOLD"}],"text":"Для этого нам нужно перенести наш приватный SSH ключ в Gitlab. Идем в Settings => CI/CD => Variables. Здесь нажимаем на кнопку Add Variable.","type":"unstyled","key":"bksc3"},{"data":{"image":{"id":"68cf016f57e6155d42b104a0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим к добавлению переменных окружения\n","type":"atomic:image","key":"8eklj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":43,"style":"BOLD"},{"length":17,"offset":51,"style":"BOLD"},{"length":25,"offset":105,"style":"BOLD"},{"length":7,"offset":160,"style":"BOLD"}],"text":"Заполняем появившуюся форму. Выбираем тип “File”, \"Environments\" - оставляем по умолчанию. Ставим флаг “Expand variable reference”. Даем любое имя (у меня это SSH_KEY). И в поле значение – копируем содержимое нашего приватного ключа. Сохраняем.","type":"unstyled","key":"8if8g"},{"data":{"image":{"id":"68cf019f613ec730f5a5f44f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем наш SSH ключ, как переменную окружения в Gitlab\n","type":"atomic:image","key":"5lmf0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":41,"style":"BOLD"},{"length":8,"offset":105,"style":"BOLD"}],"text":"Теперь наш файл с ключом хранится внутри CI/CD инфраструктуры. И мы можем им пользоваться в рамках наших pipeline.","type":"unstyled","key":"f83ot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы полностью готовы.","type":"unstyled","key":"277f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возвращаемся к в редактор.","type":"unstyled","key":"50soa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь добавляем строку в подготовительный скрипт","type":"unstyled","key":"7uoos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"chmod 400 $SSH_KEY","type":"blockquote","key":"fkpj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":3,"style":"BOLD"}],"text":"Где SSH_KEY это имя нашей переменной окружения с ключей. Мы задаем ему требуемый уровень разрешений, чтобы им можно было бы воспользоваться.","type":"unstyled","key":"7rl4h"},{"data":{"image":{"id":"68cf01f5a9d7265e333f92db"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Устанавливаем нужные права на файл с ключом.\n","type":"atomic:image","key":"38dpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":33,"style":"BOLD"}],"text":"С учетом того, что файл со всеми jobs, у нас будет находится в одном месте, давайте выделим текущую стадию, только для dev ветки.","type":"unstyled","key":"2co8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это можно сделать, добавив правило следующее правило","type":"unstyled","key":"8i3b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"rules:","type":"blockquote","key":"5flh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" - if: $CI_COMMIT_BRANCH == ‘develop’","type":"blockquote","key":"d6brh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":18,"style":"BOLD"},{"length":3,"offset":48,"style":"BOLD"}],"text":"Если коммит был в develop ветку, делаем текущую job.","type":"unstyled","key":"8i92s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А дальше непосредственно процесс автоматизации.","type":"unstyled","key":"5eo4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":34,"style":"BOLD"},{"length":4,"offset":298,"style":"BOLD"}],"text":"Мы подключаемся из консоли нашего runner к удаленному серверу, и выполняем все необходимые команды. Обратите внимание – в кавычках будут перечисляться команды, которые будут выполнятся уже в контексте удаленного сервера.\n\nЧтобы легче это понять – попробуйте сделать локально. Мы подключаемся через SSH в терминале, и затем в терминале передаем команды – уже удаленной машине. Здесь суть да же.","type":"unstyled","key":"3793s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы не передавать каждую команду по отдельности, и оставаться в контекcте подключения, мы группируем их через &&. Вот листинг.","type":"unstyled","key":"4qgrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"- ssh -i $SSH_KEY root@\" // подключаем, указывая наш приватный ключ","type":"blockquote","key":"a8tni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd /var/www/development/admin/ && // переходим в директорию с проектом","type":"blockquote","key":"37rf4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"rm tsconfig.tsbuildinfo -f && // убираем файл, который TS генерирует при сборке","type":"blockquote","key":"1thm4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"git checkout develop && убеждаемся, что стоим на ветве develop","type":"blockquote","key":"c3tb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"git pull --force && // забираем последние изменения с репозитория","type":"blockquote","key":"fct36"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":6,"offset":14}],"inlineStyleRanges":[],"text":"source ~/.nvm/nvm.sh && // явно активируем внутреннюю консоль","type":"blockquote","key":"5v7rm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm install && // запускаем установку зависимостей","type":"blockquote","key":"9ea9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm run build\" // запускаем сборку","type":"blockquote","key":"deite"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полная версия выглядит следующим образом.","type":"unstyled","key":"2c5j6"},{"data":{"image":{"id":"68cf0248e73c4076d4d7a601"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итоговый Pipeline\n","type":"atomic:image","key":"71q8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все команды довольно понятны, кроме двух пунктов.","type":"unstyled","key":"5fp4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"rm tsconfig.tsbuildinfo -f","type":"blockquote","key":"8vjjh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":11,"style":"BOLD"},{"length":8,"offset":150,"style":"BOLD"}],"text":"При сборке React приложения, генерируется новый файл, с мета информацией. Полезной нагрузки в нашем случае он не несет. Но его наличие ломает команду git pull – мы не сможем забрать измененения, если есть незакомиченный файл. Поэтому здесь я добавил его явное удаление.","type":"unstyled","key":"c73h5"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":6,"offset":14}],"inlineStyleRanges":[],"text":"source ~/.nvm/nvm.sh && явный запуск консоли","type":"blockquote","key":"bn3i9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":78,"style":"BOLD"}],"text":"На этапе тестов этого кода в раннере, я получал ошибки при выполнении команды npm install. Решение было найдено – посоветовали явно активировать консоль. Команда выше.","type":"unstyled","key":"6ulme"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте сохраним конфиг, и попробуем сборку в действии.","type":"unstyled","key":"cscrs"},{"data":{"image":{"id":"68cf029418d5ad7517da54a7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Успешная сборка\n","type":"atomic:image","key":"fje6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":75,"style":"BOLD"}],"text":"Все прекрасно собралось. На сервере появился билд с последними правками. И Apache начинает раздавать свежую версию приложения.","type":"unstyled","key":"7aia3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":76,"style":"BOLD"}],"text":"Теперь любые изменения в деве через пару минут будут появляться на стенде – Profit. ✅","type":"unstyled","key":"5f4n8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Итого.","type":"unstyled","key":"cfi2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":33,"style":"BOLD"}],"text":"Мы неплохо поработали. Настроили CI/CD – теперь все наши коммиты автоматически проверяются на соответствие правилам кода. Мы убеждаемся, что в приложении нет критических ошибок, препятствующих сборке. И происходит автоматический деплой – новая версия приложения доступна для работы, через пару минут после слияния нашего PR с dev веткой.","type":"unstyled","key":"80dgo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я попытался рассмотреть процесс максимально просто – так, как это помогло мне. Пробуйте сформилировать – какую цель мы преследуем?. Какие инструменты у нас должны быть для этого. Какие шаги и команды мы выполняем, для достижения результата. Что нужно настроить, какие файлы добавить и т.д. чтобы процесс заработал.","type":"unstyled","key":"6jlba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы всегда можете тестировать шаги автоматизации локально – выполняя нужные шаги, проверяя результат. А уже потом перенося рабочие примеры в код pipeline.","type":"unstyled","key":"84hms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":63,"style":"BOLD"},{"length":6,"offset":131,"style":"BOLD"},{"length":6,"offset":164,"style":"BOLD"}],"text":"Можно изменять подход и инструменты. Не получается сгенировать SSH ключ через GIT cmd - используйте другие инструменты. Не походит Ubuntu, как операционная система runner? Пробуйте альтернативы.","type":"unstyled","key":"17unc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":54,"style":"BOLD"},{"length":5,"offset":126,"style":"BOLD"}],"text":"Данное руководство будет полезно для разработчиков на React. Но общие идеи и мысли в целом, могут помочь погрузится в процесс CI/CD.","type":"unstyled","key":"8jo00"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":26,"offset":135},{"key":7,"length":24,"offset":248}],"inlineStyleRanges":[],"text":"Вам был полезен материал? Хотите что-нибудь дополнить или посоветовать? Оставляйте комментарии или присоединяйтесь ко мне в телеграм - https://t.me/mindgroup_web. А также обращайтесь по вопросам разработки веб сайтов и приложений в нашу веб студию http://mindgroup-web.ru/","type":"unstyled","key":"40r81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удачи!","type":"unstyled","key":"6t7q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"87sq4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a9h36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bic3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"55ijo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9sf62"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"11sfe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7bco8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8c9d0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4fov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"70k2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fhkpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dkr88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e7n31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9ka33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"e7lCENxUqJ7y9rOiYmEJ"}],"entityMap":{"0":{"data":{"url":"https://t.me/mindgroup_education"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"http://mindgroup-web.ru/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://dzen.ru/a/aM7zDpCR_Ci2LTIM"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://dzen.ru/a/aM74PeOjgg8LOsxm"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"http://nvm.sh/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"http://nvm.sh/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://t.me/mindgroup_web"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"url":"http://mindgroup-web.ru/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}