Описание

Описание:

Не важно кто вы: frontend или backend разработчик, но когда вы закончили локальную разработку приложения и хотите показать его людям, возникает вопрос: “А как правильно это сделать?”

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

Возможно вы что-то слышали про Docker и про то, что он может помочь в решении этой задачи. Но как правильно организовать ваше приложение, чтобы вы могли иметь сразу 2 сборки:

• Для комфортной разработки с Hot Reloading
• Максимально сжатую и оптимизированную, которая висит на удаленном сервере

Этот практикум как раз про это. Не важно на чем вы пишите: React, Angular, Vue, NodeJS, другие. Данный алгоритм сборки с Docker подходит для любых этих технологий.

Программа курса:

1. Настройка MongoDB

Если вы до этого устанавливали MongoDB локально у себя на компьютере, то у меня для вас хорошие новости. Это можно сделать за 30 секунд с помощью Docker’а и это как раз то, чем мы займемся в этой части.
Mongo будет в отдельном контейнере, с которым NodeJS будет общаться.

2. Docker контейнер для Node JS

Базу данных настроили, теперь следующий шаг.
Приложение состоит из 3х строительных блоков: база данных, сервер, клиент.
В этом блоке мы положим сервер в Docker контейнер.
Однако серверу очень важно уметь общаться с базой данных, а она уже лежит в отдельном контейнере. Наша задача научить общаться два изолированных контейнера между собой.
В этом блоке я покажу первый самый простой способ это реализовать.

3. Docker контейнер для React

Контейнеры для БД и сервера готовы, остался клиент. Его необходимо поместить в свой собственный контейнер и научить общаться с сервером.
Клиентом является SPA приложение, написанное на React. При генерации я использовал create-react-app.
React в данном случае является отличным примером, так как все принципы, которые я покажу в этом блоке будут работать для любой JS технологии: Vue, Angular, Svelte и другие.

4. Учим контейнеры общаться

На текущем этапе наше приложение представляет из себя 3 независимых контейнера, которые связаны через внутреннюю сеть Docker.
Тут я расскажу, что такое Docker Network и как с помощью этого инструмента сделать общение между контейнерами более универсальным.
В итоге у нас будет одна общая сеть для каждого из контейнера. Это необходимый шаг, перед следующей темой.

5. Оптимизация с Docker Compose

Сейчас мы запускаем приложение с помощью трех команд:

– Контейнер с MongoDB
– Контейнер c NodeJS
– Контейнер с React

Каждая из команд содержит в себе много разных параметров и этим не удобно управлять.
Время это упростить с помощью Docker Compose.
В этом блоке узнаете, как в одном yml файле сделать управление приложением с **множеством контейнеров по настоящему простым.

6. Создаем сборку для разработки

Контейнеры готовы, система оптимизирована.
Но что если вы хотите продолжать разработку и сразу же видеть изменения в запущенных контейнерах?
Для этого нужно реализовать 2 условия:

– На клиенте работает Hot Reloading
– На сервере работает nodemon

Со стороны Docker важно настроить систему, которая будет видеть локальные изменения и динамически обновлять код в контейнерах.
Данный блок про это. В итоге у вас будет полностью готовая сборка для Fullstack приложения для разработки.

7. Создаем сборку для публикации

Чем сборка для разработки отличается от публикации (продакшн)?
Продакшн сборка должна быть максимально оптимизирована: отсутствуют лишние файлы (например source maps), весь код минифицирован.
Со стороны Docker используются максимально эффективные образы.
Еще с клиентом не так все очевидно. Так как он в отдельном контейнере, то нужно что-то, что запустит его на сервере.
Для этого я покажу, как с помощью Docker мы сможем сделать создание образа из нескольких шагов:

– Соберем продашкн билд для React
– Создадим web-сервер на NGINX и настроим его для запуска клиента

8. Заливаем приложение на VPS

Когда сделано 2 билда, приложение готово к публикации.
Так как мы использовали Docker, то существует множество способов запустить контейнеры на удаленном сервере. Я покажу три возможные стратегии. Реализацию одной покажу.
План на данный блок:

– Купим и настроим VPS для работы с Docker
– Настроим SSH для работы и передачи файлов
– Запустим на удаленном сервере приложение

Еще раз кратко: что внутри?

• Docker Network
• MongoDB
• Nginx
• SSH
• NodeJS
• Docker Compose
• React
• VPS
• CORS
• YML

Бонусы

1. Все инструкции практикума. Приложу PDF файл, где будет описан полностью весь алгоритм и все команды, которые будут использоваться в практикуме.

2. Создание MERN приложения. Видео, где вы увидите процесс создания MERN приложения для практикума. Я записал процесс создания приложения с нуля, без подготовки, с элементами проектировки. Приятное дополнение в виде Life Coding под музыку.

3. Курс по Docker с нуля. К практикуму я так же приложу свой полный курс по Docker.
В нем вы с нуля сможете узнать, что такое Docker, как им пользоваться и комфортно перейти к контенту практикума.