Курс Javascript Fullstack разработчик: Урок 9
Оборачиваем в Docker-контейнеры бэкенд- и фронтенд приложения. Пока что только локально.
Приобрести ПОЛНЫЙ ДОСТУП к курсу:
https://makeweb.me/course-js-fullstack-developer
Телеграм для связи по курсу: http://t.me/makewebchatme
СОДЕРЖАНИЕ:
00:00 Начинаем оборачивать front, admin, seller и srv в Docker-контейнеры.
02:01 Подбираем Docker-образы для наших контейнеров. Собираем внутри docker-compose.yml сервис для srv.
05:30 Разбираемся, почему srv не работает.
08:24 Как зайти внутрь запущенного контейнера?
09:55 Использование внешнего Dockerfile вместе с docker-compose.
11:15 No left space on device: как очистить дисковое пространство? docker system prune
12:04 Чуть подробнее о механизме работы Docker (слои).
13:55 Пробуем сменить образ, чтобы решить проблему.
15:39 Как увеличить дисковое пространство, доступное Docker'у.
16:50 Проблема Invalid ELF Header - как решить?
18:04 Устанавливаем верный хост для подключения бэка к Postgres и Redis.
20:23 Тестируем работу бэк-контейнера. Создание .env.production специально для бэкенд-контейнера.
22:27 Контейнеризируем проекты front и admin. Не забываем про файл .dockerignore. .env.production для front.
22:00 Настраиваем /etc/hosts для перенаправления на localhost.
28:51 Пробуем обращаться к контейнеру по фактическому IP-адресу.
31:11 Оборачиваем admin в контейнер (по аналогии с front).
34:25 Проблема с отдачей статики через dev-сервер. Немного о схеме будущей работы.
35:35 Обзор того, что Докер создал для нашего проекта (имена и назначение).
39:00 Меняем название сети на более читаемое. Меняем название сервисов (опять же, для читабельности).
===
Вот список тех плейлистов с видео, на которые мы будем опираться:
NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT
React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D
Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml
Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6
DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99
===
GitHub-репозитории курса:
https://github.com/makewebme/mw-mp-front
https://github.com/makewebme/mw-mp-admin
https://github.com/makewebme/mw-mp-seller
https://github.com/makewebme/mw-mp-srv
Видео Курс Javascript Fullstack разработчик: Урок 9 канала MakeWeb.me
Приобрести ПОЛНЫЙ ДОСТУП к курсу:
https://makeweb.me/course-js-fullstack-developer
Телеграм для связи по курсу: http://t.me/makewebchatme
СОДЕРЖАНИЕ:
00:00 Начинаем оборачивать front, admin, seller и srv в Docker-контейнеры.
02:01 Подбираем Docker-образы для наших контейнеров. Собираем внутри docker-compose.yml сервис для srv.
05:30 Разбираемся, почему srv не работает.
08:24 Как зайти внутрь запущенного контейнера?
09:55 Использование внешнего Dockerfile вместе с docker-compose.
11:15 No left space on device: как очистить дисковое пространство? docker system prune
12:04 Чуть подробнее о механизме работы Docker (слои).
13:55 Пробуем сменить образ, чтобы решить проблему.
15:39 Как увеличить дисковое пространство, доступное Docker'у.
16:50 Проблема Invalid ELF Header - как решить?
18:04 Устанавливаем верный хост для подключения бэка к Postgres и Redis.
20:23 Тестируем работу бэк-контейнера. Создание .env.production специально для бэкенд-контейнера.
22:27 Контейнеризируем проекты front и admin. Не забываем про файл .dockerignore. .env.production для front.
22:00 Настраиваем /etc/hosts для перенаправления на localhost.
28:51 Пробуем обращаться к контейнеру по фактическому IP-адресу.
31:11 Оборачиваем admin в контейнер (по аналогии с front).
34:25 Проблема с отдачей статики через dev-сервер. Немного о схеме будущей работы.
35:35 Обзор того, что Докер создал для нашего проекта (имена и назначение).
39:00 Меняем название сети на более читаемое. Меняем название сервисов (опять же, для читабельности).
===
Вот список тех плейлистов с видео, на которые мы будем опираться:
NestJS https://www.youtube.com/playlist?list=PLvWwA9iDlhHAhfM4Ttcx_RcU266xz9OcT
React + CRA https://www.youtube.com/playlist?list=PLvWwA9iDlhHBQ6razvwomGcUIfQm4fk6D
Базовая верстка https://www.youtube.com/playlist?list=PLvWwA9iDlhHBJG9zvHiGIbVfcVEDrPRml
Git https://www.youtube.com/playlist?list=PLvWwA9iDlhHDtvzgqGvCYn9R4swacElD6
DevTools Chrome https://www.youtube.com/playlist?list=PLvWwA9iDlhHA4kzfpRbu2cH-Z2ss6tB99
===
GitHub-репозитории курса:
https://github.com/makewebme/mw-mp-front
https://github.com/makewebme/mw-mp-admin
https://github.com/makewebme/mw-mp-seller
https://github.com/makewebme/mw-mp-srv
Видео Курс Javascript Fullstack разработчик: Урок 9 канала MakeWeb.me
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![React-хук useAsync: упрости свои запросы](https://i.ytimg.com/vi/4YtfzRYGsHU/default.jpg)
![Курс NestJS (#6): модули и middleware](https://i.ytimg.com/vi/IK7RQIWuD0g/default.jpg)
![Курс Javascript Fullstack разработчик: Урок 4](https://i.ytimg.com/vi/rFDrBWV2Nfs/default.jpg)
![Курс по Ant Design. Урок #3](https://i.ytimg.com/vi/SCUYomxU6GI/default.jpg)
![Курс NestJS (#5): контроллеры, провайдеры, Inversion of Control и Dependency Injection](https://i.ytimg.com/vi/tusk5g7h-2M/default.jpg)
![Курс NestJS (#4): заканчиваем CRUD для юзера, валидируем](https://i.ytimg.com/vi/BWyFr5FvxyM/default.jpg)
![Курс Javascript Fullstack разработчик: Урок 1](https://i.ytimg.com/vi/Mz7s_wOdk6s/default.jpg)
![Курс NestJS (#3): продолжаем делать CRUD для сущности User](https://i.ytimg.com/vi/tn-Mreq8LNE/default.jpg)
![Курс NestJS (#2): настройка Docker, подключение к БД, создаём сущность User](https://i.ytimg.com/vi/-aCaTMua8Xg/default.jpg)
![Курс NestJS (#1): введение в тему, установка, разбор стандартных файлов](https://i.ytimg.com/vi/Ye9WRlYIePE/default.jpg)
![Javascript Fullstack: кто такой и как им стать?](https://i.ytimg.com/vi/oSU367_2gH0/default.jpg)
![Event Loop в JS: почти всё про его работу (ЧАСТЬ 2)](https://i.ytimg.com/vi/M7WpAbG0rAA/default.jpg)
![Event Loop в JS: почти всё про его работу (ЧАСТЬ 1)](https://i.ytimg.com/vi/6XyifyzmSMM/default.jpg)
![Рекурсия, древовидная структура и drag-n-drop на примере реального React-компонента](https://i.ytimg.com/vi/p2SHwGN8TAM/default.jpg)
![Ликбез по Photoshop для веб-разработчика (ЧАСТЬ 1)](https://i.ytimg.com/vi/PSsh94jtNoM/default.jpg)
![Курс по Ant Design. Урок #2](https://i.ytimg.com/vi/y8uDEg6wSDg/default.jpg)
![Сахарный синтаксис языка C#](https://i.ytimg.com/vi/lBzXKsB7MOY/default.jpg)
![Курс по Ant Design. Урок #1](https://i.ytimg.com/vi/Cn6r2NwMTSI/default.jpg)
![Технология верстки 2021: создание простого лендинга (часть 9)](https://i.ytimg.com/vi/cClZ3liNdTg/default.jpg)
![Технология верстки 2021: создание простого лендинга (часть 8)](https://i.ytimg.com/vi/ot92PnoaUfs/default.jpg)