Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>19 янв 2023</li>

3 <li>0</li>

4 </ul><h2>Что такое контейнер? Объясняем простыми словами</h2>

5 Заходят как-то в бар дизайнер и айтишник, а джун их спрашивает: "И как это понимать?"

6 Иллюстрация: Оля Ежак для Skillbox Media

7 Контейнер - это термин, который встречается и в дизайне, и в айти. Он означает одно и то же? Или в каждой области подразумевается своё значение?

8 Простыми словами объясняют, что значит "контейнер", эксперт в дизайне Алексей Нибо и эксперт в разработке Егор Яковишен.

9 Дизайн-директор "<a>Атвинты</a>", эксперт курсов по UX/UI-дизайну.

10 Если рассматривать понятие в общем, то контейнер - это элемент, который содержит в себе что-то ещё. Подумайте о коробке, в которую вы можете положить разные предметы. Так же и контейнер представляет собой некий "бокс" - в нём дизайнер тоже размещает объекты, только всё это происходит в контексте интерфейса.

11 Изображение:<a>freepik</a>В контейнере могут находиться любые компоненты:

12 <ul><li>текст,</li>

13 <li>изображения,</li>

14 <li>таблицы,</li>

15 <li>карточки и так далее.</li>

16 </ul>Контейнеры на макете сайта: невидимые - когда границы явно не очерчены, видимые - с чёткими границами: изображение, фон, рамкаИзображение: "Атвинта"Наполнение "бокса" может состоять из одного компонента или нескольких. Например, только текста, или текста с изображением, или любых других комбинаций.

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

18 Прототип и макет карточки с изображением в каталогеИзображение: "Атвинта"1.Страница сайта или приложения - это вообще большой контейнер, внутри которого дизайнер может создать более мелкие контейнеры, чтобывыстроить задуманную композицию.

19 Особенно это актуально для элементов, которые трудно подстроить под общую сетку проекта. Внутри контейнера можно создать свою маленькую экосистему и задать нужные параметры для его собственной сетки.

20 Сетки на прототипе сайта курортаИзображение: "Атвинта"Например, если дизайнеру нужны дополнительные столбцы, чтобы разместить и выстроить сложный или детализированный контент (таблицы, инфографику), то можно добавить внутрь ещё одну модульную сетку и размещать объекты уже по ней.

21 Сетки на макетах образовательной платформыИзображение: "Атвинта"Сетки на макетах образовательной платформыИзображение: "Атвинта"2.Контейнеры помогаютрасставить акценты. Например, часто в вёрстке текста под цитаты создают отдельный блок, чтобы выделить экспертное мнение.

22 В этом случае дизайнер может разместить внутри контейнера:

23 <ul><li>символ кавычек;</li>

24 <li>рамку, в которой будет находиться текст;</li>

25 <li>текст с более крупным шрифтом;</li>

26 <li>изображение с фотографией спикера;</li>

27 <li>должность и имя;</li>

28 <li>акцентный фон.</li>

29 </ul>Оформление цитаты в блоге "Атвинты"Скриншот: "Атвинта"3.Также инструмент пригодится, чтобы отделить один тип информации от другой и сделать интерфейс более структурированным.

30 Такое хорошо видно на примере дашбордов.

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

32 Использование контейнеров на дашбордахИзображение: "Атвинта"Использование контейнеров на дашбордахИзображение: "Атвинта"Итог: зачем дизайнеру контейнеры?

33 Благодаря контейнеру у дизайнера меньше ограничений: с его помощью можно реализовать любую композицию, расставить акценты, отделить разные виды информации и задать параметры контента для фронтендера, который будет собирать макет.

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

35 Процесс создания контейнера на прототипе сайта курортаВидео: "Атвинта"В Figma и других графических программах область контейнера намечают как простую геометрическую фигуру. Дизайнер может задать любую форму, но, как правило, это прямоугольник, внутри которого размещаются объекты.

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

37 Маша ??‍?:Вася, а ты задеплоил уже? Что-то на стейджинге белый экран :(

38 Вася ?‍?:Странно, у меня локально всё работает… Сейчас посмотрю.

39 […]

40 Вася ?‍?:Я посмотрел, там версия ноды старая, надо обновить.

41 Маша ??‍?:Эх, давно пора всё в контейнеры завернуть…

42 Знакомая ситуация?

43 Часто это происходит из-за того, что на компьютере разработчика и на сервере разные параметрыокружения. Объясню, что это такое и как контейнеры помогают избегать подобных проблем.

44 Код никогда не работает сам по себе, он всегда выполняется в определённом окружении (environment). Как правило, окружение - это либокомпьютер разработчика, на котором он пишет и отлаживает код, либосервер, на котором этот код запускается. Чтобы код работал везде корректно и одинаково, необходимо настроить все эти окружения единообразно.

45 Из чего состоит окружение?

46 -Операционная система.Разработчики часто используют Windows или macOS, а серверы обычно работают на различных версиях Linux.

47 - Среда выполнения (runtime environment)используемого языка программирования - Python, Node.js, Go, PHP и др. Когда вы пишете команды вроде python my_script.py или node main.js, ваш скрипт запускается в среде выполнения.

48 -Необходимые библиотеки. Они нужны приложению для работы с сетью, графикой, видео, аудио, шифрованием и другими системными возможностями.

49 -Конфигурационные файлы и настройки системы.

50 -Другие приложения, которые должны быть запущены и доступны. Например, веб‑серверы (nginx), базы данных (PostgreSQL, MongoDB), системы обмена сообщениями (RabbitMQ, Kafka) и прочие.

51 Составные части окружения называютсязависимостями(dependencies).

52 Важно:значение имеет не только наличие конкретных зависимостей, но и их версии. Например, если на одном компьютере установлена Node.js 16-й версии, а на другом - 18-й, то код может работать неправильно или не запуститься вообще.

53 Но даже если настроить всё правильно один раз, надолго этого не хватит:

54 <ul><li>В команду придут новые разработчики, и им нужно будет подготовить рабочую среду.</li>

55 <li>Появятся важные обновления операционной системы или библиотек, которые нужно будет установить везде.</li>

56 <li>С ростом количества пользователей продукта возникнет потребность в новых серверах.</li>

57 </ul>Вручную следить за конфигурацией постоянно увеличивающегося и меняющегося зоопарка окружений становится очень тяжело.

58 И тут на помощь приходят контейнеры.

59 Контейнеры в разработке - это способ "упаковать" свой код вместе со всеми его зависимостями в единую изолированную среду. Контейнер можно передать другому разработчику или запустить на сервере - и он будет воспроизведён с точно такой же конфигурацией, с которой был создан.

60 Самый популярный инструмент для создания и запуска контейнеров -<a>Docker</a>.

61 Давайте рассмотрим пример жизненного цикла контейнера.

62 Всё начинается с того, что мы берём существующее приложение и описываем конфигурацию контейнера для него. В Docker для этого есть специальный файл под названием Dockerfile, который хранится вместе с кодом проекта.

63 Вот пример Dockerfile для веб-приложения на Node.js:

64 # Берём за основу образ Node.js версии 18

65 FROM node:18

66 # Устанавливаем /app как рабочую директорию

67 WORKDIR /app

68 # Копируем файлы package.json и package-lock.json из кода проекта

69 COPY package*.json ./

70 # Устанавливаем зависимости

71 RUN npm install

72 # Копируем остальной код приложения

73 COPY . .

74 # Открываем порт 3000 внутри контейнера

75 EXPOSE 3000

76 # Запускаем приложение

77 CMD [ "npm", "start" ]

78 Когда Dockerfile подготовлен, из него мы можем создать образ контейнера с помощью следующей команды:

79 Теперь у нас есть образ контейнера под названием myapp. Это ещё не сам контейнер, а шаблон, из которого мы можем запустить какое угодно количество контейнеров.

80 Запустим контейнер из только что созданного образа:

81 docker run -p 80:3000 myapp

82 Ура, контейнер запущен! Обратите внимание на параметр -p 80:3000. Он позволяет перенаправить обращения с порта 80 хост-машины на порт 3000 внутри контейнера. Таким образом, приложение сможет отвечать на HTTP-запросы, которые приходят извне.

83 После запуска мы можем наблюдать за логами внутри контейнера (команда docker logs), а также заходить внутрь контейнера через терминал (команда docker attach).

84 На одном компьютере или сервере может работать множество разных контейнеров.

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

86 - В больших проектах количество контейнеров легко может измеряться сотнями, а запуск и остановка происходят автоматически. Например, когда нагрузка растёт или в каких-то контейнерах возникают ошибки, система сама перезапускает их или добавляет новые. Этот процесс называетсяоркестрацией контейнеров. Наиболее популярный инструмент для оркестрации -<a>Kubernetes</a>.

86 + В больших проектах количество конте��неров легко может измеряться сотнями, а запуск и остановка происходят автоматически. Например, когда нагрузка растёт или в каких-то контейнерах возникают ошибки, система сама перезапускает их или добавляет новые. Этот процесс называетсяоркестрацией контейнеров. Наиболее популярный инструмент для оркестрации -<a>Kubernetes</a>.

87 Для хранения и распространения образов контейнеров используют реестры контейнеров (container registry). Docker предоставляет открытое публичное хранилище под названием<a>Docker Hub</a>, которое чем-то напоминает GitHub: вы можете загрузить туда образ своего контейнера и сделать его доступным любому пользователю. Для рабочих проектов используют закрытые реестры - например, <a>Amazon Container Registry</a>.

88 Итог: зачем разработчику контейнеры?

89 Итак, мы разобрались, что контейнеры помогают упаковать код приложения вместе с необходимыми зависимостями в изолированную среду и потом запустить в любом месте, где работает Docker. Это позволяет не задумываться о различиях в конфигурации между компьютерами и серверами и оставаться уверенными, что код будет работать без сюрпризов (или нет ?).

90 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>