FULL-STACK проект с НУЛЯ до ДЕПЛОЯ за 2 часа!

Ребят, всем привет. С вами Макс, канал Red Group, и мы с вами начинаем наше новое видео на YouTube канале Red Group, в котором мы с вами разработаем большой проект. Это будет онлайн-кинотеатр.

Вот отличие от предыдущего проекта в том, что на предыдущий проект мы брали полноценный стек на свою собственную разработку, если так можно выразиться. А здесь мы будем брать больше готовых решений. И я хочу показать, что вы сравнили два варианта, потому что на Западе принят именно второй вариант, который мы сейчас будем делать, где мы будем использовать типа шат различные, а готовые там штуки для плеера будут по бэкэнду. у нас будет более удобная история и и всё будет в одном монолитном приложении наксие. То есть такой более западный подход, я бы вот так назвал.

А в прошлом видео, если вам интересно знаю, какой-то вот такой полный путь фулстака, где мы там разделяли бкэнд, фронт-endндend, где мы там вообще ничего готового не брали, это вот прошлое видео можете посмотреть. Но вообще лучше посмотреть два эти видео, они оба полезные и максимально крутые.

А перед просмотром этого видео ставьте лайки, подписывайтесь на канал, пишите свои комментарии. Обязательно рады вы видеть такие проекты или нет на канале. От этого будет зависеть будущее в целом канала, да, будем мы такие делать проекты или не будем их делать.

И также, ребят, самое ключевое подписываться на Telegram-канал. В Telegram-канале мы с вами обсуждаем все темы касаемо нейросетей, касаемо новостей айтишных, всё, что с этим связано, именно не просто наши новости, а я комментирую всё записываю вам подкасты, голосовые видеосообщения и так далее. И там очень крутая атмосфера. Всем спасибо, ребят. Переходим уже к самому видео.

Ну а проект, ребят, я решил сдать вот такой вот примерно в таком стиле он будет выглядеть. А у нас как обычно одна вырезана страница, но стиль мне очень понравился. Притом это актуально, относительно актуально. Я понимаю, что тренд немножко уже прошёл. Stranger Things. Пишите в комментариях, стоит ли мне посмотреть этот сериал или нет, потому что я этот сериал не смотрел, насколько он вообще актуален. Соответственно, будем его брать, потому что тематика онлайн-контеатра. Мне он очень понравился. Вот здесь, правда, есть анимашка некоторая, но мы е не сможем сделать по той причине, что у нас нет такого футажа. Это, ну, это футаж, это не не связано как с разработкой. Вот касаемо, в принципе, вот эту штуку мы и будем реализовывать. И помимо этого я распланировал кучу всего другого, которое будет надслойка, потому что опять же повторюсь, у нас только одна картинка и мало информации. И будем ещё делать сверху какую-то надслойку определённую на нового функционала определённого. Так что давайте начинать стек проект, ребят.

Сразу вам, наверное, скажу частично, да, это NextGS, понятное дело, это будем в этот раз использовать призму. В прошлом видео было Dриel, в этом Prзма. Я вам на примере покажу, почему я Pris обожаю больше, чем чем Дри. Вы сами всё увидите. А кроме этого у нас будет Framer Motion для небольших анимаций, будет карусель, будет Nax для query string параметров, будет что ещё? Tailwind. Понятное дело. И в принципе пока что, наверное, всё. Для плеера то, что я буду использовать, пока оставлю под за под вопросом. Хочу использовать одну библиотечку относительно новенькую, свеженькую. Ну, я её ни разу не юзал, на самом деле. Вот попробуем через неё, потому что до этого мы все с вами кинотеатры, будь то на платформе, будь то на Ютубе, на стримах, мы все с вами кинотеатры делали со своим плеером. Собственным мы с вами брали, писали прямо ручками всё вот эти вот контроллеры, всё штуки для управления плеера. Это круто, наверное, да, но это сильно затратно по времени. И опять же, так, мы используем сегодня подход более западный, где мы используем готовые инструменты, то попробуем сегодня использовать готовый видеоплеер и посмотрим, насколько всё-таки это рабочая идеи, насколько он адекватный. Вот. Но вообще, наверное, в проектах, если вы там уже свой какой-то продакшн проект, там обычно используются плееры, которые предоставляют сами сервисы, которые у себя хранят все эти видеофайлы. То есть ты публикуешь какое-то видео, как у нас на платформе, да, к примеру, и они тебе уже дают плеер готовые, потому что, ну, знаешь, собирать сво велосипед заново- это странно, потому что плеер в себе имеет огромное количество не просто вот визуальный функционала, он ещё и под капотом очень много всего обрабатывает, и с каждый раз писать новый плеер - это такая систория не очень корректная, на самом деле, для продакшена.

И также, ребят, мы начнём с того, что будем писать в Zдиitре для разнообразия. Прошлое видео было на вискоде в этот раз Zitor, но не удивляйтесь, возможно в какой-то период этого видео, оно будет длинное, большое, я поменяю на весь код, потому что у меня, возможно, опять подгорит от Zдитора, потому что там есть нюансы со снипетами. Они в снипетах ещё не научились подставлять название файла в в сам компонент, ты не можешь переменно знать, что тебя не подставляется. Это очень удобно. И большая проблема с автокомплитим. Здесь githubile тоже работает, я его поставил, но проблема в том, что он слишком часто подсказывает и очень, очень, как сказать, это неправильно смотрится, это неудобно. То есть тебе каждый раз приходится нажимать Escape, потому что он слишком часто подска, вот я забыл сказать, слишком часто подсказывает. Это минус большой. Да, можно поставить режим второй сапt, но там Alt по дефолту, а Alt по дефолту я не хочу нажимать. У меня эта кнопка чем-то была занята. Это большая проблема. И в целом ты когда пишешь с копай, там, ты не хочешь нажимать Alt. Это некомфортно. Ну, типа, это большой дискомфорт.

Заходим в проекты. Приложение наше будет называться Red Series. Значит, оно будет писаться Ban X create next Tab и Red Series. Я пишу B X, потому что я B использую. Вы можете использовать просто обычный NPX. Нажимаем. Подожди-ка. Вот, вот, вот. Всё, всё правильно. Значит, customiz settings. Я буду каждый раз customiz, потому что они поменяли теперь возможность установки и в customй, потому что мы много чего будем. Короче, на каждое видео мне нужно для вас показывать для нового зрителя. Постоянный ники знают, что я использую, но тем не менее. Typeриpt, да, будем. Если Lint, давай. О'кей. Compiler, да, о'кей. Tailwind, окей. Source directory, о'кей. Тоже о'кей. Тоже о'кей. По умолчанию. Всё. Тут тут везде просто о'кей протыкиваете и всё. Но именно по дефолту, который они советуют, я не ставлю, потому что по дефолту а оно, короче, что-то там что-то не то выбирает. Вот я помню по своему опыту. Давайте сразу перейдём в проект. У нас получится Red Series. Залетели. Я сразу далю папочку Git, чтобы она нас не напрягала. Ну, по своими подсветками. Нам он не нужен. Вот. И открываем Z точка. Так, вот открыли. Хорошо это закрываем. И мы находимся в редакторе кода Z. Так, сразу же с ходу дела посмотрим, что у нас здесь происходит. Касаемо темы, давайте поностальгируем. Я поставлю New Draкуula Darker. Вот эту ямку поставлю и иконки сразу говорю, чтобы потом меня не спрашивали. Icon. Вот получаетсяпуin fr. Вот такие иконки стоят. О'кей. Давайте начинать. Давайте начинать. Так, ставим-то зависимость. Откроем терминал. А по uю ставим обязательно tailwin CSS. Мм, вопрос только в том, ну да, нормально. Tailwin CSS по изв prefixer. Погнали. И также ставим npxilwin, CSS и так не запустилось почему-то. Давайте перейдём лучше в документацию. Более свежая информация. Бан. Дд. Погнали. Дальше это мы получается confнig. Его здесь нету, да? А есть. Хорошо. А уже добавился. Отлично. И всё. Да. И мы импортим в глобал. Импорт готов. Так что ещё? Всё остальное готово. Лвин готов. Дальше нам потребуется шасен поставить. А я могу тоже банк использовать. Блин, просто конфликты могут быть. Могут быть конфликты. Я помню, чтобы есть там нюансы свои. Да, лучше пока что вот так оставим. SHCN lattest и ставим непосредственно inт нужно, которая библиотека, которая нам даёт готовыю готовую базу UI компонентов, именно тех, которые мы сами будем доставлять. То есть нас никто не заставляет использовать готовые. Мы сами выбираем, допустим, хочу поставить эту штуку, он ставит нам эту штуку, конкретную кнопку, к примеру. И более того, мы их можем редактировать. Это обычные компоненты, поэтому это очень и очень удобно. Так, здесь, слушай, я каждый раз забываю, какое нужно ставить под наш проект. Давай сейчас посмотрим. Я пойду просто сделаю скрин из моего дизайна. А что из Shad Cn и needнит выбрать? Ну, я специально так написал. Всегда так делаю. Это официальная утилита для Мака. Открывается поtionсйсу. Так, по скриншоту доминирует, значит, туда-сюда. Это понятно. Цинк. Вот он говорит цинк. Погнали. Цинк. Не то, чтобы он, знаешь, как-то вот часто он на самом деле некорректный. Это, ну, лучше, чем чем я бы определил, вот так скажем, но тоже не суперкорректно. Вот, конечно, мне безусловно не нравится вот то, что мы сейчас видим. Шатстин мне вообще жёстко не нравится тем, что вот это миллиарды просто переменных беспонтовых абсолютно. Меня этот вопрос подташнёт немного. Но что имеем, то имеем, скажем так, да. Вот ещё по по умолчанию, короче, у нас такая петрушка, да, выходит то, что Ну давайте вот так сделаем. Вот так. У нас сайт изначально будет тёмный, поэтому я вот так себе позволю сделать. Вот так. Короче, вот это дублирование меня напрягает сильно, но выбора особо нету. Это классика, в принципе, если вы шотсен используете.

Так, короче, ребят, да, Zitter он быстрый, он быстрый, он круто работает, но нюанс в том, что это не весь код, вот и всё. А так у нас монолит, это вроде так называется, да? Мы с вами будем в этот же проект ставить эээнд непосредственно банд. Напоминаю, я использую бан, как ас видишь у меня б обычно вы пишите именно бан полностью. Значит, призму ставим и ставим Prзма Client. Это тоже классика. Блин, как же я люблю свою призму. Вернуться к призме после мерзотного дризла просто просто конфетка. Просто космос. Так, и NPX сразу же. Prзма, а я могу через бан. Бан, Prзма инит. Погнали. Так, you already. О. Don't forget private information. Да, в принципе, там вроде бы и так нормально всё. Дальше нужно будет прописать configги. Config database URL run db pool. Это а это existing. Кстати, раньше не было такого. Видишь, они разграничили теперь вот это правильно сделали. Local def run terminal. Кстати, такого раньше не было. В смысле? Мы теперь можем запустить, короче, в этой версии. Это, по-моему, в семёрке пришло, да? Седьмая версия. В седьмой версии, да, пришло. Они, видишь, как сделали? Очень умно. То есть раньше, я вам объясню, как было. Раньше всё в одном в одном месте было, и у тебя была путаница, постоянно не понимал, что делать. А, а теперь они разъединили. Это отдельно для тех, если у тебя уже есть база данных, какая-то готова. И если у тебя её нету, допустим, у нас её нету. Попробуем сейчас. Раньше я создавал всё через table +, а, ну, через gu инструмент, а теперь попробуем создать через терминал. Интересно, приконнектится ли оно к моему постгресу, который у меня поставлен на компьютере через брюшку. Через брюшку. Вот это будет интересно. NPX Prма. Мм, def. То есть мы запускаем так. Set default is ready. Listening. Ага. Ну, видишь, он на своём порту создаёт. Ну, давайте попробуем в целом, но я не знаю просто, это он где-то у себя там создаёт и как бы это бесконтрольно, что ли, будет. Ну, короче, вот, ребят, поэтому я не знаю, ой, я не знаю, что нам делать. Давай попробуем вот так нажать. Ну, это как разки вот весь адрес, да, который использует. Ну, слушай, давай так. Смотри, для новичка, для новичка это круто, я так скажу. Короче, объясняю. Для новичка это топ. Вот вы сейчас как новичок, если вы вдруг новичок, да, в этом стеке, просто запускаете команду, и он за вас уже развернул вам сервак, и вы вообще не паритесь. И дальше я могу вот это отдельно нужно запустить, наверное, да? Мне кажется, отдельно нужно запустить. А ну-ка. А как это будет работать в целом? Или это вообще не связанные команды? Походу это вообще могут быть не связанные команды. А это где ты её создал? Это смотри, это это вообще он её создал походу внешнюю, да? Это внешнюю он создал, да? If not claimed. То есть он меня перебрасывает на сайт, где короче Да, они это всё сделают для того Я понял, ребят, я понял. Короче, они, смотрите, объясняю. Они это сделают для того, чтобы ты максимально регался на их сайте в любом случае. Давайте это сделаем тогда всё вместе с вами. Мне кажется, важный этап на видео, потому что опять же многие смотрят новички, кто первый раз с призмой работает. Давайте попробуем вместе сделать. Просит войти. У меня как раз Gthub здесь есть на этом браузере. Угу. Так. Select workpace personal. Погнали. Project not found. The project to claim doesn't exist. Так. Please check field response cod token. Понятно. Какую-то чушь сморозит. Так, давайте пойдём сами попробуем войти в аккаунт. А может мы не зарегались? Я не знаю, надо ли регаться отдельно. Давайте создадим проект. Короче, да, чуть муторно регистрацию будут требовать, но типа это удобно. И мы, наверное, на этом варианте остановимся, потому что мы будем сейчас деплойтить проект ещё в конце ролика. И очевидно, что, ну, нам нужно будет базу данных. Я не хочу её создавать на серваке, а так у нас она уже будет готова, получается. О'кей. Red series. Так, Project Region. Смотри, я в Азие сейчас пока что нахожусь, да, поэтому Токио роль фаoer соло. Ну вот так, допустим, ну можно скипнуть вопрос, на самом деле. Не обязательно отвечать на них. Всё, мы зарегались, да? Red Series. Слушай, ну неплохо. Ну я просто пока не понимаю, значит, в чём прикол. Вот я пока не понек database. Setup your database. Это что? Ага. А как это? Подожди. Ну вот мы сейчас всё сделали, допустим, да. Wting query. Подожди, а как я могу это сделать ещё раз? Если я создам новую базу, я не понимаю просто пока это пока как оно связано. Понимаешь, в чём нюанс? Копия. Ещё раз. Клейм. Ну он да, not fund. Я не знаю, как преконнектить правильно, ребят. И каждый раз летает авторизация. Причём ещё раз. А вот так. Да. Всё, мы её можем взять. Ну короче просто не короче я не понял просто смысл. То есть я не понимаю смысл это всего, что мы сейчас делали. То есть я понимаю, что ты зашёл на сайт Prizma, она тебе всё вот гото готовый скинула код. Но зачем ты вот это всё делать, я не понимаю, честно. Вот. Ну для чего это всё? То есть я могу просто это отменить, пойти в условную призму. Вот онавишка, да, моя. этот хлам убрать и вот заменить на свою просто. Вот. То есть в чём прикол? Это же оно всё здесь нормально по адресу. Постгрес, да? Вроде норм. Да, вроде оно. То есть вот так я могу сделать. Можно ещё поставить пулинг. Можно призма Accelerate, допустим. Ну, но это не надо, это лишнее. Так, он ждёт ждёт подключение. Давай подключимся. Ну, подожди, бандеф. Как я могу её подключить? Ну, на этом этапе, ребят, пока что стопнем историю, потому что, ну, нам нужно дальше продолжать всё ставить зависимости. Когда мы к призме вернёмся дальше уже создадим конкретную вот в ней схему. Тут же пока нет схемы. Или есть какая-то схема? Ну, что-то есть, но тут, ну, мы не можем, да, сейчас ничего запустить. Подожди. Бан, призма, DB, пуш. Могу вот так сделать прямо. Детям не повторять ни в коем случае. О'кей, то есть я смог подключиться к ней. Подожди. Witing for query. Это о'кей. Слушай, ну давай, давай. О'кей, давай возьмём. Хорошо. Ладно, давай закончим эту историю с призмой. Давай сделаем просто подоки. Так, раз скопировали, два вставили. Это понятно. Раз скопировали, это в схему вставили. Тоже у нас сразу будет готовый юзер. Хотя нам нафиг не нужен этот юзер, но может потом вернуться всё-таки. Блин, сейчас мы понаделаем лишне. Давай. Ладно, юзера сделаю, пусть он повисит, ничего страшного. Пусть юзер повисит. Prisma client Client. А, ну он прямо ждёт. А, ну всё, видишь, всё, всёвс. База данных работает. Всё, я понял. Всё, ну, бдшку мы завели, получается, и мы теперь в студии можем наблюдать её, да? Пока что он таблиц не будет никаких, очевидно. Но мы её завезли, получается. О'кей. Всё, ребят, всё, она она заработала, это главное. Всё, всё, это для нас таваж. Дальше мы разберёмся уже постепенно с этим всем делом. Значит, смотрите, мм, ещё раз подрезюмируем касаемо призмы, чтобы не лить воду здесь. А ситуация получается следующая, что мы с вами тем самым очень легко получается, короче, для обучающих целей это кайф. Потому что мы не тратим время на то, чтобы создать постгрес на компе у себя, подключить туда эту историю. У многих проблем с ним возникает, постоянные конфликты и так далее. А тут одной команды бац всё запустил на удалённом сервере и на облачном и не и неважно вообще. Удобно, удобно. И в частности для меня удобно, как для опять же проекта для обучения. Ты сделал быстренько и всё. Не нужно ничего потом, потому что при деплой потом ещё будет много моментов, если у тебя отдельно базы идут. Для обучения кайф. Вот для продакшена, ну, как обычно, сомнительная история. чтобы сами понимаете, почему. Так что вот такая история. Ну а их цель тоже понятно, чтобы больше людей привлечь в их кабинет непосредственно.

Вот Z мне что нравится, да, редактор кода. Хоть есть сво нюанс, но он очень быстрый. Он просто по сра по сравнению с физкодом, он просто летает в космос. Я уже молчу про вебшторм там вообще. До свидания. Теперь, ребят, ставим дальше. Получается бан, банд и получается нак это для того, чтобы работать с qu параметрами. Ну они, чтобы типизированы, это очень удобно. Дальше банD framer motion frameer motion. И в этом видео мы попробуем карусель React. Надеюсь, что она нам понравится. Она вроде подержит то, что нам нужно, и будет шикарно. Прямо хорошо. [фыркает] И получается ban eddvideo. Библиотечка и сразу же для неё тайсы. Это для нашего плеера. Надеюсь, тоже понравится. Будем первый раз пробовать. types.vo.js. Вот так. Всё, с этим закончили. Теперь taвин. Так, ну, подожди, taвин мы настроили. Что нам ещё нужно? Добавить кнопки, получается, да, для нашего проекта npx. Тут только через npxряд, потому что опять же конфликты. Я через b x много раз пробовал, не работает. Нам сразу нужно добавить кнопки. На этом же этапе можем это сделать. Вопрос. Смотрите, component j. Куда оно будет всё добавлять? Оно будет добавлять в компоненсы. А давай подумаем. Хуги меня устраивает либо меня устраивает компоненты, я думаю. Да, меня всё устраивает. Это то те директории, которые он будет использовать. Или давай мы напишем UI shn. Вот так, наверное, напишу, чтобы были было разграничение какое-то. Дай вот так я даже сделаю, да? Вот так, наверное. Так, банд. Сразу добавляем button потребуется дальше далок для модалки и бейж для бейджика. Собственно, это первое. Возможно, что-то ещё доставим. Это первое, чтобы было заметно. Так, смотрим компоненсы. Usen, да, всё отлично. Либо вот утилсы. Утилсы классика - это объединение T merger с SLSксом. Вот так работает классика. Всё, можно идти в призму. Да, в принципе. Всё, значит, базовая инициализация проекта готова. Теперь идём в призму и пишем здесь наши стили. Ну, смотрите, проект небольшой, поэтому я буду всё в одном файле писать. Вот вы можете разбить на много, на большое количество файлов. Это опять же призм позволяет делать. А я вот недавно буквально вот наш марафон зимний идёт там это рассказывал как раз-таки. Вот сейчас просто не вижу смысла это делать. У нас очень маленько или сделать всё равно, ну, типа показать он, как это делается, да, наверное. Давайте сделаем. Ладно, фиг с ним. New file. Первый жанр сделаем. Жанр точка. Какой же приятный Z-эдиitor по скорости. Я просто офигеваю. Так, модель. Модель - это по фак таблица model Gener. Что-то как-то он странно работает. Пока что не вижу автокомплита. Подожди, кофайл ты у меня в порядке? ID default quit. Так, ну видишь, копа вообще не работает. Слушайте, ребят, я что-то настроил. Давайте попробуем поработать ZI. А вы ничего не видите, да? Какой-то присутствует. Я выключил, оставил ZI непосредственно. Вот. И попробуем через него, как будто он лучше работает. Возможно. Давайте попробуем, как он будет работать. Так, дальше идём. Получается слаг. Да, не крупновато вам может вот так сделать. Ну давай оставим вот так. Дальше слаг - это получается стринга unник. Видишь? Покажет он лучше, кстати, работает. Сейчас, может быть, нужно, может быть, нужно здесь использовать именно эту штуку. Так, series, мы сейчас их сделаем. Это получи сериiesс, это сериалы Series. О'кей. Так, а series нам нужно сделать их сохраним пока. New file. Series тоm. И пишите в комментах, ребят, ставьте лайки, если уже коммент такой есть, чтобы коммент поднимался выше. Нужна ли вам всё-таки настройка Zitter или нет? Как видите, я его под себя настроил. И у меня даже работат здесь вот эти ашки. Видишь, ашка работает. Shift A именно с контекстом правильно работает, не как раньше это было. Так, Model Series. Так, ну слушай, ну пока мне нравится. Ага, ну он, видишь, он забывает кое-что. Мы же даже не забывает, ребят. Подождите, он он меня чуть подскамливает. В конце мы дату создания и дату обновления, это важно. И ещё кое-что он меня подскамил. Секундочку, не спешим. Так, это всё правильно. А в конце мы делаем Ты меня понимаешь? Нет. Не, он меня не понимает. Издевательство какой-то мап. Вот так работаешь, работаешь. [фыркает] И ты меня не понимаешь, да? Я хочу Geners. То есть в вот так будет называться именно в базе данных. И то же самое здесь Map. Ты, ну вот он не понимает, да, что я хочу. То есть я хочу Map. Видишь, он он не понимает. Он не понимает. Викод бы мне уже подсказал здесь. А вот это он уже понял. Ну, короче, м надо посмотреть. Надо посмотреть. Так, здесь ты поймёшь, что мне теперь хочется нет. От тебя получить. Ты понимаешь, да? Он понимает. Молодец. Всё, здесь понимает. Здесь конnкт произошёл. Всё, жанр может иметь много серий. Серия может иметь много жанров. В принципе, меня вот устраивает. Newфай гораздо удобнее связи, чем в каком-то там дризле, ребят. Я не знаю. Так, а куда я спешу? Подожди, мы же не всё сделали. Стой, стой, стой. Ай, слаг, это понятно. Дальше нам потребуется, давай даже не name, а tйтle напишем. Title. Вот так вот. И нам потребуется ещё desрипtion. И и давайте слаг. Ага, всё нормально. Description. Вот почему он так как-то криво? То есть смотри, нажимая как-то вот он не так идеально, как должно работать. Потом год выхода, рейтинг. Вот так рейтинг. А потом получается основная image URL. Это это основная, как это сказать, main image или как это назвать-то? Ну, вы поняли. Давайте просто image URL, которая большая именно картинка будет здесь. Ну, короче, как-то вот копа лучше работать. Я не знаю, как вам объяснить. Вот оно как-то не не на интуитивно, что ли. Тут постер Л. Постер, вы сами понимаете, тоже на карточке. Угу. Что мне ещё потребуется? Жанр я связал уже. Так, ну и эпизоды надо, получается. Так, а получается, что ещё? Жанры я прописал, да? Эпизоды, эпизоды, эпизоды. А, слушай, эпизоды как будто прямо здесь хочется их тоже сделать. Я не знаю. Хотя, ну давай, раз у нас проект такой небольшой, сделаем отдельно эпизоды. Вообще вам для практики, я как и в прошлом видео буду давать задачи для практики. Вы себе записываете, да, когда будете изучать это видео и потом за кадром делайте. Так у вас будет прокачиваться ваш навык написания кода. [фыркает] Здесь ключевой, ребят, попробуйте сделать ещё отдельную таблицу, чуть усложнить и сделайте прослойку в виде сезонов. То есть не просто эпизоды в сериале, а сделайте сезоны и в каждом сезоне эпизоды. Это будет для вас шикарной практикой, как и на бэкэнде, так и на фронтде. Так, ты меня понимаешь прекрасно. Значит, по эпизодам что мне нужно? Связь с сериалом. Это сейчас нормально. Оно сейчас свяжется само. М, тут ключевое. Здесь нужно указать, что у нас множе много эпизодов. Эпизоды. Вот так вот. Ага. Дальше у эпизодов, подожди, у эпизод там будет только, ну, видео URL точно будет, да? То есть это будет он, короче, по-другому работает здесь, ребят. Он как будто, знаешь, в более экономном режиме. Вот этот вот их AI, Z AI. Может быть, в платной версии не так, я не знаю.

просто. Но как будто экономная версия немножко. Потом мне нужно ещё обязательно. Так, это я пока уберу duration в секундах. Ага. [фыркает] Мм, заголовок уже есть. Слаг. Ну, а что со слагом будем делать? А мы можем, знаешь, не слаг, можем numberр, да? Это номер номер номер эпизода. Вот так. Сохраняем. Вот он Сири сам привязал. Вот видишь, как удобно работает, в отличие от того же самого этого мм вы поняли чего, да? дризлы из прошлого ролика. Ну вот ты сохраняешь, у тебя всё по-человечески сделалось.

Так, смотрите, только есть ключевое. Это сюда, это сразу же нет, это не уникальная. Вот, видишь, он даже тут не подсказывает элементарно. То есть вот здесь, ну, это же база, он не понимает смысл, что я переписываю формат Snake CAS для базы данных. Смотри, включаем, переключаем на Copilot, допустим. Где наш Copilot? Copilot. Ну-ка. Ну, вот это ряд, да, нюанс, почему я перешёл. Сейчас, может, мы на вис код вернёмся. Ну, грустно, грустно. Вот такой, знаешь, нюанс. Именно этот этой же причиной. И почему вебшторм мне не подходит. Хотя вебштор он просто медленный, как кусок, не понятно чего. [фыркает] Так он ещё тоже у него плохо это работает. Ну то есть видишь, да? То есть у нас вроде бы есть нейросеть, можем её использовать, но вот такая шляпа происходит.

Вот почему ты не советуешь? Для примера, давайте покажу в вискоде. Ну, во-первых, там нет экстеншна, который проявит ошибки. Видишь, я там, допустил опечатку, а он мне не сказал про это. И во-вторых, смотрите, мм какой пример. Во-первых, я сохраню. Ага. И вот здесь, смотри, видишь, сразу сразу пишется. Я, допустим, удалю. Смотрите, проверим здесь. Смотри, видишь, он не понимает, что от него хочу. Мм, да, ребят, это, конечно, не так удобно, признаюсь вам честно. Хотелось бы, чтобы было бы всё в шоколаде, но компромиссы, постоянные компромиссы.

Так, женр, готово. Тут нормально всё. Тут нормально всё. Тут вот тут, подожди, забыли. Вот видишь, он я просто ставлю пробел. Он сам мне уже подсказывает. Ну это вообще имба. Почему этим не пользуются, не понимаю. А в зайдиде такого нету. Ну короче, придётся попрощаться пока с этим, как бы грустно не было. Ой, хотя не знаю. Давай, ладно, чуть-чуть посижу ещё. Ну вот он просто у меня стоит крестик почему-то. Он А, ну потому что файлы не открыты. Дака откроем файл, типа он работает, якобы. Ну это, короче, какая-то шляпа, да. А если я верну сюда, потом обратно, ты мне не поможешь вообще никак. Да он вообще ноль просто. Он вообще тупой. Да уж. Ну, а без копай это в наши времена писать, ребят. Ну, без автокомплита и через AI, ну, нет смысла. Типа мы с ним самым вообще не ускоряемся рабо разработку никак. Поэтому, ребят, такая история, честно вам признаюсь. Вот вот на этом история сдом закончилась, да? Пойдёмте обратно весь ход, как бы я, да, хотелось, конечно, но что делать.

Так, теперь настроено, чтобы работали эти все вещи. Тут получается нужна схема. Ага, подожди, призма. Нужно папочку создать схемы. Вот туда всё поместить, получается. Вот так в самой схеме получится юзера убрать, тут всё оставить. Ага, да, здесь всё оставить. И дальше нам, получается, нужно в конфигемы. Prзма config. Вот здесь вот у нас виш адрес идёт. И тут нулька на папку именно нужно, то есть не именно на папку и всё. Ну всё, пробуем тогда так. Бан банзма def. Так имя. Ну, имя - это просто иниit, это база. Прокидываем миграцию и сразу Gреate делаем. Кстати, раньше Gреate сам выполнялся. Теперь Gреate нужно отдельно команды выполнять. Дольше, да, будет выполниться, потому что удалённая база, но зато нам удобнее при деплой будет. Давайте её проверим сразу же. Теперь мы имеем вот такую штуку. Обновляем. Да, всё прокинулось идеально. То есть видишь в чём прикол призма, ребят? Она за вас сама создаёт вот эту таблицу, да, между а в дризле мы её сами описываем, понимаешь, насколько это геморно. Вот миграция одна присутствует. Вот они эпизоды наши. Вот видишь, все правильные поля, они жанры и так далее. Всё очень красиво и правильно. С этим мы закончили. А я кое-что забыл. Походу я забыл уникализировать. Секундочку, ребят. Получается, вот в эпизоде мы должны уникализировать, смотрите, связку. Есть unник. Мы можем unк на поле писать. Также unник писать здесь. И у нас уникальная связка именно сериies ID. Вот он. Да, это получается конкретный сериал. И номер вот это уникальная связка. Так, AD эпиisд unique. Ну, видишь, долго бы подключаться, но но зато, ребята, это опять же внешка. То есть давайте для этого ролика мы с вами решили использовать всё готовое. Ага. Ага. О'кей. О'кей. О'кей. Давай при применяй, ничего страшного. Ага. [фыркает] Так, смотрим. Ну, тут смотреть особо нечего. Тут смотреть всё так же будет. Хорошо.

Теперь мы должны сделать нашу призмочку, да, непосредственно, которую мы будем брать с вами и использовать для нашего NextJS приложения. Так, ребят, давайте кое-кой момент. Нам, во-первых, нужно сидер сделать, чтобы базу данных наполнить сразу же. И знаешь, что я поменяю, наверное, вот этот рейтинг. Я давайте заменим его. Я напишу рейтингтекст. Я хочу здесь указывать именно о rating agтекст. Rating ag. Вот так, наверное, да? То есть возрастное ограничение. Вот так вот. Вот так. И заново делаем миграцию. Rating ag. Вот так правильно будет. Угу. Series. Так, погнали. Всё, так будет лучше. Так, значит, сидр давайте сделаем. Сидр будет нам нужен для наполнений посредственно, чтобы мы наполнили сейчас с вами куча всего. Куча всего. Так, давайте это сделаем. Значит, сидер будет располагаться. Получается, призма сит. Др - это штука, функция, которая будет авто за одну команду делать наполнение. Мы такие функции постоянно делаем на продакшене, на этом [фыркает] в наших обучающих материалах, будь то вот интенсивы на платформы там и так далее. Там вы это могли уже просто видеть. Так, значит, сразу же делаем видео URL. Я специально вынесу в константу, потому что у нас будет одно видео для всех роликов, чтобы мы не долго не парились. Оно будет располагаться типа videos demo то mp4. Вот я потом его закачаю какой-нибудь видос, чтобы опять же мы не парились по этому поводу. Так, а function делаем, потому что мы потом будем его запускать через команду. И вот этот main будет выполнять сразу catch. Вот так. И, по-моему, там ещё файнали нужно указать. Finally. Ага. Вот так. Всё. Prisма discnect.

Так, сама призма. Мы её ещё не сделали с вами, да? Призму. Давайте призму сделаем. Получается, у нас будет source. Давай вот тут создадим призму. Шарт. И это будет лип. Блин, шаретлип. [фыркает] Давай всё-таки я вот тут сделаю. Давай тут я всё-таки сделаю призма. Вот так. Pr.ts. Давайте, ребят, забежим в этот в TS config. Кое-что пофикшу здесь. Смотрите, аа мне нужно сделать призму. Призма. Вот так. Призма. Это получается мы выходим назад. Подожди, если сорс А, ну всё, у нас призм прямо здесь напрямую. Вот так, да, и забираем, да? Вот видишь, теперь у нас красивый путь будет. Давайте пойдём в GitHub с вами покажу. Не буду за кадром, покажу здесь вот GHub призма погдемо. Так, сит у нас что? Ну вот такой сит мы будем с вами делать. Кстати, смотри, они просто выполняют на самом деле. Видимо, по school, как я делал, не надо, не обязательно делать. Окей. Значит, я хочу поть. Мне нужно посмотреть, как он делает призму. Откуда он её получает? Вот она призма в Либе. А, ну вот готово, в принципе, решение. Вот просто моё решение работает. Оно, видимо, тоже уже устарело. А ты хочешь accelerate? А что это такое? Это прямо отдельно либо походу. Да, да, реально это отдельное. Прикинь, я же просто, видите, а там прямо авторизация есть отдельная. Ни фига себе призма адаптер. А, ну потому что next используется, но у нас не будет авторизации. Нормально. Короче, в чём прикол? Почему я это открыл? Потому что я в нексте призму никогда не делаю. Вы меня знаете прекрасно. Я всегда дела продакшн разделённый отдельно backк, отдельно фронт. А тут нужно именно с такой сделать, потому что чтобы не плодились инстансы дополнительные, потому что может могут быть дубликаты и чтобы у нас был только один инстанс. Именно в дефмоде они могут плодиться. Так что я сейчас сделал, я скопировал, да, просто это это где было? В де взависимостях. А так это было не в обычных зависимостях. В обычных зависимостях. Окей. [откашливается] Вот уже лучше. Так, норм. Это старая инфа. Опять же, ну, а отсюда, блин. [фыркает] Ну вот видишь, опять же, они дают определённую доку, но она непонятна, что за дока вообще такая. То есть у них какая версия, кстати? А, так вы угараете, это старая версия. Видите, ребят, в чём нюанс? Вот это частая история. Я не понимаю. Вот вот вот типа это ж это же официально. Ну да, это ну официально прямо. Это же документации я нашёл. Почему нельзя обновить версию? Я не понимаю. Ну нафига вы пускаете версию, не обновляете под неё доку? Я не понимаю просто. Просто что должен писать? Что ты хочешь, чтоб он написал? Какие-то опш он хочет. Ну я не понимаю просто. Они же не обязательны эти опшины. Что ты от меня хочешь? Ну это мне не нужно. Адаптер. У меня это и так стоит уже. Что ты от меня хочешь?

Ребят, пока я ещё решение проблемы, я вам расскажу, короче, в своих проектах. И я это не делаю, и вы тоже не делаете. На продакш ни в коем случае не завозить новую призму. Вот эта призма версия 7 - это ужас полный. То есть мы с ней, помните, у нас были с ней траблы в каком проекте? А мы недавно с вами делали. А я курс по призме делал на канале. Вот там уже были траблы, они всплывали, но там не так было заметно, потому что там не было практики особо. А здесь это вот уже заметно. Мы вот пытаемся сделать, а оно говорит, что нужны опшены, хотя опшены не нужны, короче. И у них, понимаете, самый нюанс в том, что у них у самих документация не обновилась под новую призму. А, и, по-моему, мы сейчас на марафоне тоже мучились, да, вот когда БК делали до этого с новой призмой. То есть, ну, я не рекомендую на неё обновляться, она очень сырая.

Так, нашёл статью на сайте какого-то. Вот, ну, парень котой-то разместил, да? Ну, тут то же самое, что и у нас. Вот тут только у него JS. Я не знаю, как кто делает. Вот у него написано в заголовке JS version. Зачем ты в 2026 году делать JS verion? Ну, спасибо, конечно, за штуку. Вот так попробуем ставить. Это для новой призмы. То есть я вынужден на каких-то строких источниках это брать, потому что сама призма, я вам говорю, я не кремную обновляться, ребят, ни в каком разе. Подожди, а он куда это ставил? А бан вот это вот вот сюда вот. Обожаю PNPM. Лайк за PNPM всегда ставим. Я поставлю всё на всякий случай. Вот так вот. Ну, погрес всё равно не хочет. А, тайпсы хочет. Ну, то есть в двадцашетом году делать без тепскрипта, это это как бы странно, на самом деле, максимально. Даже на джиновском уровне это типа и всё равно ошибка продолжается. Эним видишь в чём нюанс. Так, ну такой хитростью доделал. Вот так вот доработал. Не парьтесь, реально, если не понимаю, что происходит, не парьтесь просто. Это это просто установка и настройка. Мы также делали, кстати, на этом на в этом в зимнем марафоне, но там у нас был Nests, там что-то по-другому код, но но принцип такой же. Теперь я могу брать призму. Правильно понимаю? Правильно. Ну, сейчас потестим на сидере, как она себя будет показывать. Вот мне интересно будет.

Так, смотрите, сидр, мм, я попросил нейронку подготовить мне, собственно, данные, что я сам буду искать, типа, вот косма, да, Stranger SS. И она мне всё подготовила. Так, ну перед этим давайте, значит, что сделаем? Очистим всё. Ну, это база перед любым сидером мы всё очищаем. Опять же, это только на продакшене, ой, точнее, только на дефмоде юзати. Delet mania. Готово. Угу. Потом. Так, что у нас? Serриies и жанры. Тоже жанры. Ага. А почему тут женр, а там serious? Ну ладно, допустим. Слушай, ну жанра будет два по факту. Жанра, да, будет сейчас, секундочку, дайчуть подумать. Давайте сейчас напишу, короче. Да, я вам покажу просто так. Ну, может, что у меня накину нейронка, ребят, смотрите. А ид URL такой, пост URL такой. А что это вообще открывается? Надо будет где-то найти видос, залить видос будет в папочку, она будет располагаться у нас вот тут в папке пабли. Это в паблик. И я проверил, картинок этих не существует. Это нас обманули. Значит, давайте разберём, что вообще происходит. Здесь создаём два жанра. Это фэнтези для второго и для первого Skyfy. Stranger Things. Слаг, tйтle. Описание. Год выпуска, возраст, ограничение по возрасту, картинка. Большая картинка постерная в карточке. Привязываем через Connct. Я всегда через connect делаю. Мне так как-то больше нравится. Через конект привязыю именно нужно категорию жанр, да, эпизоды формирую сразу же. Вот они эпизоды. И здесь duration сек, но я не знаю, а он мне не может, блин, по-хорошему бы duration сек, чтобы он подтянул сам. И ещё какие-то обложки. Это нужно тоже выискивать для каждого обложку будет. И вот тут в принци то же самое для этой истории. Не знаю, ребят, или пока Ну не не по-любому надо делать, чтобы мы сидер могли запустить. Сейчас надо будет мне за кадром всю эту историю проделать, все картинки подобрать, постеры подобрать, видео сделать и так далее, и чтобы у нас всё это было. Ну и всё. И потом можем запускать. Блин, запустим, у нас всё это в базу зальётся.

Так, потратил, ребят, не знаю, где-то часик, может, ну ладно, не часик, ну до часа, короче, времени. Вот. Ну где-то, ладно, минут 40, наверное, да. Минут 40 это заняло. Значит, я подготовил все картинки, все видео. Ну, относительно одно видео по факту подготовил. Вот они вот слева располагаются. М, собственно, вот картинка скачал с одного сайта, которым вы все пользуетесь для скачивания сериалов, я думаю, да, все, кто давно качает сериалы, собственно, понимает, о чём идёт речь и где это всё смотрится. Вот постер, собственно, непосредственно, а, и Hero Image. Так называется, короче, вот эта вот главная картинка, она называется Hero Image. Вот. И, собственно, и всё, да. И и демка - это тоже скачаная первая серия, условно. Так, давайте теперь это всё я вместе решил с вами поставить эту всю историю, а всё остальное как бы так. Смотри, мне нужно дать ему пример, и дальше он поймёт, о чём идёт речь. Смотри, значит, у меня идёт images. Images/ st и это что? Это image URL, то есть это hero image. Hero image. JPEG. Так, постер, молодец, он меня тут. Понял. Дальше идём. Здесь Ой, он, кстати, вот я ещё GPT скинул. GPT расставил тайминги. Надеюсь, они верны, вроде бы. первую серию проверил неверные, на самом деле всё равно. Ну, примерно тайминги он расставил, сделал ресорч по интернету и и расставил тайминги. [фыркает] Здесь чуть посложнее интересно. Ну, он сможет догадаться, есть какая-то определённая это дамбне URL image st по им, правильно? Им 2 Е 5 1 JPEG. Вот походу вот такая история. Ну, последовательность, я думаю, понятно. Здесь что-то не хочешь мне подсказывать, так тебе. Ну, придётся вот так. Ладно, тут он уже понял. Тут он уже понял. Хорошо. Тут он уже понял. Так, один. Так, не, подожди, здесь Е, подожди. Им ед Е 1 1. Вот такая история. Что-то мало. Подожди. Один. А тут дубляж. Ну что ты делаешь? Ну я же Что ты? Ай, боже. Он неправильно написал. Надеюсь, вверху правильно, потому что он путает цифру. Он не ту цифру меняет. Оно вот оно он не те цифры меняет. Так, а вверху как он поменял? Тут всё правильно, кстати, он поменял спустя долгие время. Зато у нас качественно будет, понимаешь? Сейчас мы один раз Так, тут нормально всё по этому. Так, здесь только единственное видео у меня получилось. МКВ тут без видео здесь просто, да, получается МКВ. Попробуем собрать. Так, мне нужно pд зайти. Packon здесь прописана такою команда. not. Включаем loader ts note, да? И запускаем, собственно, сиs. Хорошо. И давайте выполним её. Получается, а нам надо поставить, да? Я просто не знаю, но он, может быть, и без него бы запустился, я фиг его знает. Ну, давайте на всякий случай поставим. Так, а, и тогда получается бан. Подожди, а у нас сидер так он не запустится же, да? И просто там призма она тоже поддержи. А если вот так я сделал? Норм. Ага. Вот. se database se to migration section your prisma config file. Давай попробуем через призму запустить. То есть так команды я уже всегда делал. А через призму, если это как вообще будет работать? Мне просто интересно, это как получается? Просто вот реально интересно. Я понимаю, что мы может пожалеем сейчас, но так и вот тут, да, получается, ну, в этом смысла нету. Всё равно команда будет запускаться, да? Ну, типа я могу условно здесь указать. Что за точка? Странно. Вот это что за точка? Это как это она работает? А, это сйс. Он имеет в виду, да? Сaceс. Вот так получается. Ну да, дада, дадададада. [фыркает] Не пойдёт, не пойдёт. Так, бан runт. Вот так. Давай запустим. А тут тоже не срабатывает, да, кстати? Ну вот видишь, да, эти есть модули. Давай сейчас пофикшу и вернусь тут, потому что у нас просто это не БК стоит. У нас типа фронт и БК, и поэтому нюансы есть.

Ребят, давайте попробуем сделать по документации, потому что такая-то шляпа получается. А давайте по документации вром сделать. как они советуют. Они, видишь, через TSX делают, да? Попробуем через него сделать бант. Я на видео вам покажу, не буду на паузу ставить tsx. Так. И получается, что мы с вами ещё раз возвращаемся в нам нужно будет переписать немножко его. Конфик получается и мы добавляем вот эту, да, вот сюда вот. И всё. Да, это всё. Это вот на этом этапе всё, да? А дальше нужно переписать сам файлик, он, короче, посложнее будет в разы. Причём а всё, я понял. Мы здесь призму забирали, поэтому он конфликтовал, потому что мы призму брали, которая у нас условно для клиента была сделана. Вот в чём нюанс. Давайте сейчас перепишу, ребят, и вернусь к вам.

Так, проверяем. Вроде выполнилось, ребята. Вот написит команд закончилась. Вот он я написал призма DBC. Давайте проверим. У нас тут, да, получасто было. Вот сюда смотрим. Так. А-а. А значит, эпизоды. Вот они эпизоды. Сколько их штучек? Вроде все, да? Number 1 2 3 4 5 6 Да, превосходно. Всё отлично. Дюрейшены, жанры. А мы жанры не наполняли, да? Не жанры наполняли. Что не наполняли? А, Serрис. И Serрис тоже есть. Превосходно. Готово, ребя. Так, а какой год? 2621. Всё нормально. Так, что я сделал, ребят? А я то же самое, что мы там делали, просто перенёс сюда. Вот. Вот, пожалуйста, просто перенёс сюда. Всё остальное не менял. А, и в конце тоже. В конце типа менял исходя из того, что мы теперь взяли. Вот. [фыркает] Вот такая история. Чуть чуть сидеры теперь стали сложнее, особенно когда вы монолит делаете. Видишь, такие есть нюансики. Но мы это с вами с этим тоже справились. Всё, ребят, бкчасть готова. Ну, относительно, ну, как бкчасть, база данных готова, скажем так. Теперь нужно делать уже фронтовую часть.

Так, ребят, ну, начнём с того, что мы на главной будем с вами делать сейчас ESR. И первая страничка, на которой мы это протестируем, страничка, ну, главная получается, вот она, Page TS6X. Отлично, мы её зачищаем. Сразу вверху делаем запрос, чтобы это был ESR, то есть это была статика, ну, которая ревалидируется каждое какое-то время. Мы пишем специальную константу здесь. Так, а получается экспорт, сейчас, секундочку, вот тут экспорт constст и получится revalidate. Revalidate. 60 секунд. Хорошо. Это мы сделали. И теперь мы за то, что мы работаем с серверными компонентами в этом проекте и всё делаем прямо в одном проекте, мы можем спокойно взять призму. Вот таким образом взять сериалы и поискать, собственно, все сериалы и их вывести. Так, инклудить нам нужно что-нибудь. Инклудить нам нужно жанр. Geners true. Так. Так. И что-то ещё, да, я забыл, да? Исортировать я забыл. И давайте по дате создания. Вот так сделаем. Хотя, хотя я не знаю. Давайте пока уберём. Ну, вы поняли. Так, если что, можете сделать, если желание такое появится. И давайте выведем сейчас. Накидаю, давайте, за кадром какую-нибудь здесь вёрсточку простенькую. Вот. И вернусь к вам. Вот такую вёрстку накидал базу. Сейчас будем редактировать исходя из ситуации. А, примерно так. То есть здесь это мы уже сделали. Потом AS добавляем здесь, иначе будет ругаться. Наш логотип типа как Netflix, да, будет ссылочка на саму карточку. И, короче, у нас просто нет гланички. Мы просто её делаем вот такую. Просто будет каталог обычно ссылка на адрес непосредственно. Вот если делать на продакшене, выводите это обязательно p config class name, собственно картинка. Это и это вот. Ну посмотрим, как он будет выглядеть, если что доработаем.

Так, давайте запустим, кстати, проект BН. Угу. Так, и что у нас получается? Как это всё закрыть? Ой, неправильно. Смотрим, что у нас на главной. Ничего не найдено, да? А, ну это не та страничка. Вот эта. Так. R series. Слушай, ну отлично, всё, с БКА всё пришло, всё чистенько. Смотрим. А, значит, вот такая у нас история по постгресу. Мм, давайте будем разбираться с ней. Давайте немножко подкорректируем размеры. Я, наверное, пожалуй Ну, оно заливается, да, у нас получается так. [фыркает] Вот тут горит. Мм. Так, сейчас, секундочку. Как бы нам так сделать правильно? Давай сделаем вот так. Ага. Это ничего не меняет. Подожди, а что за критс? Что-то не там. А, у нас эмдэшка срабатывает. Я понял. Слушай, пусть та будет здесь двоечка, а здесь будет тогда шестёрочка. Вот так. Так уже, да? Вот. И так уже получше. Ну, абсолютно базового дизайн. Ничего такого нету. Единственное, логотип [фыркает] у нас какой-то чуть странноватый он какой-то, я не знаю. Phoneбolt. А, ну вот это white, да? Вот это уберём. И, ну, хотя white прикольно смотрелось, да? Покрупнее. И мне вот этот ред вообще не нравится. Может, пятисоточку поставить? Угу. Дай вот этот возьму цвет. А у меня нет пипетки. Сейчас какой-нибудь такой цвет возьмём. Ой, что-то он прямо темноватый. Подожди, берём поярче. Ну вот такое оставим. Пойдёт, пойдёт. Всё, нам главное вывести просто. Да, видишь, я хорошо, что убрал ордеринг, потому что иначе было бы у него. Нам главное вывести. Всё, пойдёт. Дальше мы уже откроем, и там будет сама страничка непосредственно этого. Давайте подумаем, что сделать с этой ошибкой. Она есть, а, её больше нету. Или она есть? Она пропала, потому что кэш, наверное, да, берётся сейчас уже, наверное, да. Хотя, опять же, скш, если у нас на в дефмоде это же не работает так, по-моему. Так, ну давай попробуем ошибку это пофиксить. Не знаю, она вообще будет сплавить лет. Переходим в ENV. У нас вот есть SSL mod require. Давайте мы его заменим на verify full. Вот так. Возможно не будет, кстати, ошибки, но мы пока не протестим. Окей, это готово. Меня устраивает. Опять же нам нужно примитивно примитивный каталог. Наша главная страничка сдела главная задача сделать ту страницу, которую мы с вами запланировали. Вот эту вот. Это самая главная задача. Вот. А вот это всё остальное, это не так важно.

Так. И дальше нам самое интересное уже, да, переходим к разработки уже странички отдельные. Series это ссылка, да, у нас будет сsieries. А потом слаг. Мы же слаг делали, да, с вами, ну, должны были делать page X. Это будет наша страница. Значит, сразу нет смысла её делать, да, потому что у нас нету никаких данных пока что. Единственное, я вот думаю, нам же здесь точно потребуется generate metдаataта. А не, метадата нам не нужна здесь. Но а подожди, а static params? Static params же нужно подгрузить все слайки, которые у нас сейчас есть в системе для этого для статики. Ну для исара, да, это нужно будет сделать 100%. Ладно, пойдём пока дальше. Сам функционал будет храниться у нас получается source. А давайте сделаем, ну, давайте такую частичную модель, как модуль, модульная архитектура, да, сделаем futures. Это мы сейчас вот также делаем на нашем марафоне на зимнем. Вот. И я решил, по крайней мере, потестить, знаешь, вот если зайдёт, то зайдёт. Вот пока пока не могу сказать.

Вот своё мнение. Так, тут что у нас будет? Получается, у нас будет часть основная, вот эта мей, да, где у нас будет картинка, инфа об об о фильме непосредственно у нас будет карусель и у нас будет модалка. Значит, series main. Я так напишу TSX. Потом series это получается не мы можем даже episod episodes карусель тоx. Ага. Так. Ага. Так. И получается у нас ещё будет видеомодел. Видеомодул. Это будет модалка. Угу. Это тоже.

Так, ребят, ну давайте начнём с базы непосредственно, да, и сделаем сначала страничку. Вот. А к ней уже потом сделаем другие странички, которые разместим в пейдже. Сделаем сейчас main, подключим в пейджи, сделаем запросы и саровские к нашему бэку получим данные и уже пойдём дальше.

Так, пока оставим таким образом. Значит, картинка на весь экран будет растягиваться. же Cover Priority Fel обязательно она будет огромная, красиво на весь экран. Потом поверх неё будет такой небольшой градиентик from black to black и так далее. Ну, мы сейчас его подкорректируем. Возможно, нужно будет коррект. Се посмотрим. Значит, заголовок, это получается левая часть, как раз-таки заголовок H1 обязательно мы SEO сразу же, да, делаем с вами. Потом катодоп информации и описание. Кстати, описание. Оно у нас пустое, да? Или почему? Подожди, нет, сериал, наверное, было описание. Да, сериала было описание. Окей. Вот на этом, да. И тут не забудьте, ребят, смотрите, все типы мы из-за того, что у нас монолит, мы все типы забираем сразу же с призмы. Это очень и очень удобно.

Давайте поспеем собирать страницу. Значит, смотрите. Page next component сразу же с ходу. У меня, кстати, есть версия SEO. Page next component. Бля, SEO это там уже нужно отдельно SEO делать. Да, подожди. SEO, а тут как я сделал? А мы тут вообще забыли, да, это сделать. Мм, сейчас, секундочку. PH Next Component. Нет, вот это мне SEO версия нужна. Это мои снипеты. Можете скачать их в экстеншнах, если кому интересно. Так, подожди. А что мне сформировал? Ага, всё нормально, всё нормально. Вот так. Вот так. Ага. Red Series. Ну, ну вот так, допустим, достаточно. Так, а здесь пока делаем. Там же просто generate data нужно, понимаете?

Так, обязательно сразу же делаем то же самое validate. Через сколько будет просрачиваться, да? Export const reidate 60 ставим. И вот тут самое интересное, значит, смотрите. М о сейчас дай подумать там как у нас идёт получается, то есть там же парамсы у нас, получается, в этом нексте в новом они идут у нас с этого, да, с пропсов. Поэтому мы тогда делаем вот так. Мм, обозначаем эти пропс. Давай вверху обозначить, чтобы не мешалось. Не знаю, куда обозначить, чтобы оно не мешалось как-то. Ну, ну, вверху надо, да? То есть type t params. Вообще, если делать продакшн проект, выносите это в отдельный config, понятное дело, ну, в отдельные и можете их переиспользовать черезки. Вот я себе могу позволить чуть схитрить. Так, слаг у меня идёт, получае, это вот этот слаг слева, да, и search params - это для этих, а, вы поняли, для чего это для Бля, нам-то анакс не нужен будет, библиотечка, да? Мы всё на серваке обработаем, получается, короче, а это именно qy параметры. А параметр у нас будет эпизод. Вот. И вы, если делаете сезон, то тут будет и сезон, и эпизод. У меня только эпизод, потому что я сезон не делаю. [фыркает] Вот. Еп. Эпизод. Хорошо. Вот видишь, как пало. Смотри, я нажимаю и смотри, как он сейчас оп. Я я вот видишь, в отличие от того же Зда. Вот почему там нельзя так сделать было. Тут получаем серии. Дальше я пока скипнул даты. Мы сейчас чуть позже вернёмся. Prзма. Так, анг. Не забываем добавить. Asн. Prisma series find unique. Окей. Инклуди обязательно жанры. Нам жанры ж нужны, да? Жанры нам нужны, да? И эпизоды, да? Эпизод, да. Как их будем сортировать? По намру, по аску. Он всё, он всё знает за нас. Вообще шикарно. То есть у нас идёт numberр 1 2 3 и так далее. Мы по аску, то есть именно от единички до десяти, а не от десяти до единички. Поэтому по нему стартируем как раз-таки превосходно. Если серии нет, сразу же возращаем notфу. Причём фаo нам не нужно возвращать retторн, он сразу как бы с реторном, можно так сказать. Короче, он не требует реторна в себе. И обозначаем активный эпизод. Active эпизод. Аа значит, если оно есть и при этом, точнее, когда оно есть, мы делаемфайн и, собственно, подожди, ищем эпизод нужный. Нам нужно активный эпизод получить. Подождите. Эпизод. А у нас подожди, у нас по номеру, да, эпизода? Эпизод номер. Да, по номеру, по номеру, по номеру. Pars in. Вот так. Подожди, блин, это стринка будет по-любому. Подожди, как бы это всё красиво-то сделать. Я могу тупо намр поставить, да? Фикс нажмём. Я могу тупо numberр поставить. Не, мне кажется, некорректно немножко будет. Ну, пусть будет так. Ну, такая себе история, честно признаться. Если А если мы Ну, либо вот так. Я могу так сделать. Вот так. Вот так, да? Вот. Вот так схитрить можно. Всё. Если что, у нас будет первый эпизод открываться. Хорошо.

Так, значит, се, ребят, я за кадром подготовлю и вам покажу, потому что, ну, чтобы не тратить время на эту всю историю. Да, пока что хотел сделать статик парамS. Статик для чего нам нужен? Смотрите, вы его можете не делать, в принципе, если вам это не нужно. Вот таким образом он выглядит. Вот. можно его не делать, а он позволяет заранее подгрузить на этапе сборки все наши возможные слаги. Вот у нас там есть столько-то там сезон, ну, столько-то сериалов, и мы каждый сериал слаг подгружаем, чтобы он понимал нес, какие у нас могут они быть в целом. А это что за? А это устаревшая инфа. Подожди, подожди. Это устаревшая, потому что мы разворачивали компонент. Ага, хорошо. Вот это важно сделать. Но если у вас проект сильно большой, допустим, 1.000 записей больше, наверное, в этом нет смысла. Вот пусть лучше юзер сам грузит первую пачку через сервак и потом с кэшируется, потому что это, ну, будет сильно не оптимизировано, когда вы будете сборку делать проекта. Вот. Но если у вас там ма небольшое количество, ну, относительно среднее количество, то это очень вполне крутая рабочая история. Так что рекомендую.

Так, и SEO инфа. Давайте SEO напишу, вернусь к вам. Как мы с вами здесь работаем? Ключевое. Мы вызываем generate metadдаata. Прокину парамсы. Вот. И парамсы нам позволяют, получается, сделать ещё один запрос. получить его, потому что должно быть динамичные данные. Мы же не можем знать заранее, что за сериал, что за сериал, да, будет URL прокидывать, либо здесь вы прокидываете вот для каноникола, да, либо прокидывайте его в лейауте. И это, конечно же, мы выносим в отдельную константу, а в константу получаем из yви на продакшене, потому что будет домен отличаться. Вот так, как мы у нас обучающий проект, я вам только рассказываю, это делать мы не будем здесь. Я просто оставлял host хардкодом. Здесь что? title описание canonical ссылка это кlic openграph разметка опять же title описание ссылка название сайта тип у нас это TVшоу то есть сериал картинка можно одну мно можно много как вам захочется Twitter да твиттера классика и для роботса вот index true follow through true это база любого се собственно вот и всё теперь сделаем вёрсточку небольшую тут она на самом деле будет базовая пока без других компонентов делаем main м так nam тут у нас получается что будет Min haй screen. Ага. А bг black. BG Black. BG Black. Ну да, мы, по-моему, уже глобально не писали, поэтому здесь пишем и текст white можно глобально писать. Просто что-то как-то у нас времени дошло до этого всё. И делаем, получается, здесь series main. Всё. Всё. Вот так вот. Больше он ничего не хочет. Правильно я говорю? Правильно. Всё, пока пока без ничего другого. А давай тестировать. Тестим. Так, всё нормально у меня? Да. Нажимаем сюда. Рендерится ошибка. Так. Ага. Slagк undefined не проходит. Слаг почему-то слаг не приходит. Почему? А, да, у нас почему-то по рамслак приходит. А там, подожди, они же поменяли. Я каждый раз забываю. Подожди, они же поменяли там. Ой, ребят, там же промис нужно. Это же промис, я понял. Делаем промис, ребята. Вот я дописал промисы здесь. Сейчас протестим. Ну, я, скорее всего, прав. Причём забаво, да. Вот ээ насколько нейросети ошибаются. Вот я я такое, чтобы ускорить процесс, скидываю нейронки. такой говорю: "Тип, поменяй мне, пожалуйста, на промисы". Потому что мы с вами разработчики в краю уже обленились, да, и занимаемся ерундой всякой. Вот. А и всё. Она не может поменять. Она говорит о том, что вот я не знаю, могу вам показать или нет. Вот на практиках работает нейросеть. Вот вот умники вайпкодеры мне постоянно там доказывают, да, что-то там замена, не замена, там вот это всё. А вот смотрите, прямо вот скидываю я код, да, и она говорит: "В next 16 params и search params не промис". Совсем, совсем глупенько. Совсем глупенько. Поэтому я, ребят, тут от интеллекта ноль просто ноль интеллекта, вы понимаете? То есть это не искусственный интеллект, это искусственный бот. Вот представьте, что это обычный бот. Есть просто база интернета определённая, и то не свежае далеко, и то даже это не база интернета. Сложно, так сказать. Подбирает самый лучший ответ, который он считает нужным. Подобрал какую-то парашу очередной раз. Такое часто происходит, вообще часто. И всё. И он не знает. Вот я пошёл с документации, 3 секунды посмотрел, а он всё как бы, да, и говорит, что он не нужен нам Промис. Вот не надо нам Промис. Типа, ты ошибаешься, Макс. В итоге, пожалуйста, я сделал промис, и получается, что Макс не ошибся. Вот я промиссы и сделал, и всё у меня работает. Это пока непонятно. Ну фиг с ним. Это всё нам пока неважно. [фыркает] То есть всё заработало, получается, да? Видишь, да? И у нас сразу пришло в этом концелок. Всё нормально. Так, здесь всё меня всё устраивает. Хорошо, вернёмся назад. Игра престолов. Вот такая история. Слушай, она очень сочно смотрится. Нет, просто потрясающе, мне кажется.

Теперь нужно сделать, получается, карусель и видеомодел под эту же карусель. Давайте займёмся разработкой этого компонента. Так, а с чего бы начать? Да нужно и то, и то дела. Давайте с карусели начнём, наверное. [фыркает] Ну вот такую базу накинул компонент для карусели. Сейчас посмотрим, пойдёт, не пойдёт. Скорее всего, пойдёт, но что-то надо будет корректировать, скорее всего. Значит, берём просто карусель, берём роутер для из навигйна. Важно забирать не из роутера, а из навигейшна именно. Search param берём для того, чтобы мы имели доступ к парамсам из из URL нашего. Там у нас хранится эпизод текущий. Вот он наш эпизод, пожалуйста. И вот по рамце, да? И дальше мы полушим на конкретный эпизод scroll fse. А, ну срол можете тру поставить, как вам захочется, чтобы он вверх проскролил, допустим. Тут просто вот эпизод и сами эпизоды вводим, получается. Не знаю, будем сейчас смотреть. Вот так оно примерно должно получиться. Понятно, мы сейчас будем корректировать. Это такой быстрый накидон, скажем так. И вообще и вообще это только кнопка. Сейчас будем с этим, сейчас будем, короче, смотреть тут, что успеем, то добавим ещё дополнительно. Опять же, напомню, этот проект, он более такой, не то что слабее, он просто более проще, чем предыдущий проект. В прошлом проекте мы вложили все в силы. Там, если хотите, можно прямо хард посмотреть, да, то здесь мы так чилим больше по западным технологиям работаем и так далее. Вот такая история. Так, ну что, делаем или пока не делаем? Давай делаем. Давай делаем, потому что Ну а что ждать модалку? Мадалку потом сделаем. Ну, типа, нам никто не ограничит прямо сюда добавить прямо сейчас этот карусель. Да. Эпизод, эпизод, карусель. Всё. И тут сейчас пока это не трогаем, мы мы используем для модалки. Слушай, неплохо, как я и сказал, да, но вот она, кстати, мотается, но она но она как мотается. Ну, ну, ну, вроде есть инерция никакая. Ну я же говорю, сейчас будем корректировать и картинки, да, не подходя. Сейчас, сейчас будем разбираться этим всем. И давайто сразу модалку сделаем и пойдём дальше.

Для начала, ребят, давайте сделаем компонент для видео Джеса. Значит, как я его сделал? Да, на самом деле, всё очень просто. Я взял просто доку видео джеса, скинул её в джиптишку, и вот она мне такой код собрала. То есть я честно говорю, когда там что-то джиптишку использую, в этом вообще ничего нету. Хотя, конечно, люди до сих пор почему-то и им это не нравится. Хотя мы живём во времена, когда это актуально. Я вам просто показываю, как оно на самом деле работает. Видишь? Ну, видишь, он какой-то чушь сморозил, наверное. Да почистим код относительно. То есть, видите, он всё равно он ругается, потому что нет таких опшенов. [фыркает] Давай попробуем. Я попробую каплто использовать, но мне кажется, мне нужно в доку лезть. Он неправильно сделал, мне кажется. Не сходится просто этим. Ну, видишь, он какой-то пытается что-то здесь сделать, как бы, но это далеко не то. 700 Кб у меня прямо глаз дёргается. Ну, это готовый пй, ребят. Мы так пробуем в этом ролике. Так, а с этим разобрали. А с этим что делать будем? А что? А что не так вообще? Они экспортируется, да? Я не знаю, у него есть типизация? Должна быть типизация, кстати.

Ну что, ребят, я, собственно, реализовал базу. Давайте теперь дорабатывать. Смотрите, что я сделал в итоге. Значит, э, начнём с того, что видео JS. Вот я говорил, перенёс, а я я парился стипизацией. Вот такое я очень долго парился. Короче, в итоге вот такое решение, то есть мы забираем тайпринудитель отсюда и параметры тоже забираем принудительные. И вот так оно типизируется нормально. Во всём остальном случае оно не типизируется в этой версии восьмой. создаём. То есть это обычное подключение скрипта create limits. Добавляем class list конкретно open child делаем там туда-сюда виде JS on запускаем и так далее. Это классика любой интеграции такой библиотеки. Вот она, ну, не сильно для реакта оптимизирована, поэтому вот так интегрируем. Return вот таким образом делаем и вот, в принципе, вот так делаем. То есть это классика подключён любой скриптовой библиотеки. Видео модел здесь чуть попроще, на самом деле, при закрытии. Вот мы делаем search парамса, чистим туда-сюда. Это тоже классика. А вот такой код Dialog открытая по умолчанию будет, потому что мы извне её открываем, напоминаю. А, собственно, вот close content. Вот этот он требует радик от насл для типа accessability, поэтому его добавляем, но скрываем, скажем так, и видео JS player показыва. Вот вроде всё, да? Тут это я вам показывал уже. То есть такая простая реализация получилась.

Давай теперь попро вот плеер сам по себе рабочий плеер. А, ну я сейчас сделаю, чтобы старт у меня был с двадцатой секунды, потому что там в начале идёт интро того сервиса, где я скачивал. Не хочу, сами понимаете, да, на Ютубе вроде быто запрещено просто. Вот. Ну, вы поняли, какой сервис. Собственно, не мне вам об этом говорить дальше. Нюанс в том, ребят, что мне нужно, получается, сделать это пошире и карусель настроить и так далее. И сделать всё всё по-человечески плюс-минус. Давайте сделаем пошире. Как это сделать? Мм, и почему оно не широко? Хотя у нас там ширина другая стояла. Подожди, вот этот момент непонятен мне. Rдикс dialog. А fade out туда-сюда. Вот это да, по-моему, Макс. Максвис. Вот контейнер LG. Вот она. Это сам что на сам даалог, да? Это пропис получается. Сам даалог. Прыгне влог. Вот он сам это пропис, поэтому о не перезаписывает. Всё понятно. Давай найдём Макс. Вот, вот, вот, вот. Max VLG. Это оно? Да, это оно. Вот мы отсюда это уберём. Вот всё шикарно. Вот на весь экран всё. И видишь, готово плеер. То есть нам ничего не нужно делать, никакие элементы там и так далее. Вот оно всё показывается, пожалуйста. Давайте, кстати, захват экрана вам сделаю. Вот Escape тоже, кстати, работает для закрытия. Вот я открыл Escape. Нажимаю, закрывает. Отлично. И видишь, в адресе сразу у нас, если мы пропишем EP1, ну, EP2, это откроется сразу второй, вторая серия. Имба. Имба. Теперь давайте это всё приведём в человеческий божеский вид. Так, а давай приведём это в божеский вид. Чего нам здесь не хватает? Мм, вот так должно быть, да? Много чего не хватает, на самом деле. Много. Ну как много, но просто это такая ручная работёнка. [фыркает] Нужно привести к идеалу. Я вот так даже, блин, так это странно, если я буду делать. Я могу просто вынести это в отдельное окно. >> А как я это могу в отдельное окно? Ты мне дашь вынести в отдельное окно? В Хроме можно вынести. Вот так. Нет, вот я вынес в отдельное окно на второй экран. Правда, не знаю, как мы этим будем управлять всем. Ну вот. Да, это, конечно, капец как неудобно. Давай скачаем просто. Давай скачаем.

Так, ребят, [фыркает] прежде чем мы будем доводить до идеала, давайте одну ещё важную вещь сделаем, которую я хотел бы сделать в этом проекте. Хоть и проект достаточно простой, ну, относительно предыдущего проекта, который мы на канале делали. Там вообще прямо у меня голову снесло. Я просто я не знаю, начал делать его. Там 5 часов вышло или сколько, я не знаю. Вообще откручено. Это только записи самой 5 часов. И представь, сколько за кадром, да, там было работа. Это x3 больше, да? Да уже x4, наверное. Вот поэтому там мы отстреляли. Здесь мы чуть хотя бы почилим, более-менее стек интересно пощупаем и так далее. Но тем не менее нам ещё очень много до визуалла доводить нужно сейчас будет, да. Но пока что я хочу попробовать сделать всё-таки прогресбар, вот этот вот, чтобы мы понимали, сколько мы уже посмотрели конкретного видео, конкретного эпизода. Давайте попробуем это реализовать. Мы будем записывать local storage, чтобы не париться сильно, и перейдём сначала в видео модул, где мы будем этот результат фиксировать. Вот. А мы же здесь как раз находимся. У нас есть онди, получается, вот здесь. Мм, мы его записываем куда? А, ну это мы стартуем, да? И давайте будем записывать тут констки. А может вынести? Блин, я не буду выносить рядо. Сейчас опять с типизацией проблемы. опять он и поймёт, где плеер находится, какой у него тип. Опять вот начнётся. Короче, вы у вас будет время посвободнее, вы можете это вынести. Вот это вообще никакая не проблема. Прогressс. Так, оставим прогress. И тут title можно прикрепить, да? Дальше берём saved time, да? Окей. Это это если вдруг уже было время какое-то. Если есть, то мы current time, да, да, да, да. Это мы получается берём с локал сторджа и назначаем нашему плееру, с какой минуты нам начать просмотр. Правильно. Правильно. А и а при player он ставим состояние он on. Он будет отслеживать time update. Когда мы будем идёт будет идти просмотр видео непосредственно мы будем записывать consturent текущее player current time и записываю local storage. Он так не будет. Он он захочет, короче, вот так вот пожёстче. Так что не так. А где я забыл скобку, ребят? Не понимаю. А вот тут. Всё хорошо. Это мы сделали. Это мы сделали. Ну, зависит от того, поди, как мы будем получать. Подожди, давай по-другому сделаем. Подожди, давай по-другому. Знаешь, почему это будет неправильно немножко? Это будет немножко неправильно. Давай сделаем вот так вот в два этапа. То есть первое - это serius. У нас сирис же тут есть. Si нет сириаса. Это конкретный эпизод, да? Потому что мы здесь получаем. Ой, душ нам. Давай сирис получим ещё. Сирис. По что нам нужно вообще от Сириса? Сирислак, да, нам только нужен. Вот так. Вот так и вот так. Вот так и вот так. Ага. Вот так будет правильнее. То есть са сначала какой сериал мы смотрим, чтобы у нас не было конфликта с другими сериалами, потом его номер серии конкретно. Так. И теперь нужно передать ей данные. Не забыть вот сюда. Вот тут же он вроде бы отдаётся, да? Всё нормально, по-моему, он отдаётся без каких-либо проблем. Прикольная анимация. Ну мы не можем. Это это это уже видео самое. Если вы такое видео найдёте, у вас будет тоже такая анимация. А так хорошо. И что дальше? Всё записали local storage. Мы можем, кстати, протестить. Ну зачем тратить время? И теперь получается мы должны в карусели, вот наша карусель, как-то этот момент показывать в карточке. Да, именно, конечно, хочется. А, ну у нас нормально, более более-менее более-менее. У нас же US callback тепер по умолчанию, потому что React компилятор мы используем новый. Давайте get progress. Э, get episode. Вот так. Так, нам нужен number, номер эпизода. I number. Окей. И всё. Да, в принципе, берём, получаем series забрали. Забрали. Ну, пойдёт. Ну, это что у меня отдаёт? Подожди, это у меня даёт конкретное Не в том измерении, да, получается. Давайте чуть по-другому сделаем. Вот так, наверное, да, мы сделаем. А если есть, чуть по-другому переделаем. Вот так, да? Вот это, что наоборот, вот так будет прогресс отдаваться правильным. Кнопка раз. И где-нибудь вот у неё вот это внизу должно быть, да? Где картинка? Ага. А, ну он уже, кстати, мне помогает. Что-то мне не подожди, у меня какой-то бред совет. Подожди, БГМ. Я не знаю, какой ред взять. Может, такой прямо с это с дизайном какой-то взять? Так, й оди, но она закруглён, на самом деле, идёт типа rounded. Либо def, либо либо какой-нибудь. Что в итоге у нас опять какая-то ошибка. Почему? А, ну потому что понятно, почему. Подожди, а где это ты делаешь? У нас CL идёт, но всё равно, да, из-за того, что local storage может не быть, а он получает, да? Ну, тут просто нужно прове на Window проверить Window. Вот так. То есть, потому что мы в в нексте находимся. Вот всё, ошибка пропала. По а где курсор Pointer? О, там уже, кстати, посчиталось у нас автоматически. Как-то криво, правда. Ну ладно. Подожди, как [фыркает] оно посчиталось? А я же говорю, криво. Что он сотку берёт? Нам не сотка, нам нужно из А мы забыли взять. Duration. Точно. Duration. Вот так. Вот так, да? И Duration принимаем вот здесь. Вот так. Что не так? Типа он может это Да, ну там, по-моему, сек у нас идёт. Сек, да? А, ну да, дада, дада. Вот так вот. Вот так поменять надо. Ага. Вот теперь видишь красненькая уже полосочка появилась. Отлично. Так, курсор поinterтер. Угу. Так, всё, теперь кликается нормально. Всё, теперь кликается нормально. Вот открылась, допустим, я сейчас, смотрите, смотрю на двадцатой минуте посмотрел, аа, закрываю. Вот видишь, обновился. Всё, шикардос вообще. Мм, пойдёт, пойдёт. Она, правда, не округляется почему-то, как я хотел. Подожди, или я не там округл. Я там округлил. Подожди, а почему она не округляется? Типа оверфлоу не срабатывает, просто не хочет. И цвет какой-то странный. Я не знаю, что какой-то красный он. Он токсичный какой-то. Красный. Не знаю, что-то он какой-то вообще не то. Ну, хотя бы так, что ли. Ну, как-то он вообще не не то, что я хочу. И подожди, а белая других вообще, видишь, белая полоска. Давай я копаю подскажу, чтобы мне быстрее было. Понял меня? Походу понял. И это получается тут нужно вот так. Здесь нужно то же самое, что было вот тут снизу по факту. М. Vс full heй один. А здесь типа того, наверное, только это убрать с ноль. Вот так. F. И округлито будет вот здесь. Кстати, может быть фул оставить? Да, кстати, что не так? Что-то намудрил я немножко. Ага. Вот так. Ой, куда-то сверху. Подожди, снизу. А почему топ? А, ну я по ошибке написал ботом. Вот. Вот теперь оно. Да. А, а, ну и тут всё равно roundуedф, да? Вот так. Да, она как будто чуть-чуть на самом деле выше, да? Так, вот так. Да, да, да, да, да, И по и по лефту как будто тоже я могу сделать leftт один. Ну, а тогда вис фу фул не подойдёт здесь, понимаешь? То есть можно её просто уменьшить, чтобы она более-менее имела какой-то Да, ну, хотя она тогда маленькая получит. Ладно, короче, тут ряд калькулятора нужно сделать. Просто калькулет. Вы это всё умеете делать. Вот сделайте. Вот я просто сейчас не до этого немножко. Бля, хотя какой же я перфекционист в этом плане? Мм, берёте стайл, берёте с Давай, рассчитывай уже. Давай. Ну, тут получается этот, сколько это ремов? Я не люблю в пикселях писать. Мы же 02505 мину 0 5м. Вот так.

Давайте я вот так оставлю. 0,7, наверное, примерно. Вот так, да, пойдёт.

[откашливается] Давайте уже приводить вид нормальный. И уже Так, подожди, а какие цифры? Подожди, у нас здесь цифры идут какие-то. Что ты несёшь? Какие цифры? Подожди, [фыркает] что-то я даже не обратил на это внимание. Мы забыли поставить постр URL. А нафига нам эта цифра вообще нужна? Какой пострел? О боже, у нас же в эпизоде всё есть. А почему мы не можем? Где где этот эпизод вообще? Эпизод. Ладно, пока вот так сделаем. Просто вот так. Ага. Не будем париться, что не так. А, ну тут массив надо указать. Вот эпизод и у него есть тамнейлil URL. Вот цифра мне не нужна, не требует. Спасибо.

А они, кстати, чуть-чуть затемнены, на самом деле, да? То есть затемнение должно быть. Давайте мы даже оставим вот так вот. Мм, оно не такое сильное, оно должно будет на троечку. Вот так, наверное, вот типа того. Даже, наверное, чуть чуть-чуть более мрачная атмосфера на 40, да, где-то. Да, да, они же сами по себе округлённые, получается. А roundу где-то 2 XL, но они прямо сильно округлённые. А почему ты не округляешься? Ты можешь успокоиться. Overflow хитно просто берёшь и всё. Ну что ты не к не крутишься, не вертишься? А там конфликт есть какой-то. Да вообще, что с ним происходит? П 4 какие-то флексы, не флексы. Ка-то безобразие происходит. Подожди, здесь больше должно быть, значительно больше. 64. Вот должно быть ровно там четыре эпизода. Пятый еле-еле ещё сильнее. Значительно сильнее. Пятые. Нет, ещё сильнее. Или ладно, в нашем случае на наставим, да? На в нашем случае. Хотя, давай чуть-чуть посильнее. Давай. 92, по-моему, есть. Я я знаю, что можно любые значения просто так вот. Ну, кстати, вот это вот подходит только чуть-чуть назад. 92. Давайте сделаем вот так. Сами эпизод тоже шрифт ещё нужно подобрать. В идеале он не подходит здесь. Сами эпизоды значительно крупнее должны быть. Вот они. 2 XL. Ага. Да, да. Чуть-чуть более близко. То есть это четвёрочка, наверное. Вот так. Да. Почему-то он не округляется. Мм. Вот это что ли перекрывает? Наверное, это перекрывает, да? Скорее всего. Возможно, да. С другой стороны с оверфлохи идёт. Ну, потому что батн, наверное, он не является блочным, да, в этой ситуации, наверное. Может, поэтому нифига. А почему-то оно не работает. Rounded. А что ты не круглишь-то? Ну да. Ну, а если я здесь сделал? Реально, но это никак не влияет. Это не должно влиять. Но даже это округляется. Видишь? Это округляется. А это почему не округляется? А так огуляется. Ты что, угораешь? Ты не можешь округлить нормально? Радиуed. А что случилось-то с глобалом? Что? Где радиус делался? Радиус смы какие-то типа дефолтного радиуса нет. Он пропал куда-то. Он же по умолчанию должен быть какой-то. А реально пропал коты. Прикинь.

А что за ошибка? Гидратация. Что? Мм. А, ну это да, оно будет ругаться в любом случае. Нормально, я понял. Она будет ругаться, даже несмотря на то, что мы поставили вот это условие. Нам просто надо вынести в отдельный компонент это вот это вот и всё. Короче, тут сейчас грязно сделаю, ребят. Потом вынесите в отдельный компонент в красивый. Да, я вот так сделаю грязненько, чтобы ошибку вам показать, что оно убрано будет. Вот. Simple component. Вот это, да? Вот так. Вот так. А что тебе не хватает? Тебе не хватает вот этого. Вот это тебе не хватает. И тут что-то тебе не хватает. Вроде он там что-то попросил, что ему нужно было. Я так на скорую руку делаю. Всё. Так. И тогда в таком случае дела вот это работает же, да? Да, работает. И тогда мы делаем теперь вот так. SSR FSE это мой Snipet, собственный. Ой, моё extension. Можете написать HTMLs, и будут все экстеншены, которые вот мои. Вот получается вот это. Вот так. Хорошо. Хорошо. Это хорошо это хорошо. Всё. То есть, видишь, она не сразу появляется. Так и должно быть. И она сильно белая, конечно. А я могу чуть-чуть прозрачности сделать. Сильно белая. Чуть-чуть буквально. Это от себя уже добавлю, типа 80, чтобы не так сильно была заметно, на самом деле. А я могу ещё сильнее 60 там. Вот оно как бы есть, но оно не сильное. Вот так вот. Хорошо. Здесь не такой сильный. Чуть-чуть поменьше. Это сколько у нас было вот тут? 2 XL. Всё, мне достаточно будет. Хорошо. Хорошо.

Инфа о фильме? Мм, во-первых, этот, что он должен быть на весь экран. У нас не на весь экран, судя по всему. Да, оно не тянется ни фига. А что с ним не так? Нет, ит. А это где? А я сам это ограничение поставил. Подожди, [фыркает] давайте по-другому попробуем поступить. Я вынесу это вот сюда. Так, и вот эту штуку тоже перенести надо. Угу. Угу. Ну вот так, да. Типа она на весь экран же теперь. Ну, вроде на весь. Если если ничего не будто, вроде на весь. Да. Пока оставим. Так, а что там ещё нужно? Там много деталей. Где? Где эти детали? Все вот они детали. Так, значит, смотрите. Во-первых, это крупнее в разы. То есть это семёрка. Мм, да, ше шестёрка будет вполне меня устроит. Margн ботом, да, добавляем. Дальше там суспенс драма, эпизоды и так далее. Так, смотрите, это значит жанры. Вот они жанры. Это вот сюда получается пэшечка раз два. И оно типа дефолт, но но вот что-то, да, что-то вот как-то вот так. Skyfy, да, да, оно просто вот так. Здесь двоечка. Здесь, кстати, ну я просто тпэшки, ну давайте здесь диф сделаем лучше. Див. Ага. Так. И восемь эпизодов ещё нужно обозначить. Так, то есть я вот так лучше сделаю. Вот так. М. Это получается эпизоды. Эпизоды. Мне нужно проверить. Мне нужно проверить, взяли мы тут эпизоды или нет. Эпизоды include. Это это тру или не? Подожди, это как? Ну я просто не знаю. Serс. Не, не, ну оно включено же будет, да, наверное. Подожди, эпизод. Ага. Ага. Вот так. Да, нормально. Так, тут небольшой гэпчик просто сделаем. Флекс центр. М. Чуть-чуть побольше. Чуточку побольше. Ага. Вообще она значительно крупнее, на самом деле, да? И, кстати, серии они называются ещё как-то. Что-то я название-то пропустил совсем. Прогрес бар button. Блин, ну я хочу, чтобы она тоже была кликабельная. Ну вот так получается. Чаптеры ещё какие-то. Это это так прямо называется. Я не знаю просто, как серии там называют. Давай пока так я оставлю. Так, нене не, подожди. Это что-то не то. Так. Ботом ноль. Ботом минус четыре. Вот так. А на оверфлохи. Почему ты хиден? Давай ты не будешь хиден. Бля, он так не вылезет, ребят. Ладно, не хочешь, не надо. Что не так? Что я не так? Что не так? Опять поменялось что-то поменялось? Да, что-то, видимо, не так написано. Нont medум. Ну вот так, наверное, да? Вот так. Норм уже. Всё отлично. Хорошо.

[откашливается] А эпизоды куда делись? А куда эпизоды делись? Вот же эпизоды. Подожди, а куда эпизоды делись? Спрятались. Куда? Это что за? А оно за эту не вылазило, поэтому я понял. Всё нормально. Видишь, как скролл работает? Как я и хотел прямо. А куда делись эпизоды? Не понял. Ты у меня только что копал этого куда-то убрал или куда? А он не вылез, потому что это помешало ему. И точно, я понял. Ну, это нужно вообще по-другому делать. Это где вообще? Ну, это просто тут делается relйтив, на самом деле, и всё решается. Так, да, потому что мы фон накинули. Очевидно, что нужно релейтив делать, что повер Так, нам нужно как-то чуть вверх поднять эту всю историю, чтобы оно всё влезло. Это получается вот здесь делаем мы 65. Правильно? Да, правильно. Скролл не должно быть скрола никакого 60. Вот всё идеально. Так, что ещё? М, ну я всё, да, я это сделал момент. Правильно, правильно. Давай с этим разберёмся. С левом, с левой частью. Где она ещё? Заголовок. О'кей, в принципе. О'кей. Это о'кей. Ну, опять же, крупнее нужно. Ладно, я уже не буду менять. Только вот тут поменяю, там, где вижу. Наглядно. Вот так, да. Мм. Вот эти все штуки, как будто они должны быть такие, как бейджики. Бейджик у меня как выглядит? Бейджик, мы уже его оставили с вами. Бейдж. Как он будет выглядеть? Давай посмотрим, как он будет выглядеть. Бейдж, да? Да. Бейдж вообще прямо так он так он чуть-чуть не такой. Варианты есть? Вариант есть. Что есть у тебя? А сенто что? Да, меня меня устраивает. Я не хочу сейчас менять. Меня устраивает полностью. Да. Так. Ага. Так. Так. И и так. Это что мы сделали? Да. Это я вот это сделал. Правильно. Здесь да. Текст, кстати, крупнее должен быть. Текст LG. Ага. А что-то он не не больше. Ага. Хорош у нас было сильно большой. Тогда базовой оставляем просто и всё. Угу. Новый должен быть ограничен, на самом деле. Макс вис. Ну вот так примерно только. И опять же может текст Excel точнее LG сделать, да? Вот так будет лучше. И две кнопки осталось two buttons, watch now and more info with icons from it. React. Так, вот я пром тоже написал здесь. Так, [фыркает] это получится как это готово. Нене, не, ты глупишь. Хоть я тебе пром написал. раз так иконки иконки ты меня обманул с иконка так кнопочки пойдёт но это подожди это secondнary да у тебя нет это outлайн а secondнary что а secondнaryреy оно ага иконки забыл так о'кей она правда залитая внутри Угу. Угу. Да. Так. Не, подождите, заливка лишняя. Вот они кнопочки. Всё, у нас просто в глобале проблема. к батонам. Вот и всё. Отлично. Вот такая история у нас получилась. Вообще имба, мне кажется.

Так, в итоге, что у нас тут? А у нас чуть-чуть чуть-чуть можно повыше. А оно у нас как позиционировалось в целом? Вот это. Да. Да. Давай мы сделаем топ топ восемь. Вот так. Нет, тогда ботом. Тогда ботом отменяется. Бото мне больше нравилось. Вот так. Да, проверим другое теперь. Нет, это не то. Видишь, у нас просто открывается адрес, поэтому так. Игра престолов. Жду картинки. Не придут, да? Картинки не выйдут погулять. Картинки не выйдут погулять, да? Картинки, ещё раз повторяю, не выйдут покулять, да? Что-то ошибка вышла какая-то. Ну да, жаль. Ну мы пересоберём, если что, ничего страшного. А что [фыркает] не так с ним? Давай проверим. Мы у нас, благо очень удобный сидер, вообще пересоберём без проблем. Что это с картинками? Ещё раз. Images им. А два здесь. Ну как бы это мне выделить правильно? Вот так, да? Два. Вот так. Ещё раз. Е11 1 2 1 3 1 4. Вот так. Бан. Это не смотрите, что я до это писал. Это тестировал просто. Так. Воля. Картинки на месте. Вот, пожалуйста. Вот. Ну видео тоже очевидно, да? Потому что у нас этот, ну, красота. Ну, видишь, я нажимаю назад, поэтому у меня у меня за то, что EP записываю, да, оно как бы возвращается к открытому этому именно. Мне кажется, конфетка получилась. Всё, ребят, переходим к диплого приложения. Сейчас мы его быстренько зальём на полноценный сервак, и он будет доступен в интернете. Уже будет максимально круто. Ставьте лайки обязательно за такой крутой проект. И уже до встречи на диплое. Погнали делать плой и на телегу подпис, там очень много пользы.

Так, ребят, теперь переходим к непосредственно к деплою нашего а продукта, да, нашего проекта, нашего приложения. Напомню, что мы делаем Red Series, да? И в нашем случае нам нужно посмотреть, что у нас происходит по бэкэнду. Значит, смотрите, у нас есть вот такая папочка, да, NextGS. Есть такая история, есть такая история. О'кей. Мм, есть призма, да? То есть у нас бкэнд идёт прямо внутри некста, и мы никаких проблем с этим не испытываем. Правильно я понимаю? Да. Вот призмочка отдельная прямо внутрикста. О'кей, давайте вспомним, что у нас там по запросам было. Serрис раз это на что? Это это это просто URL, да, внешний получается. С ним надо будет тоже поработать в идеале, но это не не обязательно, но в идеале. Вот сюда. А, да, прямо с призм забираем. Всё, у нас прямо фустак внутриста. Хорошо, задача упрощается по деплоя, потому что у нас только nexts и нам не нужно ничего выдумывать с вами, да? Это очень удобно. Хорошо, в таком случае давайте ещё перейдём пон глянем быстренько. У нас есть такие запуски def build. Смотрите, нам для продакшна потребуется сборка и старт непосредственно. В принципе, эти и сидер, да, смотрите, сид есть, но у нас не знаете чего не хватает? Для призмы пушинга не хватает. Это будем использовать при первом загрузке. То есть когда сделаем деплой первый, мы для того, чтобы нашу структурировать нашу базу данных, мы сделаем первый раз пуш. Потом уже будем делать миграции, потому что они у нас уже вот присутствуют. Но именно первый будем делать p, да? То есть нам потребуется pш и сит для наполнения уже нулёвой базы данных, когда мы её задеплоим. Смотрите, я принял решение добавить такие скрипты и немножко переписать наш, чтобы было поудобнее написал DB se. Pusшинг, собственно, я уже сказал, для чего нужен. Генерация нужна, на всякий случай добавил. Просто это будет полезно вам как как минимум знать. В будущем, может быть, будете использовать. Это часто используется для генерации тепскрипта. Обычно выступают в комбинации с миграцией непосредственно, только не с этой миграцией, а с другой, а этой миграцией наплой. Я не знаю, может быть здесь поменять на плой. Да, сами подумайте уже. Я ставлю так, потому что, то есть, имейте в виду, что эта миграция другая. То есть одна миграция у нас на создание миграции, а эта миграция именно на применение миграции на самом сервере уже непосредственно. Студия тоже, кто просил, тот просил, да, я даже вверх подниму её. Это для открытия визуального визуальной нашей PRMUD, где сможем можно посмотреть нашу базу данных и сит для наполнения. Наш скрипт по наполнению я ничего не менял, поменял только название. На данном этапе нам потребуется создать теперь docker файл, точнее два doкеer файла. Давайте начнём с первого. Я на самом деле подготовился к этому, ну, до за кадром, короче, посмотрел информацию документации Next и понял, как мы будем реализовывать с вами именно докер, потому что Docker он отличается сильно от исходя из того стека, который вы используете. Docker filй аа давай прямо так его оставим, не будем писать. Вы, если у вас, допустим, как у нас в прошлом проекте было и фронт, и back, вы можете писать точка front, тоб, допустим, и разное расширение, либо просто вот таким образом. А что мне важно пояснить? То есть в этом проекте я решил тоже использовать Docker, а потому что, ну, мне кажется, такая вариация будет всем интересная. У нас на канале уже было видео, где мы деплоили, а полностью в ручном варианте. На платформе был мастер-класс, где мы делали также в ручном варианте. А а также у нас был буквально предыдущий проект, где мы использовали тоже Docker, но в более сложном проекте. И там был не Nextст, там у нас был, получается, backend, фронтend и база данных, но при этом это был проект написан на клиент навите. Ну и так далее. Очень там интересный стек был. Вот можете посмотреть тот проект тоже. А здесь покажу более упрощённая реализация с одной стороны. С другой стороны мы Next используем. Он более сложный, чем вид с реактом. Так что у вас будет в итоге на нашем канале вы можете посмотреть разные вариации, исходя из того, что вам нужно на самом деле под ваш проект. Это супедобно, мне кажется, супер круто. Итак, исходя из официальной документации, должен получиться примерно такой файлик. Давайте мы его изучим и если что-то нужно под себя подредактируем. Я расскажу, как это всё работает в целом. А чем мне докер понравился? Докер понравился мне тем, что опять же это по вашим просьбам я его использую сейчас придиплой, потому что вы в Телеграме проголосовали. Кстати, на телегу подписывайтесь тоже то, что вам хочется именно Doкер посмотреть, потому что устали уже от ручного деплоя, который я обычно делал. Прикол докеer, ребят, в том, что он позволяет вам настроить вот это вот окружение,мент определённый и потом очень легко протестировать его на локалке сначала, а потом также его протестировать условно на продакшене, да? И прикол в том, что если у вас на локалке всё работает, на продакшене оно тоже будет всё работать, у вас не будет никаких различий. И это самый большой плюс, потому что часто бывает приручном деплой, на локалке всё работает, потом деплоишь, а уже не работает на продакшене. Значит, что мы сделаем? Указываем образ, которого всё это будет браться. Мы так и будем запускать через бан. Мы указываем образ бана. Опять же, я бы взял другой бан, наверное, но просто я взял бан, который нам рекомендует сам NextJS из своего официального из из официального репозитория, связанным с докером. А дальше мы обозначаем папку, в которой будем работать. Эти все папки находятся внутри контейнера, то есть они как бы мы их не видим, они виртуальны, условно. Дальше мы копируем packages un block packageson, собственно, там все зависимости наше файлик, аlock там все версии зависимости. Копируем их, а, в эту папку непосредственно. Дальше мы запускаем определённые команды здесь опять же с официальной документации указываем флаги, маount, чтобы у нас был кэш, таргет и так далее. И бан, install запускаем с такими вот параметрами, чтобы у нас точно поставились нужные зависимости. Тут что важно понимать, ребят, почему вот так в таком варианте всё, почему не всё там супер упрощённо. Я мог бы настать более упрощённый вариант, но это было бы неправильно с точки зрения оптимизации. Next нам сам даёт информацию и инструкцию, как это правильнее делать, чтобы была хорошая оптимизация и быстро у вас всё собиралось и быстро запускалось. Вот next требует именно вот вот так вот, скажем так. Поэтому немного может оказаться более усложнённым. S Вот это, кстати, да, это название, скажем так, это название этой штучки, это название этой штучки и так далее. Это, ну, алес, скажем так, просто ас, чтобы мы дальше могли его использовать. Допустим, вот здесь мы используем from dependencies, то есть мы с предыдущего шага забираем всю информацию. И на каждом шаге мы добавляем, собственно, тот же самый образ. Берём тут опять же образ такой же, только это уже будет билдер сборщик. Это если зависимости чисто это сборщик. Мы в сборщик берём зависимость сначала и потом, соответственно, вот переносим номодульсы и вот копируем папка в папку. Дальше мы прописываем ENV, если нам потребуется. Ну, это дефолт, опять же, можно не прописывать надv production, что мы находимся на продакшене. Потом запускаем Prisma generate и run build. Так, сейчас я подумаю, нам хватит generate или нет. Или пуш запустим. Аа, наверное, хватит. Хватит, да? Потому что пуш мы будем при первом запуске делать, да? Сначала генерируем это для того, чтобы у нас собралась баз данных, именно её структура. Ну, кстати, в нашем случае это можно не делать, ребят. Давайте я закомментирую, потому что у нас проект напоминается внешней БДкой. Нам это не нужно делать. У нас внешняя БД, она работает и на локалке, и там у нас более упрощённая версия, но на продакшене, конечно, вы это можете раскомментировать. Ban run build. Отсюда берём бан. Дальше также директорию указываем. Опять же прописываем. Здесь потребуется вот. Я не знаю насчёт хостнейма, но это нас попросил опять же Next, у него это прописана такая нвишка. Давайте оставим, ничего страшного. И несмотря на то, что мы испольсь порт трёхтысячный, дальше я вам покажу чуть ниже. Вот здесь тоже трёхтысячный порт. И я вам дальше покажу, как мы это можем перекинуть на другой порт. То есть по факту это внутренний порт в самом контейнере, а в самом докере, внутри докера. А дальше мы его можем перенаправить на внешний другой порт. Это тоже очень удобно. В docker compos делается. А тут что мы делаем? Собственно, это Eидер. Забираем информацию, а потом переносим паблик уже папочку. Дальше мы создаём папочку тоne, выполняем эту команду. И дальше мы также с билдера копируем информацию stand и вот это же и статику. Стандалон статику. Стандалон. Что такое? Давайте покажу вам. И вот, чтобы не быть голословным, вот она, пожалуйста. Да, полностью документация вот, которую я только что вам показывал. Единственное, она чуть-чуть более усложнённа. Я её упростил под наш кейс конкретно, убрал лишний комментарий и так далее. Но вот смысл вот написано, да, leverage output races to reduce image size. То есть здесь конкретно нужные папки мы получаем и тем тем самым уменьшаем размер в целом. И вот ещё покажу вам информацию на официальном сайте Next в документации. Вот переходите в раздел и вот как разтаки информация. Здесь всё про деплой. Выбираете там докер, контейнер, не докер и так далее. Это самый лучший вариант, как можно посмотреть информацию подробно. Вот. И в докере здесь вот видишь вариант вот этот вот именно есть экспорт. Ну, экспорт - это, смотрите, экспорт если у вас полностью статичное приложение. Если прямо статика полностью, то можно экспорт сделать. Это на самом деле более удобный вариант. И плой будет похож на тот плой, который мы делали в предыдущем проекте, где мы чисто поднимали кидали ссылку на HTML-файлы и всё работало. У нас же более сложная версия, потому что у нас SSR идёт вариант и Next более сложный, поэтому мы используем Standalon Output. Но чтобы его использовать, нужно указать обязательно output Standalon. Сейчас мы это сделаем внутри next конфиig. Вот он говорит, что это деплоится туда-сюда для генерации минимального продакшрейди, то есть готового для продакшена и этого образа докера с только обязательными файлами, которые должны запускаться в рантайме и зависимости. Вот эта вот имбовая штука, которую мы как раз-таки и будем с вами использовать. Т на самом деле не пояснил. Давайте поясню, ребят. Это вот что значит? Это мы значит мы передаём права вот этому юзеру бана. Вот. Вот мы вот этот юзер находится здесь. То есть передаём просто ему права по факту. А давайте уже дообъясняю сам файлик, а потом уже выставим в конфиге. То есть это я сказал уже. Потом куда какой в порт это будет отдаваться? Трёхтысячный порт, это внутренний порт именно и команду, которую мы запускали в конце. B server JS. Server JS будем получать как разки вот отсюда непосредственно. Теперь давайте прыгнем в Next Config. Next config. Так, по документации прямо здесь мы пишем output. Вот здесь. Всё готово. Тут тоже сохраняем. В обязательном порядке создаём файлик docker ignore. Без него как бы никуда. Вот это то же самое, что Gitignor по факту в гителько в докере. те файлы, которые мы исключаем из нашей сборки, чтобы у нас не было а ничего лишнего. Вот здесь по умолчанию вот примерно такая будет сборка. No model gitv docker файлы и так далее. Так, так как у нас инвишка будет общая, я пойду в gitgnor сразу же, да, и себе вот этот явец сюда отключу. Просто потому что, ребята, у нас в нашем конкретно в нашем проекте вообще так не делайте, но в нашем проекте он просто общий, и я поэтому его закидываю прямо в GitHub, чтобы чтобы не париться уже, да или нет? Да, давайте его прокинем, пусть будет. Ничего страшного. У нас тестовая всё равно бдшка, поэтому можно себе такое позволить. Теперь у нас, когда есть уже вот этот docker файл, да, контейнеры, нам нужно создать непосредственно compose. Compose - это не, я не знаю, как это по-русски сказать, это штука, которая объединяет много контейнеров себе. Вот опять же в прошлом проекте мы объединяли условно фронт, и бдшку. В этом проекте только фронт будет, поэтому давайте сделаем. И таких файлов может быть два в проекте, а может быть и больше. То есть вам вы в этом не ограничены. А я обычно делаю два файла. Один для локалки, вот такой обычный, а второй точка про для продакшена. Почему два? Потому что так удобней, да, ты отдельно на локалке запускаешь, оттестировать, у тебя там свои порты могут быть и так далее, а на этом уже запускаешь непосредственно. Здесь будет простое описание. Просто указываем services app, build, произвоe указываем вот вот такую точку, да, директорию dockerфайл. Какой у нас docker файл? Вот имейте в виду своё название меняли, должно другое быть название. Название контейнера это будет отображаться во всех логах, да, и в процессах. Restartv файл, который будете использовать и порт. Вот и всё. На локалке оставляем 3.000 3.000 м, чтобы она было порты 3.000. На этом потом я вам покажу, как по-другому сделать на продакшене. И давай теперь соберём проект и посмотрим, что получилось. На этом этапе можно собрать уже

Так получается. А, ну и про установку докера тут на самом деле всё очень просто. Я не сказал, да, просто ставите Docker Desktop через официальный сайт либо через терминал, ну там считанные секунды ставится, вообще никаких проблем в этом нету. И у вас докер будет работать с терминала.

Значит, `docker compose up build`. Вот можно прямо так запускать и не выбирать, что конкретно, потому что у нас только один компостфайл, и мы не паримся. Потом в будущем, когда у нас будет другой compostстфайл, мы будем указывать этот флаг тире F и указывать конкретный файл. Нажимаем Enter. Если вы запустите в таком варианте без флага D, у вас будет прямо логирование прямо в прямом эфире здесь происходить.

Единственное, [фыркает] ребят, пока у нас там собирается контейнер. Мне не знаешь, что не нравится в этой вот в этом деплое. Ну не то что в этом деплое, в этой инструкции конкретного нена официально. Вроде бы это официалка откста и так далее, но вот я это обсуждал в прошлом, опять же, видосе, который вы уже, наверное, смотрели на канале. Нюанс, ребят, в том, что а мы должны использовать образы очень лёгкие. Понимаете, я это ещё изучил, когда когда работал с докером в C ICD. То есть важно использовать именно лёгкие образы, иначе они у вас будут собираться просто годами. Я не знаю, почему они используют просто обычный образ. Это даже не Alpine версия. Я не понимаю, честно, в что с ней не так. Может быть, за кадром я уточню этот момент, да, но я бы вам рекомендовал, то есть мы сейчас просто делаем по документации официальный, но я бы рекомендовал, конечно, Alpine попробовать. Может быть, он в чём-то ограничен и там не хватает чего-то длякста конкретно в этой сборке более облегчённой. Но опять же повторюсь, допустим, в прошлом проекте мы используем Alpine версию, и у нас никаких проблем с этим не было, но там был более упро более именно фронтенд был более простой, здесь фронтен посложнее.

Ну то есть, к примеру, вот, ребят, я спросил у GPT непосредственно. То есть, во-первых, они это не используют, потому что, ну, как я и говорил, то есть, это нестабильно просто в их понимание. А, ну вот смотрите, допустим, да, обычно вот идёт у тебя 85 Мб, значит, Slim версия 66 Мб, Alpine версия 43 М. Как разкипай версию мы использовали, допустим, в прошлой итерации, когда делали там, ну, другой проект Кадиплоили. Поэтому не знаю, ребят, да, тут нужно быть очень аккуратным. Я про это опять же говорил в прошлом видео. То есть нужно баланс соблюдать. Должна быть очень лёгкая сборка. При этом она должна поддерживать функции, потому что некоторый вот тот же самый Alpine, он может вызывать нюансы некоторые, некоторые, может быть, вещи не поддерживаться, и тогда с этим нужно будет мириться. То есть очень такой нужно баланс соблюдать хороший. Так что тестируйте под свой под свой проект уже, выбирайте, что вам хочется. То есть слим по идее будет очень стабильно работать, по моему мнению. Вот Alpine нужно будет тестить. Возможно Alpine с Nextм может не подружиться. Не знаю, надо будет смотреть.

Ребят, мы получили ошибку при сборке. Всё прошло. Последний этап сборки не прошёл, собственно, билдер. А я знаю, в чём проблема. Значит, он не смог получить вот этот вот вот этот вотвишку. Как это пофиксить? Смотрите. А мы идём в Docker file. Получается, на этапе билда возникла ошибка. То есть на этапе билдера нужно её фиксить, да? Да. Где у нас builder? Вот он. Builder V production. Вот здесь, да, прямо можно сделать, да, перед Да, подожди, а где, а где generate у нас? Что-то я не понял. А, generate мы закомментили. Всё правильно. Вот так. То есть мы аргумент databas URL и в NVI её прописываем как раз-таки. И дальше нам ещё в компози тоже нужно это дело прописать. Сейчас, секунду. В компози, по-моему, будет вот таким образом. Сейчас, секундочку. Вот таким образом, да, тоже в аргументы прокидываем. Как раз-таки это получится вот здесь хорошо. И должно работать. Давайте попробуем ещё раз собрать. Попробуем сначала застопить. Я вот так сделаю. Просто команду А теперь заново запустим.

То есть видите, ребят, прикол в том, что у нас даже вот посмотри, да, очень быстро теперь сборка идёт. То есть первый раз было долго, во второй раз уже очень быстро идёт сборка. А вот видишь, долгий процесс экспортируют картинки иэрса. Вот это интересный процесс как раз-таки для вот этот стандало формат получается. Ну, по правде говоря, ребят, у нас правда много картинок идёт. Вот наши все картинки. Вот, вроде бы заканчивает. Смотрите, разбока прошла успешно. Вот так оно всё выглядит. То есть собран были имиджи были собраны, нетворк был тоже создан, контейнер был создан, всё привязано было, запуск произошёл успешно, можно открывать, получается. И видишь, автоматически логи идут, потому что это запущено не в фоновом режиме, как мы могли бы запустить. Я вам до этого говорил, флагди, это будет фоновый режим.

Давайте проверим, ребят. У меня, короче, браузер закашировал там другой мой сайт. На этом неудобно, короче, пользоваться. Давайте мы восьмидесятый порт пропишем сразу же. Мы также будем на продакшене делать и оставим здесь сразу восьмидесятый порт. То есть этот порт внутренний ещё раз будет, да? А восьмидесятый порт будет внешний. Почему именно 80? 80 порт - это дефолтный порт, и поэтому он позволяет запускать сайт без указания порта. Вот таким образом. Поэтому восьмидесятый порт. Делаем перезапуск. Вот видишь, я выполн команду дау. Вот они в оба контейнера выгрузились. Точнее, один контейнер выгрузился. И давай теперь запустим. И обрати внимание, что в этот раз запуск произошёл очень быстро. запустил с флагомди в Афоне и за то, что уже была сборка, уже всё подготовлено заранее, то сборка прошла за секунду всего лишь очень быстро. То есть перезапуск, да. И вот смотри, через command `docker compose ps` мы можем посмотреть, какой у нас сейчас запущен процесс данна. Вот он наш процесс запущен. Давай тестировать. Ну и вот наш проект успешно открыт, как видишь, да? Теперь пишу просто localhost. Вот таким образом, да? И вот наш сайт открывается. Пожалуйста, давайте кном какую-то страничку дан открывается успешно и изображение подгружается. Всё. То есть, и это уже запущено у нас, понимаете, через докеer. И тут очень ключевой момент. Если это работа через докеer, мы без каких-либо проблем просто плоём на продакшн, и оно там также будет работать. Вот в этом имбовость заключается докер. Понимаете, в чём прикол? В этом заключается имбовость с докером. Вот, пожалуйста. Вот и видео начало воспроизводиться уже. Понимаете, да, в чём прикол, ребят? И вот вы сейчас увидите, как мы в считанные секунды задеплом это уже на удалённый сервак. Создадим его, задеплом, да, и вообще ничего не нужно будет добавлять, оно уже из-под коробки будет работать.

И на данном этапе, ребят, я не буду создавать, как я говорил, вы можете создать новый файлик себе, да, `dockercost. Проam`, допустим. Ну, опять же, в прошлом ролике можете посмотреть, если кому интересна полная реализация. А, ну именно такое более продвинутое, скажем так. Здесь нет смысла, потому что у нас уже по факту ну он соответствует, да, этому. Я не вижу смысла. Просто у нас у нас более такой простой проект, здесь мало мало составных частей, поэтому оставляем один файл и его же будем запускать на продакшене. Перед дальнейшим действием не забудьте обязательно выключить doкеer. Ну просто для удобства, чтобы он у вас не грузил систему. А теперь, ребят, мы готовы груть уже на GitHub непосредственно. Вы можете выбрать GitHub, можно выбрать Gitlab, можно выбрать BitBcket и так далее. Любой любое место, куда можно выгрузить репозиторий, откуда вы потом сможете его легко клонировать на ваш сервер удалённый. А в нашем случае GitHthub он самый популярный. Создаём репозиторий новый, переходим на GitHub, нажимаем кнопочку создать. Либо переходим по ссылке github.com/new. Указываем в репозиторе. Ну давайте, у нас получается это series, поэтому я укажу red series. А описание можно не указывать и visability. Смотрите, я в этом видео покажу опять же продвинутый вариант через private visibility, то есть приватный репозиторий. Почему так? Потому что большинство репозиториев в продакшене, они приватные, очевидно, да, мы не можем делать продакшн на пабре репозитории. А вот с пабликом, конечно, будет всё проще. Вам не нужно, вам нуже можно будет пропустить там несколько шагов, потому что с пабликом вы просто клонируете, вам не нужно про выставлять ключи какие-то определённые, но с прайтом правильнее будет. Поэтому я выбираю private и нажимаю кнопочку создать репозиторий.

После этого, как репозиторий создан, у вас там появится список команд, который мы сейчас как раз-таки выполним. Первая команда `git init` для инициализации нашего гита. Готово. Дальше `git add .`. Добавляем всё, что мы видим в а в GIT и комитим это всё вот таким вот обще общей командой. Сразу её объединяю через и, чтобы было удобно. Кстати, да, либо вы это можете сделать через, собственно, инструментарий в вашем редакторе кода, либо дешки. В моём случае это код. Я нажимаю, ну, у меня Command Shift G стоит кастомная горячая клавиша Source Control. Какие-то у вас, может быть, SB его открываете либо через менюшку GitHub, да, а точнее, как не не GitHub, а source source control. И, собственно, вот его открываете здесь, да? А, и прямо здесь можно написать как раз-таки ваш комент, допустим, first. И можно прямо сюда закомитить сразу же. Ждём какое-то время комита.

Так, ребят, небольшой втоп. Мы сейчас не сможем так выгрузить. У нас, короче, я забыл, у нас очень большой файл МКВ. Он там весит там почти 4 гига. Это не это некорректно. Вот. А давай, знаешь что сделаем? Мм, попробуем его сейчас обрезать. Я думал, как на Маке это быстро сделать, чтобы не запускать некие там редакторы код и так далее. Давай, попробуем через f FFMпек. Ну, вы поняли, да? Вот такая строчка. Собственно, мы обрезаем. Только единственное, я хочу вот тут обрезать с нулевой. С нулевой до 10 секунд я хочу обрезать 10 нам хватит. 10 секунд, но я думаю, хватит. Дмкв. Так, только подожди. Неправильно, неправильно опять я сделал. Секундочку. SD сначала паблик зайдём. Ага. И в нём, да, прямо будем резать, да? А вот в нём уже можно вставить и подрезать. Вопрос, долго ли это или нет? Так. Так. Тут смотрите, вроде подрезался, причём очень быстро. Давайте откроем ещё раз finder и посмотрим. Значит, было у нас 4 гига. Вот он огромный, да, весь вся серия. И вот осталась. Да, правда, заставка только этого. Блин, немножко [фыркает] некорректно получилось. Давай, подожди, давай наоборот заставку скипнем и возьмём хотя бы там, ну, 30 секунд. О'кей, мы себе можем позволить ещё раз. Вот так. Overрай, да, перезаписать. Слушай, хорошо он работает, быстренько работает, мне нравится. Так, секундочку, быстренько. Так, а почему не про, короче, не скинулась? почему-то. Я не знаю почему. Ну ладно. Наверное неправильно написал запрос всё-таки. О'кей. Главное, что всё работает. Так, это мы, собственно, убираем. Нам это не нужно. А это всё оставляем. Хорошо. Короче, прино решение подреза всё-таки сильнее. Получается, я вот такую штуку подрезал с 30 секунды 30 секунд. И в итоге у меня получилась такая история. То есть прямо вот начало, начало, идеально. Всё, у меня подойдёт только вариант. Всё и всё. 27 Мб весить. Вот этот вариант нам подойдёт. И теперь у нас всё будет отлично работать. То есть гит дD и вот так, да? Видишь, моментально просто из-за размера были проблемы. Я рад, что были эти проблемы, потому что я так забыл про этот момент. Так, это мы сделали дальше. А дальше мы делаем, собственно, переходим на brchmin, но мы уже в нём находимся, переходить нам в нём не нужно. Добавляем просто Git Remote наш вот этот вот. Ну, у вас там будет команда `git remote add origin` на вашей репозитории. И после этого выполняем команду `git push -u origin main`. Ну и после этого видим, что наш репозиторий полностью рабочий. Вот он залит уже на GitHub.

Всё это время, ребят, мы разрабатывали проект локальны. А у нас всё работает, всё прекрасно, но работает только на нашем компьютере. А нам нужно сделать доступ к сайту, чтобы был 24x7 с любого устройства, независимо от нашего компьютера. И для этого есть только единственный выход, да, - это размещение на удалённом сервере. Сегодня я разберу это на примере облако Selecttel. И давайте перейдём к процессу регистрации входа. На главной страничке нажимаем кнопочку "Войти". Ссылочка будет в описании. А значит, можно выбрать существующий аккаунт, если вы уже регистрировались, либо нажимать другой аккаунт, и у вас будет такая примерно формочка. Можно зарегистрироваться, можно войти в свой аккаунт. Давайте зайдём в наш аккаунт. Далее нужно перейти в продукты, облачные серверы, создать сервер. Тут, на самом деле, название можно указывать любое, как вам захочется. Локацию тоже можно выбрать на ваш вкус. А единственное, ребят, операционную систему сразу выбираем Убунту, потому что мы будем разрабатывать на Убунту, точнее, будем деплоить на Убунту. Значит, тут выбираем версию. Опять же, разницы никакой нет для нашего проекта. Здесь можно выбрать стандартную конфигурацию либо шаре конфигурацию. Собственно, шарет конфигурации либо Shaline более бюджетный вариант с арендой части ядра, да? Это минимальный сервер. В такой конфигурации можно арендовать там от 12 руб. в день, что идеально подходит для для тестов и тестирования вашего проекта. Тут далее опускаемся чуть ниже. Собственно, вот указываем минимальную конфигурацию для нашего проекта. Вполне хватит. Дальше здесь мы оставляем всё без изменений. Нам это достаточно будет тут ред ключевой. Я рекомендую добавить SS ключ, потому что без него будет не безопасно подключения к серверу. Это сейчас уже некоторый такой стандарт, который везде используется для подключения к серверу. То есть нажимаете сюда, у вас будет кнопочка добавить ключ. У меня уже просто есть один ключ. Название будет автоматически сгенерировано. Вы можете поставить любое название, которое только захотите. И тут указан публичный ключ. Как его сформировать и что это вообще такое в целом? Тут, собственно, вам нужно выполнить данную команду на компьютере, создать ключ, потом копируете его и вставляете в это место. Но в чём может быть загвоздка? Если у вас на компьютере было подключение там к другому серверу, условно, да, то это может помешать, потому что у вас уже такой ключ есть. Я бы вам рекомендовал создать один ключ на один сервак непосредственно. Вот поэтому для того, чтобы создать второй ключ, мы можем написать такую строчку. То же самое, что было до этого, только указаны комментарии, название нашего ключа, да, и меняем название нашего ключа, да, на какой-то кастомный. Нажимаем Enter. И на данном этапе мы уже можем подключиться к нашему удалённому серверу с помощью такой команды. Вот здесь меняем непосредственно на наш вот этот ключ. Здесь может быть опять же разные ключи. У нас был такой, может быть вот такой series, да, и так далее. И можете уже коннектиться. Ну, такая строчка не совсем удобная, она очень длинная. Каждый раз вы копировать, конечно, такое себе удовольствие. Поэтому я вам [фыркает] рекомендую открыть файлик SSH Config на вашем компьютере с такой командой и в него вставлять пример следующие строчки. Вот я его показывать не буду, потому что у меня свои кастомные алес. Вы вставляете вот такую строчку. Просто указываете host. Это как разтаки ваш алиас, который потом будете использовать, запомните его, вашего юзера. host name, собственно, адрес вашего сервера, который потом у вас будет, да, пока что вы его не увидите, кстати, да, в консоли по созданию вы его увидите, можете добавить здесь, а файл, собственно, ключ, который вы создали здесь, и тут оставляем всё по умолчанию. Нажимаем Enter, сохраняем файлик, и всё у вас будет прекрасно. И после таких манипуляций вы можете прямо вот такой командой `ssh my new server` подключаться через Alias. И вообще ничего не нужно больше указывать. Вместо такой команды будет вот такая команда. Очень и очень удобно. И теперь осталось скопировать наш ключ, который мы создали. `cat`. Указываем, собственно, вот наш директорию нашего ключа. точка pu обязательно нажимаем Enter и копируем наш ключ. И после того, как ключ скопировали, вставляем его вот в этот интерфейс, нажимаем добавить. Всё, наш ключ успешно добавлен. Вот, пожалуйста, вот он добавился. Вот я выберу другой ключ, потому что у меня он уже был до этого создан. Тут ничего не меняю. Нажимаем создать сервер, и сервер будет создаваться. Ждём какое-то время. Затем у вас откроется такой интерфейс. Мы здесь тоже ожидаем, пока наш сервер создаст. Вы здесь можете отслеживать статус создания вашего сервера. Ну, кстати, давайте покажу. Вот так выглядит создан уже сервер непосредственно я перешёл на серверы, чтобы показать этот интерфейс другой. И у меня заняло это, я не знаю, секунд, наверное, 30 максимум. Вот. Бывает даже быстрее создаётся. То есть, ну, очень быстро, опять же, в считан-то на секунды. Всё, сервак готов, можем к нему подключаться.

И казалось бы, мы уже можем к нему подключиться. Вот она, пожалуйста, наша а команда непосредственно, да, мы можем спокойно к нему подключиться. Но есть один нюанс. А нюанс в том, ребят, что если мы подключим через терминал встрм непосредственно, да, то, в принципе, всё будет работать. Но в зависимости от того, насколько далеко вы находитесь от сервера, у вас будет определённые пролаги. И лучшим решением, ребят, здесь будет, конечно же, терминал warp. Смотрите, вот так он выглядит. И его имбовость заключается в том, что он позволяет, значит, он делает такую свою обёртку над вашим вот удалённым сервером, скажем так, при подключении, да, и вы пишете как бы внутри интерфейса его и при этом без задержк, как будто в обычном терминале работать. При этом он это потом сам отправляет уже на удалённый сервак. И это прямо вообще супер круто и очень удобно этим пользоваться. Поэтому для удалёнки рекомендую warp terminal. Далее копируем отсюда ипишник и вставляем его сюда. Подключаемся к нашему серверу. Здесь у вас просят продолжать или нет. Нажимаете y продолжить. Всё, мы успешно подключить к нашему серверу. И как видите, у нас свой интерфейс здесь. Да, и он очень быстро работает, не независимо от нашего от удалённости нашего сервера от нас.

Далее обновим все зависи, которые уже есть на нашему бунту, и поставим Git. Обязательно нам нужен для работы с гитом. И Docker compost plugin для работы с Docker композо. Нажимаем Enter. Пошла установка. Ну, кстати, видишь, у меня поче не сработало. Видишь, может быть, не стоит пока что докер ставить. Давай пока поставим вот эти две команды запустим. То есть обновление гит просто поставим. А уже сейчас давайте попробуем поставить докер после того, как мы всё это успешно установили. Всё равно не работает. Странно, не может найти Docker compost plugги. Ладно, сейчас уточню, где я допустил. Скорее всего, какая-то опечатка у меня произошла, и вернусь к вам. Не знаю, рет конкретно в нашем случае докер не встал почему-то, хотя до этого мы в прошлом проекте также ставили на этот же сервер. Возможно, мы выбрали не ту версию бунта. Возможно, то есть если бы вы по прошлому видео делали, возможно, у вас такая штука всплыла, а вы такие типа вот А макси коробки. Так что разберём и такой кейс, когда из коробки не работает. Переходим на официальный сайт докера и копируем вот построчно выполняем вот эти действия. Я произвёл все эти действия и также выполняю нижнюю строчку уже для установки непосредственно. Вот она внизу находится. После этого, как видите, всё успешно поставилось, без каких-либо проблем. То есть, на самом деле, очень простая установка. Я даже долго не ждал. Там каждая строчка по миллисекунде активируется, так что вообще никакой проблемы в этом нету.

Теперь нам потребуется создать специальный ключ для подключения к нашему Гитхабу, потому что у нас приватный репозиторий, я напоминаю, да, иначе мы к нему доступ не получим. Для этого нужно выполнить специальную команду. В моём случае будет такая команда счкой, тот же тип ключа, и ваш email указывать по желанию. Нажимаем Enter. После того, как вы это всё выполнили, теперь нажимаем ещё раз Enter на уже эту команду для того, чтобы внести этот ключ. Как видите, вот он был успешно внесён. И далее мы его копируем через команду Cat. Нажимаем Enter. Вот наш ключ готов. Копируем. Нам потребуется для гитхаба. Далее переходим в наш репозиторий. Здесь ключевое. Я буду выставлять права именно к конкретному репозиторию давать права. То есть не ко всему аккаунту гита, а более правильно к, то есть к одному проекту конкретному. Настрочка проекта вверху settings. Deploy keys. Нажимаем добавить ключ. Далее вставляем сам ключ сюда. Пишем от чего это ключ. Я напишу select, чтобы было понятно. И нажимаем добавить ключ. Вот эту галочку не оставим, потому что пушинг нам не нужен. Нам нужно только получение. Отдача нам не нужна. Как видите, всё, сервер успешно, то есть ключ успешно был настроен. Также на всякий случай во избежании ошибок сделаем вот эти две строчки для того, чтобы добавить в безопасные хосты GitHub, с которым мы работаем как раз-таки. И можно запустить такую команду для теста, что у нас всё работает. Там нужно написать ваше имя на гитхабе.

Мы готовы клонировать наши репозитории. Пишем `git clone` и ссылочку нашего репозитора. Либо в формате https, обычная ссылка, либо в формате ssh. Ссылку можно получить либо из заданности строки, либо второй вариант через переходи репозитори сине синяя кнопка код нажимаете и выбираете SSH, к примеру, и вставляете сюда эту ссылку. Теперь с помощью команды `ls -l` можно посмотреть все наши папки. И вот мы видим, что Red Series папка появилась, проект установлен, то есть, точнее клонирован. Заходим в эту папку с помощью команды `cd Red Series` в моём случае. И далее выполняем команду по запуску нашего docker контейнера. `docker compose up build`. Я не указываю путь к файлу, потому что у нас один только файл. Если у вас будет другой файл, то вы пишите тире F и указываете доступ к конкретному файлу, а, ну, который вы хотите вызвать, потому что может быть prodдакшн-версия, может быть обычная версия. Build обязательно, потому что мы на продакшене и, чтобы у нас в фоне запустилось. Ждём сборку. Первая сборка будет долго происходить, последующей сборки будет максимально быстро происходить. Ну, и, как видите, рет наш проект успешно собрался. Теперь, если бы у нас было бы раз зелёный отдельно продакш один локалка, то мы бы выполнили такую команду, потом команду такую же, только сит наполнение и так далее, но у нас общий бэкэнд, не общий бэкэнд, общая база данных, прошу прощения. Если вам интересно посмотреть вариацию, где мы делали и то, и другое, и третье, и десятое, то есть где мы делали полный кфронт и базу отдельно, то это вот предыдущий проект, там этого больше. Но здесь вариация скм, там фронт сам по себе попроще, но там к посильнее. Ну, короче, вот у вас теперь есть на выборку два проекта, где вы можете посмотреть реализацию разного вида деплоев.

Теперь с помощью команды `docker compose ps` можно посмотреть, что у нас происходит в целом. Вот он наш процесс запущен, можно его тестировать. Тут всё максимально просто. Вставляем наш айпишник в адресную строчку, нажимаем Enter и вуаля, мы на сайте. Всё, успешно всё было задеплоено. Наш проект успешно работает. Вот если мы откроем что-нибудь, сейчас, он воспроизведётся. Ага, у нас формат не поддерживается. Ну вот, видишь, не получилось. А не, знаешь, что не получилось? Потому что мы с вами, помните, сделали этот вариацию, короче, этот, а, ну, короче, я уменьшил размер файла через этот, ээ, через какой-то там конвертатор, ну, вы поняли. И он, видимо, криво его сжал, и поэтому теперь формат не поддерживается. Короче, вам нужно будет залить новый видеофайл, но это не проблема, собственно. Вот просто другой видеофайл подберёте и и так далее. Это с этим, я думаю, вы точно справитесь. Всё, сайт задиплом полностью, он полностью работает. И теперь его можно запустить прямо вообще с любого устройства, и он будет работать.

И удобство облачного сервера в том, что вы платите только за используемые ресурсы. То есть тут всё очень гибко. Если ваш проект будет расти, то ресурсы можно будет увеличивать. Если нагрузка уменьшится, конфигурацию можно будет снизить. И все эти изменения занимают буквально считанные минуты. Также крутая возможность, если вам временно сервер уже не нужен, можно его просто взять и заморозить. И в этом случае будут оплачиваться только диски и публичные IP-адреса, а данные сохраняются, и instance, который останется, можно разморозить в любой момент. Ну, а если ваш проект стал крупнее, то в Select можно развернуть полноценную инфраструктуру. Есть более 50 различных совместных сервисов и продуктов. Всё это в одной экосистеме. И также всё это управляется в одной панели управления, которую мы с вами уже разобрали вот в этой вот консоли.

В итоге, ребят, что мы с вами в итоге? Разработали проект, протестировали его локально и и теперь уже развернули в облаке, то есть он доступен опять же в интернете. Теперь он работает стабильно и можно пользоваться 24x7. Ссылка на на панель управления Select я оставлю в описании. Там вы сможете развернуть свой проект. И спасибо большое компании Select за возможность выпуска данного видео и за реализацию такого крутого, красивого, шикарного и качественного проекта. Ну а с вас, ребят, лайк, комментарий, подписка на канал, подписка на Telegram-канал. До скорых встреч. Всем пока. Yeah.