- Видео 197
- Просмотров 1 098 837
MakeWeb.me
Россия
Добавлен 16 авг 2015
MakeWeb.me это проект для тех, кого интересует веб-разработка и мир IT.
Мы делаем обучающие ролики на актуальные темы в этой области и проводим онлайн-стримы.
Кроме того, есть возможность получить персональные уроки по веб-разработке и получить ответы на вопросы по выбранной теме.
Подробности здесь: makeweb.me/lessons-video
Мы делаем обучающие ролики на актуальные темы в этой области и проводим онлайн-стримы.
Кроме того, есть возможность получить персональные уроки по веб-разработке и получить ответы на вопросы по выбранной теме.
Подробности здесь: makeweb.me/lessons-video
Как я Docker'изовал сайт на Next.js + сделал CI/CD
Показываю реальный кейс автоматизации сайта. Завернул в докер сайт на Next.js/MySQL с сервером на базе nginx и отдачей статики напрямую через этот nginx, минуя Next.js.
СОДЕРЖАНИЕ:
00:00 Об исходном проекте и его проблемах. Постановка задачи.
05:10 Как я стягивал файлы и БД со старой VPS'ки. Утилиты zip, scp, mysqldump.
08:31 Локальный docker-compose.yml: как устроен? Проверяем Adminer.
12:43 Минимальные характеристики VPS и его настройка: ssh, authorized_keyz, rivate/public keys
15:44 Общая схема развёртывания проекта, страницы Github Actions
17:47 Разбираем Github Workflow prod.yml
21:40 Разбираем Dockerfile.prod
24:28 Разбираем docker-compose-prod.yml
25:52 Подробнее про настройку nginx на проде...
СОДЕРЖАНИЕ:
00:00 Об исходном проекте и его проблемах. Постановка задачи.
05:10 Как я стягивал файлы и БД со старой VPS'ки. Утилиты zip, scp, mysqldump.
08:31 Локальный docker-compose.yml: как устроен? Проверяем Adminer.
12:43 Минимальные характеристики VPS и его настройка: ssh, authorized_keyz, rivate/public keys
15:44 Общая схема развёртывания проекта, страницы Github Actions
17:47 Разбираем Github Workflow prod.yml
21:40 Разбираем Dockerfile.prod
24:28 Разбираем docker-compose-prod.yml
25:52 Подробнее про настройку nginx на проде...
Просмотров: 1 629
Видео
Курс Javascript Fullstack разработчик: Урок 11
Просмотров 3083 месяца назад
Меняем отдачу статики фронта с дев-серверов на NGINX. СОДЕРЖАНИЕ: 00:00 Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS ruclips.net/p/PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React CRA ruclips.net/p/PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка ruclips.net/p/PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git ruclips.net/p/PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome ruclips.ne...
Курс Javascript Fullstack разработчик: Урок 8
Просмотров 2143 месяца назад
Поднимаем админ-панель и разбираемся с Guard'ами. СОДЕРЖАНИЕ: 00:00 Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS ruclips.net/p/PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React CRA ruclips.net/p/PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка ruclips.net/p/PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git ruclips.net/p/PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome ruclips.net/p/...
Курс Javascript Fullstack разработчик: Урок 7
Просмотров 4043 месяца назад
Реализуем JWT-авторизацию на бэкенде. СОДЕРЖАНИЕ: 00:00 Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS ruclips.net/p/PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React CRA ruclips.net/p/PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка ruclips.net/p/PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git ruclips.net/p/PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6 DevTools Chrome ruclips.net/p/PLvWwA9iDlhH...
Курс Javascript Fullstack разработчик: Урок 6
Просмотров 2963 месяца назад
Оптимизируем типизацию стора. Разбираемся глубже в Редаксе и миддлваре redux-thunk. Разбираем принцип работы JWT-токенов. Начинаем пилить авторизацию пользователей. СОДЕРЖАНИЕ: 00:00 Делаем деталку товара 03:31 Немного оптимизируем типизацию Redux. Чистим сборку с помощью import type. 12:31 Разбираем схему работы Redux без middleware thunk и с ним 16:56 Авторизаця по JWT: что такое и как работа...
Курс Javascript Fullstack разработчик: Урок 5
Просмотров 3094 месяца назад
Подключаем фронт к бэку, запрашиваем товары и делаем универсальный хелпер запроса. СОДЕРЖАНИЕ: 00:00 Меняем порты бэка и фронта 01:28 Забираем список продуктов с бэкенда 03:35 Решаем проблемы с CORS 06:48 Выводим продукты с бэка в UI 08:44 Отдаём статику с бэка (картинки) 14:36 Разбираем хелпер-метод универсального запроса 22:20 Решаем проблемы с TS-типизацией Вот список тех плейлистов с видео,...
Курс Javascript Fullstack разработчик: Урок 3
Просмотров 4264 месяца назад
Работаем над хедером, избранным и деталкой товара Приобрести ПОЛНЫЙ ДОСТУП к курсу: makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: t.me/makewebchatme Плейлист со всеми видео курса: ruclips.net/p/PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt В этом уроке далаем функционал добавления товара в избранное, страницу избранного и деталку товара. СОДЕРЖАНИЕ: 00:00 Рассматриваем верстку и ло...
Docker для полных новичков
Просмотров 2,3 тыс.4 месяца назад
Этот ролик про Docker простыми словами. СОДЕРЖАНИЕ: 00:00:00 Введение. План действий. 00:01:18 Что такое Docker, зачем нужен и чем отличается от виртуальной машины 00:05:05 Разбираем GUI Docker Desktop. Чем контейнер отличается от образа (image)? Что такое volume? 00:09:24 Настройки докера в GUI 00:10:25 Пробуем запустить первый контейнер из интерфейса. Наблюдаем за файловой системой контейнера...
VPS/VDS: инструкция для новичка (2023)
Просмотров 5 тыс.6 месяцев назад
Это видео представляет собой подробную инструкцию по тому, как выполнять базовые операции с виртуальным приватным/выделенным сервером (Virtual Private/Dedicated Server, VPS/VDS). Рассказано про то, как создать VPS, про базовые команды консоли и установку типового ПО на сервер. 🛍 🛍 🛍 Спринтбокс - сверхмощные VDS на суперскоростях! sprintbox.ru/c5233 Промокод на кешбэк 50%: MAKEWEBME 🛍 🛍 🛍 СОДЕРЖ...
Курс Javascript Fullstack разработчик: Урок 2
Просмотров 6797 месяцев назад
Верстаем общий layout и компоненты. Настраиваем и разбираемся с Redux Toolkit Приобрести ПОЛНЫЙ ДОСТУП к курсу: makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: t.me/makewebchatme Плейлист со всеми видео курса: ruclips.net/p/PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt СОДЕРЖАНИЕ: 00:00 Футер, хедер и основная область, общий layout 02:57 Про цвета, React.Fragment, глобальные стили пр...
Автодеплой на VPS на минималках (Next.js, GitHub Actions)
Просмотров 1,2 тыс.7 месяцев назад
В этом ролике рассказываю про то, как с помощью GitHub Actions быстро организовать автоматический деплой (развёртывание) проекта в простейшем варианте, без Docker-контейнеров. 00:00 Вступление и описание задачи, схема работы 01:15 Поднимаем локально проект на NextJS 02:50 Создаём репозиторий и пушим его в GitHub 04:57 Создаём GitHub YML Workflow-файл. Как он работает? 08:04 Добавляем GitHub Act...
Как работают сайты?
Просмотров 5397 месяцев назад
В этом видео, в общих чертах, для новичков, разъясняется схема работы любого сайта в интернете от момента ввода адреса в строку браузера и до отображаения готовой страницы. СОДЕРЖАНИЕ: 00:00 Система DNS 04:00 Где располагаются файлы сайтов? Общая схема работы PHP-движка WordPress. 09:19 Типы ресурсов сайта и их подгрузка. HTML, CSS, JS и другие. 18:20 Ресурсы не всегда "мэтчатся" на структуру п...
Курс Javascript Fullstack разработчик: Урок 10
Просмотров 71Год назад
Переводим роутинг к нашим Docker-контейнерам на веб-сервер NGINX. Пока всё ещё работаем на локальной машине. СОДЕРЖАНИЕ: 00:00 Вот список тех плейлистов с видео, на которые мы будем опираться: NestJS ruclips.net/p/PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT React CRA ruclips.net/p/PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D Базовая верстка ruclips.net/p/PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml Git ruclips.net/p/PLvWwA...
Курс Javascript Fullstack разработчик: Урок 9
Просмотров 994Год назад
Оборачиваем в Docker-контейнеры бэкенд- и фронтенд приложения. Пока что только локально. Приобрести ПОЛНЫЙ ДОСТУП к курсу: makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: t.me/makewebchatme Плейлист со всеми видео курса: ruclips.net/p/PLvWwA9iDlhHAlfaUsPlITn4j-VeLZlcWt СОДЕРЖАНИЕ: 00:00 Начинаем оборачивать front, admin, seller и srv в Docker-контейнеры. 02:01 Подбираем Do...
React-хук useAsync: упрости свои запросы
Просмотров 1,7 тыс.Год назад
Разбираем работу хука useAsync для упрощения запросов в вашем React-приложении. github.com/makewebme/react-hooks/tree/master/useAsync ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: makeweb.me/course-js-fullstack-developer Телеграм для связи по курсу: @makewebchatme 🛍 🛍 🛍 Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru. Промо...
Курс NestJS (#6): модули и middleware
Просмотров 2,3 тыс.Год назад
Курс NestJS (#6): модули и middleware
Курс Javascript Fullstack разработчик: Урок 4
Просмотров 1 тыс.Год назад
Курс Javascript Fullstack разработчик: Урок 4
Курс NestJS (#5): контроллеры, провайдеры, Inversion of Control и Dependency Injection
Просмотров 2,2 тыс.Год назад
Курс NestJS (#5): контроллеры, провайдеры, Inversion of Control и Dependency Injection
Курс NestJS (#4): заканчиваем CRUD для юзера, валидируем
Просмотров 1,9 тыс.Год назад
Курс NestJS (#4): заканчиваем CRUD для юзера, валидируем
Курс Javascript Fullstack разработчик: Урок 1
Просмотров 6 тыс.Год назад
Курс Javascript Fullstack разработчик: Урок 1
Курс NestJS (#3): продолжаем делать CRUD для сущности User
Просмотров 3,4 тыс.Год назад
Курс NestJS (#3): продолжаем делать CRUD для сущности User
Курс NestJS (#2): настройка Docker, подключение к БД, создаём сущность User
Просмотров 7 тыс.Год назад
Курс NestJS (#2): настройка Docker, подключение к БД, создаём сущность User
Курс NestJS (#1): введение в тему, установка, разбор стандартных файлов
Просмотров 11 тыс.Год назад
Курс NestJS (#1): введение в тему, установка, разбор стандартных файлов
Javascript Fullstack: кто такой и как им стать?
Просмотров 1,3 тыс.Год назад
Javascript Fullstack: кто такой и как им стать?
Event Loop в JS: почти всё про его работу (ЧАСТЬ 2)
Просмотров 4,1 тыс.Год назад
Event Loop в JS: почти всё про его работу (ЧАСТЬ 2)
Event Loop в JS: почти всё про его работу (ЧАСТЬ 1)
Просмотров 10 тыс.Год назад
Event Loop в JS: почти всё про его работу (ЧАСТЬ 1)
Рекурсия, древовидная структура и drag-n-drop на примере реального React-компонента
Просмотров 3,3 тыс.2 года назад
Рекурсия, древовидная структура и drag-n-drop на примере реального React-компонента
Ликбез по Photoshop для веб-разработчика (ЧАСТЬ 1)
Просмотров 5522 года назад
Ликбез по Photoshop для веб-разработчика (ЧАСТЬ 1)
В номере версии третья часть - это не номер билда, она называется "патч" (patch). См. "Семантическое версионирование".
Ну как же так быстро со styled component перейти на react-router-dom и показать когда уже всё написал... Без претензий, но я потерялся 😅
Все объяснили шикарна спасибо 😊
Флаг "--save" уже не обязательно прописывать, т.к. после npm5 он добавляется по умолчанию
Было бы круто послушать про docker compose, как правильно конфигурировать апп с бд в контейнере, а также как делать миграции
Hirez Studio , вот уж не ожидал увидеть ролик про сайт Айдена
Знакомое название сайта одного блогера))
В своё время очень помог этот канал. Новички посмотрите видео с канала, даже старые. 👍
Хотелось бы увидеть сборку dev и production контейнеров
Поясни подробнее, что ты имеешь ввиду?
@@MakewebMeOfficial есть продакшн сайт, у него сборка в версию main. Есть девелопмент сайт, у него сборка в версию dev. Помимо разных веток у них разные env с урлами для апи, например.
Советую посмотреть официальный докер файл для сборки nextJS
-d это не "demon" а "detached"
Привет, спасибо за видео. Если сделаешь видео про SSR будет отлично.
я верно понимаю, что курс выкладывается полностью частями и итоговый проект находится на гитхабе?
Увидел, прошу прощения
А куда 9 и 10 часть подевалась?))
почему left = -1? равзе он не начнет с конца массива?? так же как и arr.length
тоже не понял почему -1, а не 0
Хорошая инструкция, только зачем то мусор типа ларавела поставил. Тогда уж ставил бы панель управления и всё было бы в разы проще.
Курси уже не потрібні, чат джпт краще будь-якого ментора
спасибо за курс, очень круто
Ништяш
а остальные видео цикла, будут ? =) спасибо за видео
Посмотрев видео понял - буду использовать Хостинг, а не VPS ) Спасибо за видео.
там пароль вставляется скрытно вызовом менюшки ВСТАВИТЬ правой кнопки мышки. После этого -ENTER. я так делаю
Я так и не понял как сохранить файл на сервере в нужную папку
Здравствуйте, а я не очень понимаю какая в итоге получится сложность последней функции? Я так понимаю О(N*logN) - это сложность встроенного метода sort и О(logN) это сложность бинарного поиска, опустив ее получается можем сказать, что общая сложность - О(N*logN) ?
Валидатор не заработал пока не добавил его в провайдеры модуля. В видео это не указано. Так же без декоратора @IsOptional передать не все поля не получится, поле остается undefined валидатор ругается must be string и тд
Только сегодня загрузил свое приложение на сервер и столкнулся с проблемой CORS.
Привет. Меня интересует сервер для запуска и работы в .exe программе. Есть ли у тебя видео где ты показываешь как это сделать? Просто зайти в вирт.сервер и запустить программу? Потому что посмотрев несколько твоих уроков, я честно говоря не увидел того, что мне надо. Мне просто надо запустить программу в работу, и все
Не для новичков это точно. Так быстро рассказываешь, что опидареть можно. И сразу понятно, что мало что понятно. Ебал дремал спасибо!
Очень крутой хак использовать дебагер. Намного удобнее чем console.log. Можно поставить break point и трекать нужные переменные.
Спасибо!👍 Прекрасное видео где все отлично разжевано по докеру! Ждем продолжения обязательно! 💪
Будет ли docker compose с vite или next в планах?
Спасибо за труд! Очень полезно! Узнаю много нового! 👍👍👍
отличное видео
как можно посмотреть скачанное видео через браузер хром?
Вообще на будущее прошу учесть, что новички еще на мак не заработали (или не считают нужным покупать), а если считают себя достаточно умными и сидят на линуксе - то сами способны разбираться с проблемами. Поэтому прошу учитывать это и делать видео кроссплатформенными
Для винды нет докера. Раньше он работал через VirtualBox, сейчас - через WSL. С линуксом в любом случае разбираться придётся.
@@Christopher_Holloway в последние пару лет на 10й нормально уже работает. Я сделал как хотел на Винде в итоге, все реально
@@Christopher_Hollowayуже давно есть
@@RamaRama-qv3jo ты сам придумал? Скинь ссылку если есть. Просто само ядро докера есть только для линукса.
нихрена не понимаю как это сделать на виндовз, уже мучат чат гпт, это лучшее что он выдал, но все равно не работает "docker:run": "docker run -d --mount source=$(npm run getPath)/,target=/app,type=bind -p 5000:3000 test", "getPath": "npm run --silent getRealPath", "getRealPath": "node -e \"process.stdout.write(process.cwd())\"", почему я хочу сделать адрес динамичным - потому что в реальном приложении, код будут запускать разные люди, и на разных платформах, и с разным путем папок, если каждый будет у себя менять этот файл, это будет снижать скороть разработки и онбоардинга.
для виндовзеров CMD ["nodemon", "-L", "your_file_here"]
Спасибо! Хорошее видео. Можете ci/cd еще показать с докером?
Мое глубочайшее почтение!
дикая математика :D
Очень качественный материал, и это видео в частности! Спасибо!
не очень понял, как может получиться при 12 ступеньках 927 вариантов? Оо я рассуждал так... 1 ступеньки - 1 вариант 2 ступеньки - 2 варианта 3 ступеньки - 3 варианта 4 ступеньки - 5 вариантов 5 ступенек - 8 вариантов .... 12 ступенек - 233 логика у меня была такая, что закономерностью тут является следующее , что количество вариантов на след. ступеньке равно сумме количества вариантов на прошлых двух. Что то вроде чисел Фиббоначи, только без нулей И кстати , как понять "если у лестницы НОЛЬ ступенек"? и "если у лестницы ОТРИЦАТЕЛЬНОЕ количество ступенек"?Оо Может как то менее запутаннее можно было это всё объяснить?
Надо дерево рекурсии рисовать чтобы всё это понимать
Спасибо! Не хотите записать полное видео про деплой приложения? С https, staging и прочее
Благодарю - возможно такое видео выйдет
Речь автора умело построена, проста, точна и профессиональна. Получаю эстетическое удовольствие. Автор молодец! Всяческих Вам успехов!
То чувство когда 20 лет занимаешься виндой, и последние пару лет пытаешься изучать линукс. )))) В первой половине видео все очень понятно и доходчиво рассказано, а вот во второй начинается то, из-за чего у меня чуть мозг не лопнул (зря я наверное смотрел на ускорении 1,5 :)) ). Все же порог для входа в линукс слишком высок - терминал для новичков темный лес.
При этом за 20 лет особо и устройство винды не знаешь, кроме визуального интерфейса, где можно тыкать мышкой
Я вас спешу обрадовать. В Линуксе тоже можно рабочий стол поставить и все это то что он делал можно частично делать через панели типо ispmanager и прочее. В ручную так никто не настраивает в реальности, потому что легко накосячить и сбить работу всего сервера и всех сайтов. Через ispmanager там конфиг настроить сможет любой, в ручную не советую так делать, потому что у любого сайта нужно помимо порта, индексной страницы, страницы ошибок и прочего настроить кэширование и сжатие.
что за гениальная мысль описывать интерфейс начиная с I, а тип начиная с T это лишь читаемость убивает. допустим есть тип User, так какой смысл делать IUser или TUser?
чтобы мнемонически было понятно что это интерфейс или тип, а не компонент или еще чего
какой еще компонент? где ты тут компонент User увидел? @@romanalexandrov7570
@romanalexandrov7570 ответил на этот вопрос, причем в самое последнее время я принял подход, в котором и интерфейсы и типы прификсятся одинаково - T_.. от слова type. Так проще, потому что при смене interface на type не нужно делать поиск и замену. Плюс, с такими префиксами проще делать замены по всему коду - меньше шанс зацепить что-то не то.
хз как можно перепутать компонент с типом, и зачем вообще нужны интерфейсы если есть type? @@MakewebMeOfficial
Интерфейс, конечно, своеобразный у хостинга этого
А на этом хостинге есть VPS вне СНГ? Я имею ввиду выбор локации. А то в разделе о компании указан только российский датацентр.
Хороший вопрос - можно в техподдержке уточнить у них. Но скорее всего - только российские.
Спасибо за информацию. Было бы интересно посмотреть процесс настройки через https.