Transcription
В этом видеоролике мы с вами пройдёмся по всем ключевым этапам создания сайта с помощью кодекса, от референсов и ТЗ до публикации в интернет.
Если ты планируешь создавать свои проекты с помощью вайбкодинга, этот видеоролик точно будет полезен. Не будем терять время, поехали.
Первый этап создания сайта - это, разумеется, техническое задание. Техническое задание - это описание того, что мы хотим получить. Без него кодекс будет думать за тебя, какие блоки ему поставить, какой стек использовать и так далее.
Что входит в техническое задание? Перво-наперво, естественно, информация, что это за сайт. Например, в моём случае пусть это будет лендинг портфолио, цель которого рассказать обо мне, какие услуги я предоставляю, и, соответственно, собирать заявки.
Затем описываем технический стек, какие инструменты мы будем использовать, чтобы собрать наш сайт. В этом видеоролике мы с вами будем использовать NextJS. Он качественно работает, он гибкий и мне в целом он нравится.
Затем, третья вроде, да? Мы описываем структуру сайта. В нашем случае мы опишем ему список блоков сверху вниз в нужном нам порядке. Это очень важный раздел, по нему и будет понимать, соответственно, из чего собран наш сайт, из каких блоков.
Затем можно указать стилистику. Тут не обязательно расписывать ему целую дизайн-систему. Достаточно будет описать, какие акцентные цвета у вас есть, какими шрифтами вы любите пользоваться и так далее.
Также можно указать ему подробнее, куда этот сайт будет публиковаться в дальнейшем. Например, я буду его публиковать на виртуальный сервер с помощью dokploy.
Так, вроде описал всё, что надо. Давайте теперь перейдём к техническому заданию, которое я составил и по которому мы с вами будем собирать сегодняшний проект. Пу-пу-пу-пу-пу-пу-пу.
Вот такое ТЗ у меня получилось. Я ему прописал, что меня зовут Матвей, я занимаюсь вайбкодингом, создаю сайты и проекты с помощью искусственного интеллекта. И написал, что хочу сделать сайт портфолио, где я рассказываю о себе и услугах, и собираю заявки.
Прописал стек, который буду использовать. Вот, как вы видите, NextJS. Прописал, что это будет последняя версия. У нейронки бывает такая проблема, что она подгружает не самые актуальные версии. Для этого создан MCP, который называется Context7. NextJS, Typescript, Tailwind CSS. Проект создаётся с нуля в пустой папке.
Далее я ему прописал структуру блоков. Вот я написал, что у нас есть главный блок, потом блок обо мне, услуги, этап работы, форма заявки и футер. Структуру и порядок блоков менять нельзя, это основа сайта.
Далее я ему прописал, чтобы он тексты сгенерил самостоятельно, потому что мне в целом неважно, что там будут за тексты. Стилистика: сайт тёмный, глубокий тёмный фон, текст и основные элементы светлые. Здесь тоже креативить особо не стал.
Далее описал, как работает форма. Заявки приходят мне в Telegram. Опять же, в этом видеоролике я покажу, как подключить Telegram к вашему сайту, чтобы на него приходили заявки.
Далее ему прописал, что наш сайт должен быть адаптивный, чтобы он под все устройства подходил, быстро загружаемый, то есть чтобы сайт у нас не тормозил, чтобы всё было оптимизировано.
Прописал, чтобы он проработал SEO, то есть прописал метатеги, sitemap.xml, robots.txt и так далее. Об основах SEO я рассказал вот в этом видеоролике, поэтому можете перейти и ознакомиться.
И далее я написал, что сайт наш будет публиковаться на виртуальный сервер на VPS. Разворачиваться через dokploy. Опять же, об этом чуть подробнее расскажу попозже.
Также я прописал, что у меня есть свой домен, я его уже купил, также покажу, как это сделать. И написал, что Token Telegram задаётся в переменах окружения Dokploy. Опять же, об этом будет чуть позже.
После того, как мы с вами составили ТЗ, я создаю папку на рабочем столе, назвал её кодекс-кодекс, тут в целом неважно. И мы кидаем туда наше техническое задание. Техническое задание у нас находится в формате MarkDown. Почему именно в этом формате? Потому что этот формат хорошо воспринимает нейросеть. Например, с Вордом и с ПДФ ей помимо вашего текста придётся ещё прорабатывать различный мусор именно от этих форматов. Поэтому я бы рекомендовал не использовать Word и PDF для написания таких текстовых инструкций.
Итак, техническое задание у нас в папке. Давайте перейдём непосредственно в кодекс. Опять же, для тех, кто не в курсе, что такое кодекс и как с этим работать, я сделал полный гайд вот по этой ссылочке. Там вы можете ознакомиться со всеми этапами работы в кодекс от А до Я. Очень рекомендую к просмотру.
Давайте здесь побольше сделаю. Итак, в левой панели мы с вами можем заметить нашу папку кодекс-кодекс. Поэтому давайте перейдём сюда и начнём создавать наш сайт.
Чтобы отметить наше техническое задание, мы нажимаем здесь собачку. Да, ё-моё. И вот так вот пишем сюда название ТZ.md. Видите? Кликаем Tab, чтобы наше ТЗ отметилось.
Итак, я ему написал следующее: tz.md. Техническое задание на мой сайт. Создай по нему проект и сверстай весь лендинг целиком. Тут продаветь, что мы находимся с вами в нужной папке, чтобы он создал файл именно в этой папке.
Также здесь можно выбрать модель, с которой мы будем работать. Ну давайте выберем самую мощную и интеллект сделаем средний. Всё, кликаем Enter.
Он у меня по дефолту начал использовать плагин Superpowers. В целом это круто, но сейчас мне это не надо. Кстати, про этот плагин я рассказывал вот в этом видеоролике. Очень полезная штука.
Давай мы не будем использовать плагин Super Pers. Кстати, я бы мог ещё, наверное, ему дать какой-нибудь скилл, чтобы он получше дизайнил, но в целом пофиг. Мы всё равно будем с вами работать с референсами.
Что-то я тупанул. Надо было сделать не лендинг портфолио, а про фаренгейты что-нибудь. Те, кто смотрел мой прошлый видеоролик, поймут, о чём я говорю. Меня там жёстко засрали в комментариях.
Кстати, я ему не прописал, чтобы он посмотрел актуальный стек с помощью Контекст7, но вот тут вот мы видим в источниках, что здесь как раз-таки использовался Контекст7, чтобы найти актуальные версии.
Сначала кодекс не верстает наш сайт, он создаёт каркас проекта. Это называется по-умному инициализация. Дело в том, что NextJS - это целая программа. Чтобы сайт работал, весь её код должен оказаться у нас в проекте. Поэтому кодекс первым делом запускает команду, которая скачивает NextJS и создаёт все нужные файлы и папки. На этом фундаменте дальше будет строиться наш сайт.
Что-то его дёргает, видите, влево-вправо. Странная тема. Давайте, пока сайт наш создаётся, я сделаю какую-нибудь генерацию. Я думаю, что на главный блок я размещу вот с правой стороны себя, который сидит в ноутбуке и что-то печатает. Мы зациклим это видео и поставим на главный блок.
Для этого я воспользуюсь, во-первых, lmarena. Это бесплатный сервис, чтобы генерить изображение. А для генерации видео я воспользуюсь вторым сервисом, который называется Higgsfield или Higgsfiled. Короче, не знаю, как правильно, но вот в этом видеоролике я делал обзор на эту штуку. Там я создавал три прикольных визуала. Можете ознакомиться.
Я тут креативил, пытался сделать какой-то более прикольный вариант. Вот тут уже было более-менее близко к тому, что я хотел, но что это вообще за орк получился? По итогу у меня получилось вот это изображение. Опять же, кому надо, промт для генерации такой фотографии я закинул в свой Telegram-канал. Кстати, можете подписаться на него, там очень много полезных штук, которые связаны с вайп-кодингом. От создания и работы со своей админ-панелью до юридических моментов, которые важно учитывать, если не хотите заработать огромные штрафы. Всё в бесплатном доступе, поэтому буду благодарен за подписку и поддержку моего ТГ-канала.
Далее мы заходим в Higgsfield. Я уже сюда закинул свою фотографию. Вот я закинул её как начальный кадр и как конечный кадр. И написал вот такой вот промтик. Опять же, тоже его скину куда-нибудь в ТГ канал. И у меня по итогу получилось вот такое вот видео. То есть вот видите, оно такое статичное. Я типа что-то печатаю, куда-то смотрю непонятно куда. Видимо, на заголовок сайта. Далее я его скачал и закинул в папку своего проекта. Оно у меня получилось небольшое, где-то 3 Мб.
Всё, как мы видим, он закончил. Написано, что десервер запущен тут. Давайте откроем его в браузере. О боже, братан, ты что натворил вообще? Какие-то горы сам зачем-то нарисовал. Это, видимо, я с ноутбуком. Поезд какой-то. Это солнце, наверное. Да. Ну и бред. Ладно, давайте попробуем этот булщит превратить во что-то более качественное.
Если вы, как и я, постоянно пользуетесь нейронками и создаёте свои проекты с помощью вайбкодинга, то наверняка знаете, как важно, чтобы инструменты не подводили в самый неподходящий момент. Многие пользователи часто сталкиваются с проблемой, что всё начинает сбоить из-за нестабильного доступа, региональных ограничений или просто плохих IP. Для таких задач я бы порекомендовал сервис NodeMave. Это приватные прокси, которые подходят и для AI задач, и для мультиаккаунтов, и для случаев, где важна стабильность сессии. У них есть резидентские, мобильные и ASP прокси. И это удобно, когда нужно, чтобы всё работало стабильно, без лишних сбоев. Из того, что мне реально зашло - это кэшбэк до 10% используемого трафика. Плюс есть гарантия качества. Если прокси не работают, то они дают компенсацию, возвращают средства в этот же день. А если найдёте дешевле при том же качестве, то могут улучшить цену. И ещё один приятный момент. Оплатить теперь можно ещё и карты, и мир. Так что с пополнением вообще никаких проблем. Ссылку и промокод я оставлю в описании. Цена и так выгодная, а с промокодом будет ещё лучше.
Давайте двигаться дальше. Я поискал некоторые референсы. Мне понравился вот этот. Я его установил у себя локально. Вот так это выглядит. Мне нравится, как здесь выглядит видос. То есть, что тут такая рамка с закруглениями и то, как выглядят пункты меню. Соответственно, давайте заскриним это и отправим в кодекс.
Вот такой промк у меня получился. Сделай главный блок сайта по этому референсу. Скинул ему скриншот, соответственно, вот этого сайта. Далее ему сказал, что у меня есть свой видеоролик. Он находится в папке проекта. Его надо сделать зацикленным. Для этого я в Хиксфилде и ставил начальный конечный кадр одинаковый, чтобы получилось зацикленное видео.
Логика, как на скриншоте. Телефон страницы чёрный. Видео сидит в большой рамке со скруглёнными углами. Вокруг рамки видны узкие чёрные поля. Сверху по центру меню в виде свисающего ярлыка. Чёрная плашка с плоским верхом и скруглённым низом, как будто она прикреплена к верхней кромке рамки. В нижней части рамки слева большой заголовок шрифт семитt. Я подумал, что это будет достаточно неплохо. Самая база такая. Одно слово в заголовке: курсивом, засечками такого же визуального размера, как остальные. У курси меньше высота букв, ну, потому что они под наклоном. Так что увеличи его процентов на 25. Под заголовком короткое описание, серым в две строки. Рядом с описанием или под ним пилюля, кнопка с чёрным кружком справа и стрелкой внутри. Ну вот такая, соответственно. Мне нравится, как это выглядит. На моём сайте текст будет другой, и на русском. Придумай сам что-нибудь подходящее под контекст. Потом я поправлю. Сделай адаптивно. Всё, давайте ему отправим и посмотрим, что у него получится.
Итак, он наконец-таки закончил. Что-то он у меня очень долго делал эти правки. Не знаю почему, но в последнее время кодекс и клод, кстати, тоже стали медленно работать. Давайте посмотрим, что у него получилось. Вышло как-то так. Вот эта плашка повторилась как надо. Это круто. Кнопка вот эта, конечно, чуть меньше по высоте, чем вот эта, что не очень круто, но всё равно они выглядят достаточно качественно. Вот. В целом описания пофиг, какие. Видос, кстати, выглядит прикольно. То есть я реально тут что-то сижу, работаю, вроде даже не видно, что это восьмисекундное видео.
Помимо него я вот здесь вот исправил заголовки, сделал их нужного шрифта. Вот здесь вот чуть-чуть доработал блок заявки, потому что он был совсем плох, и сделал вот такой вот небольшой футер. Опять же, как мы работаем с этими блоками? Мы делаем скриншот какого-нибудь другого блока, который нам понравился. Находим его либо на Pinterest, либо на Dribble, либо на Madeon Tilda. Там, кстати, очень много классных сайтов. Реально помимо этого есть ещё футер дизайн, где можно найти прикольные футеры. Godly вебсайт. Вот у нас на экране он. Тут тоже сборка из суперкачественных сайтов. И ещё как вариант superhero. Тоже классный. Здесь у нас собрана подборка именно из главных блоков сайта. Тоже кайф. Вот этими источниками я пользуюсь чаще всего, чтобы найти классные референсы. Опять же просто делаем скриншот, скидываем кодексу и говорим: "Сделать этот блок либо один в один, либо переделать нашу структуру блока под вот этот визуал". Таким образом, мы работаем с референсами и добиваем наш стилёк до лучшего результата.
Следующее, что мы должны сделать - это привязать к форме заявки наш ТГ, чтобы заявки падали в Telegram. Чтобы это сделать, нам нужно два значения. Это ваш user ID и апи токен бота, который будет слать вам заявки.
Давайте сначала сделаем бота. Заходим в bot father. Вот так это выглядит. Ссылка на него опять же будет либо в описании, либо в моём ТГ-канале. Давайте откроем его на весь экран. Здесь нажимаем create a new bot. Здесь называем его как хотите. Тут вообще неважно. Он я его натыкал, он называется гуиху. Короче, ладно, не буду называть. Здесь надо придумать ему usеr нейм, чтобы он у нас заканчивался на бот. Давайте. Х-хх, да, ё-моё. Давай вот так. Всё, отлично. Кликаем create bot. Всё, теперь у нас вот здесь высветился его апике. Можете куда-нибудь его скопировать себе.
А чтобы найти свой user ID, мы вбиваем в TG user info bot, пишем ему любое сообщение, и он выдаёт вам ваш user ID. Всё просто. И тут важное правило. Эти ключи нельзя писать прямо в кодекс. Ну, с точки зрения безопасности это не очень правильно. Для того, чтобы добавлять в проект ключи и при этом их безопасно хранить, мы можем создать файл.env. Вот такой командой можем их создать, попросить его сделать заглушки в виде Telegram bot token и Telegram chat id и потом сюда самостоятельно вручную добавить апи токен бота и user ID. Кликаем Enter. Итак, готово. Он создал нам V файл с пустыми переменными. Теперь сюда надо вписать наши значения.
Какие тут могут быть проблемы? Проблема в том, что в интерфейсе самого десктопного приложения кодекса здесь нельзя ничего вставить в файлы, только прописав вот сюда. Но мы так делать не можем, поэтому нам нужен редактор кода. Давайте зайдём, например, в Visual Studio. Ссылка на него также будет в описании. Вот так оно выглядит. Кликаем здесь Open и выбираем нашу папку. Открываем в боковой панели file.v. Он у нас находится, если что, в папке, в котором у нас была инициализация проекта. И вот здесь вот находится Telegram Bot token и Telegram User ID. Давайте вставим сюда наше значение. Сюда апикеen бота, а сюда вставляем чат ID. Всё, можно закрывать Visual Studio код.
Всё, так как мы добавили наши ключи, мы можем задать ему промт, чтобы он привязал наш Telegram к нашей форме заявки. Кликаем Enter. Кстати, да, вот я остановил на самом деле кодекс, потому что он мне написал, что API Route сработал, но Telegram вернул отказ. С чем это связано? Я опять забыл за эту тему. То, что когда мы создаём нового бота, давайте вот мы его откроем, открываем с ним чат. Нам надо нажать кнопку начать, иначе без этого он работать не будет. Всё, давайте перезайдём. Я только сейчас нажал кнопку старт на боте, поэтому у тебя, наверное, не получалось. Попробуй ещё раз. Сейчас всё должно быть нормально.
Почему-то у меня чат кодекса невероятно долго это делал, хотя, казалось бы, задача вообще лёгкая, поэтому я открыл терминал, и он у меня это сделал минут минуты за две, наверное. Не знаю, что это за сбои такие, но что есть, то есть. Дьяволу не победить. Мы доснимем этот ролик.
Давайте попробуем. Вбиваем сюда имя. Давайте. Виталий. Всем Виталием привет. У меня, кстати, ни одного знакомого Виталия. Давайте вот такой вот номер ему введём. И коротко опишите задачу. Давайте вот так. Отправить заявку. Всё. Как мы видим, здесь написано: "Спасибо, скоро свяжусь". Хотя, странно, конечно, надо было бы всплывающую плашку какую-то сделать. И как можно заметить, у нас появилась новая заявка имя Виталий, связь и сообщение.
После того, как вы сделали визуальную составляющую, подключили все необходимые интеграции, нам надо сделать несколько тестов. Провести аудит по SEO, по безопасности и по оптимизации. То есть вначале попросить кодекс удалить излишки кода, которые, например, не нужны нам в проекте, которые мусорные, или упростить какие-то функции, короче говоря, минимизировать код. Таким образом, наш сайт будет быстрее грузиться и лучше. По SEO и по безопасности есть классные скилы, которые очень круто с этим работают. О них я рассказывал вот в этом видеоролике, поэтому перейдите туда и ознакомьтесь. Там по тайм-кодам можете найти SEO и безопасность.
Что-то в этом видеоролике я не хочу это делать, потому что кодекс реально тупит, как и Клод. Поэтому давайте не будем этим заниматься, а то я хочу ролик этот выложить, а не забить на него. Итак, представим, что мы прошли все эти тесты. Мы проверили его на SEO, на безопасность. Он у нас оптимизирован. Все изображения у нас оптимизированы, сжаты. Все кнопочки работают, все интеграции подключены. Что делаем дальше?
Далее нам надо закинуть эти файлы в репозиторий на Гитхабе. Чтобы это сделать, заходим непосредственно в GitHub, заходим на него, регистрируемся, если вы ещё не зарегистрированы, это в целом несложно. Далее у вас будет кнопочка "Создать новый репозиторий". Вот такая зелёненькая. Кликаем на неё и здесь создаём новый репозиторий. Тут в целом неважно, как он называется. Я вот так просто буквы сделаю. Здесь обязательно выбираем private, чтобы ваши данные не были в публичном доступе, и кликаем createрепозиitorй. Всё, здесь копируем ссылку на ваш репозиторий вот этой кнопкой и переходим в кодекс.
Я закидываю в терминал ссылку на репозиторий и пишу, чтобы мы запушили туда все файлы. Таким образом, наши файлы перенесутся в GitHub репозиторий. Тут, думаю, проблем быть не должно. Если возникают какие-то проблемы, пишите в комментарии. Постараемся на них ответить. Всё. Как мы видим, он запускает команды для этого всего. Надеюсь, у терминала не будет таких проблем, которые были в чате.
Кстати, ещё забыл упомянуть момент. Надо проверять сайт на юридические всякие моменты. Например, чтобы ваша база данных была на русском сервере по закону 152 ФЗ. Это очень важно, если это не соблюдать. Можно огромные штрафы залутать или, например, не оставлять чекбоксы на согласие с обработкой персональных данных или согласием с рассылкой. Это тоже карается штрафом. Короче, обо всём этом я вот в этом видеоролике рассказал. Очень полезный ролик, рекомендую ознакомиться.
Всё, он нам написал, что он запушил всё в репозитории. Давайте проверим, что это так. Перейдём на него, копируем эту ссылку, вставим. И действительно, теперь здесь находятся все файлы нашего проекта. Всё, видео здесь тоже есть. Это хорошо.
После этого нам надо зайти на сайт, который называется Beget. Ссылка на него опять же будет в описании. И купить здесь виртуальный сервер. Чтобы это сделать, кликаем здесь облако VPS. И вот здесь кликаем создать VPS. Ну давайте я при вас создам новый сервер. Кликаем создать. Здесь выбираем локацию. Тут в целом неважно, но лучше выбирать Россию. По мощности я бы рекомендовал сразу ставить 27 или 17 руб. в день, а то и 33. Сервер за 11 руб. скорее всего не потянет ваш сайт, если это не прямо какой-нибудь демосайт из двух блоков. Поэтому выбираем за 27 руб. в день, например. Если что, в дальнейшем можно мощности эти увеличить, никакой проблемы нет. Но вот уменьшить уже нельзя будет. Поэтому тут лучше сразу не борщить, не ставить за 120 руб. в день, например. Здесь ничего не меняем, оставляем Ubuntu. Здесь кликаем задать пароль. Копируем его себе обязательно. Он вам ещё понадобится. И всё. Далее кликаем создать виртуальный сервер, и ваш виртуальный сервер создастся.
Перед этим, конечно же, надо пополнить баланс вот в этой правой панели сверху. Ну там тоже ничего сложного, всё в рублях делается. Всё. После того, как вы это сделаете, у вас вот здесь вот будет отображаться айпишник вашего сервера. Если по какой-то причине вы забыли записать пароль, то вот здесь в настройках вы можете нажать сбросить пароль, и новый пароль придёт вам на почту. Здесь же, кстати, можно кнопкой изменить, увеличить мощности, если будут проблемы. И вот здесь в левой панели ещё можно приобрести домен. Тут в целом ничего сложного нет. Вот здесь нажимаем регистрация доменов и сюда вбиваем какой-нибудь домен, например, matumba.ru. Всё. И здесь у нас написана как раз-таки стоимость данного домена 199 руб. Здесь просто по шагам пройдётесь, там ничего сложного нет, придётся свои паспортные данные здесь вбить. Ну так на всех платформах для создания домена, точнее, для покупки домена.
По итогу у нас есть свой сервер и свой домен. Что мы делаем далее? После этого выбираете какой-нибудь домен, который вы купили. Здесь справа три точки, и кликаете добавить под домен. Здесь надо добавить под домен со звёздочкой. Вот так это выглядит. И всё. Нажали звёздочку и кликаете Добавить домен. Далее кликаете здесь три точки редактировать DNS. Переходим на эту страницу. И что здесь надо сделать? Здесь мы выбираем наш домен сначала. Здесь выбираем азапись и сюда вставляем IP-адрес нашего сервера. Просто кликаем на айпишник, он у нас копируется, и вставляем его вот сюда. Вот так это выглядит. Кликаем здесь добавить. У меня уже это добавлено, не буду второй раз добавлять. И вот здесь вот ещё выбираем со звёздочкой. И также его добавляем. Вот таким образом это выглядит. Кликаем добавить. Всё. После этого, если вот здесь вы их откроете, у вас будет две азаписи. Если будут какие-то лишние азаписи, можете их удалить. Тут они вам не нужны. Всё. Таким образом вы направляете домен на ваш сервер. Это может занять некоторое время, от часа до 24 часов. Иногда бывает даже больше.
Как проверить, что домен направился на ваш сервер? Для этого можете зайти в терминал. Можете зайти в терминал кодекса, кстати говоря. Давайте в него и зайдём. Вот, давайте здесь плюсик нажму. Терминал. Мы вбиваем просто команду nslookup. Вот так вот слитно. Пробел и ваш домен. Кликаете Enter. И вот здесь вот должен появиться айпишник вашего сервера. Вот он у меня здесь есть. 45 80 701. Значит, домен привязан.
Итак, давайте введём один из финальных промтов. Итак, мы всё подготовили, сделали сайт. Теперь хотим его задеплоить. На VPS. Я уже направил домен на сервер, уже купил сервер. У меня уже есть все эти данные. Теперь я хочу подготовить свой проект к публикации. Плоить это будем с помощью doc play. Если необходимо, внеси изменения в файлы и внеси потом эти изменения в GitHub репозиторий. Кликаем Enter.
Вообще, вообще вы могли дать просто ему свой айпишник, свой логин. Это, как правило, если вы через бегет делаете, выглядит как root просто. То есть свой айпишник, root и пароль от сервера, который вы копировали, который я сказал вам скопировать, то он, по идее, может сам опубликовать ваш сайт в интернет. Но я не буду показывать этот способ, потому что для некоторых это покажется не сильно безопасно. Вы, конечно, в дальнейшем можете просто поменять пароль от сервера, и по факту никакой проблемы нет, но это всё равно небезопасно, особенно если у вас на сервере до этого были какие-то файлы. Поэтому тут экономить время не будем, сделаем как надо по красоте.
Давайте, пока он вносит изменения файлы, мы установим нам dokploy. Чтобы это сделать, нам нужна специальная программа, которая называется термиус. Ну, можно просто в терминале сделать, но давайте сделаем в термиусе. Ссылка на него, кстати, будет в описании. Просто очень удобная штука, с помощью которой можно работать с сервером. Кликаем вот здесь New Host и сюда вбиваем айпишник вашего сервера. Давайте ещё раз сюда зайдём. Здесь копируем, вставляем. В credential вбиваем свой usernрнеame. Он у нас выглядит как root. И сюда вбиваем пароль, который вы скопировали от вашего сервера. После того, как вы ввели данные, кликаем connect. Так, здесь просто continue. Всё, мы находимся внутри нашего сервера.
Здесь надо вбить три команды, чтобы установить docploay. Чтобы это сделать, надо зайти в мой Telegram-канал, чтобы найти эти команды. Найти здесь гайд по деплою сайта на сервер, перейти на него. А, ну не три, четыре команды получается. Сначала обновляем систему. Давайте ещё раз нажмём Continue. Давай. Отлично. Вставляем первую команду, кликаем Enter. Ждём некоторое время. Всё, отлично. Теперь вбиваем вторую команду, загрузка докера, кликаем Enter. Если на каком-то из этапов этих четырёх команд у вас подвисание, и очень долго это всё происходит, больше 10 минут, то, скорее всего, у вас на сервере недостаточно мощности. Отлично, вторая команда у нас прошла. Проверяем версию докера, что она у нас установилась. Кликаем Enter. У нас здесь появилась версия высветилась, значит, она у нас есть. И всё хорошо. И последняя команда, установка самого Dokploy. Она может занять определённое время, 5-7 минут, скорее всего, но может и раньше. 67. Всё, наша команда завершилась. У нас здесь появилась ссылочка. Давайте на неё перейдём с зажатым Command или Ctrl. И нас перекидывает на страницу регистрации dokploy. Здесь вбиваете своё имя. Давайте, пусть будет Матумба. Сюда вбиваете фамилию. Матумба. Тумба. Здесь вбиваете почту. Тут желательно указать ту, к которой у вас есть доступ, разумеется, потому что если возникнут какие-то косяки, то вы будете это решать через почту. Создаём надёжный пароль, его тоже себе куда-нибудь скопируйте обязательно. И кликаем register. Register. Блин, случайно розетку ногой сбил.
Итак, мы находимся внутри интерфейса нашего docплоя. Что мы здесь делаем? Кликаем в левой панели projects. Здесь кликаем create project. Здесь вбиваем что угодно, а здесь просто тест. Кликаем create. Всё. Project у нас создался. Мы переходим в project, кликаем здесь create Service. Здесь выбираем Application. Опять же, если у вас отдельноя ещё база данных, то здесь, конечно же, выбираем database, но мы выбираем Application. Здесь название вашего сервиса, оно никуда не идёт, поэтому в целом можете что угодно сюда вбить. Там сервис о, сервис 2. Это нужно, если у вас несколько сервисов. Всё, кликаем create и переходим в папку.
Здесь нам надо соединиться с гитхабом, куда мы закидывали файлы нашего проекта. Чтобы это сделать, переходим в левой панели во вкладочку Git. Здесь кликаем GitHub, Create GitHub App. И если вы зарегистрировались и вошли в ваш GitHub аккаунт, то он вам, по идее, предложит сразу законнектиться с Docплоем. Ну вот видите, у меня, например, так и произошло. Кликаем вот эту кнопочку зелёненькую. На Google почте получаем ключ для связки. Верификация. Здесь можете назвать это как-нибудь. Давайте PlayY 1. А, уже так занято. Господи. Ладно, давайте вот так. И ждём некоторое время. Далее. Здесь надо нажать вот эту кнопочку. Это важно. Здесь это некоторые забывают нажать. Здесь можете выбрать либо ваш конкретный репозиторий, либо все. Ну давайте дадим доступ ко всем репозиториям. Installorizing. И только после этого у нас подсоединился GitHub.
Далее во вкладке General давайте настроим всё, что надо. Кликаем здесь единственный вариант, который он предлагает, нашу связку с Гитхабом, который мы подсоединили. Репозиторий. Выбираем тот, который мы создавали. Выбираю его. Select branch. Выбираем ветку main. Trigger Type on push даёт нам настройку, что если у нас внесутся какие-то изменения на GitHub, то они автоматически внесутся на сервер. Здесь всё настроили. Обязательно нажимаем кнопку Save, потому что без этого ничего не сохранится. Build Type. Выбираем Docker File. Кликаем save. Здесь мы всё с вами настроили.
Переходим во вкладку Environment. Здесь у нас есть три штуки. Это environment Settings, build Type Arguments и Build Time Secrets. Environment Settings - это переменные для работающего сайта. В эту вкладку мы прописываем, по сути, все наши ключи. Поэтому давайте здесь кликнем глазик, чтобы можно было сюда внести изменения. И вставляем вот эти вот три строчки. Здесь надо вбить свой домен чистоem.ru. Ну, также вставляем сюда Telegram Boten и Telegram chat ID. После этого обязательно надо нажать кнопочку save.
Далее переходим на вкладку домены. Здесь мы, соответственно, добавляем наш домен, вбиваем его название чистоem.ru. У меня здесь в целом ничего не настраиваем. Здесь оставляем 3.000. Кликаем здесь обязательно https здесь выбираем Let's encrypt. Всё, нажимаем create. Итак, мы с вами настроили домены. Давайте, кстати, как раз вот сюда нажмём. Видите, зелёненькая, значит, всё чётко. Environments настроили. И вот здесь основную информацию настроили.
Кодекс, кстати, в свою очередь, внёс изменения в файлы, как мы его и просили, чтобы у нас всё задеплоилось. Вот видите, что он добавил? Docker File Docker Ignore. Теперь мы можем просто нажать dey задеплоить наш проект. Кликаем вот эту вот кнопочку de confirm. И вот здесь вот начинается деплой нашего сайта. По кнопочке view мы можем смотреть, всё ли тут в порядке, нет ли никаких ошибок. Давайте я отключу VPN, чтобы у меня всё нормально прогружалось.
О, жесть. Из-за того, что всё очень тупило сегодня, у меня, конечно, этот ролик растянулся. В итоге, наверное, минут на 20 будет максимум. Сложно, конечно. У меня ещё сейчас несколько проектов в разработке параллельно. Там тоже жесть. Приходится много работать. А ещё проблема в том, что я не могу нормально передавать эти проекты. То есть нормальных исполнителей сейчас, ну, я не знаю, по пальцам одной руки пересчитать. Я пытался отдать обычным разрабам, но они запрашивают какой-то опрайс. Короче, исполнителей реально мало, и я думаю, что я в ближайшее время буду запускать своё наставничество на 15 человек где-нибудь. И с ними я хочу плотно позаниматься. И те, с кем мне понравится работать, и кто реально будет хорошо себя показывать, тем я планирую в дальнейшем передавать свои проекты и брать их в свою команду. Если что, я это буду анонсить в своём ТГ-канале, поэтому кому интересно, обязательно переходите, подписывайтесь и следите.
Итак, спустя определённое время у меня задеплоил самой проект. Если, кстати, у вас будут возникать какие-то проблемы, очень долго деплоятся, то, возможно, опять же проблема с тем, что у вас не хватает мощностей. Но у меня сейчас всё прошло нормально, поэтому давайте попробуем перейти по домену. Вот здесь вот можно на него нажать и посмотрим, что у нас получится. И всё, у нас получается сайт открывается по https, по домену. Всё очень быстро. Вот оно. Бам, сразу открывается без всяких тормозов. Видео работает как надо. Life is good. Фух.
Вот такой вот видеоролик. Для меня это был очень потный видеоролик. Для вас, наверное, он прошёл за минут 15. Основная его суть была показать, что сайт - это не просто один промт, и у вас уже всё готово. Тут надо тоже постараться учесть кучу аспектов, начиная от визуальной составляющей, заканчивая безопасностью, юридическими моментами, SEO, оптимизацией и так далее. Это достаточно большая работа, которую надо уметь выполнять.
Всем спасибо за просмотр. Надеюсь, этот видеоролик был для вас полезен. Всем пока.