Книга рецептовbeta
- Введение
- Добавление свойств экземпляра
- Валидация форм
- Редактируемая система SVG-иконок
- Создание блога, управляемого CMS
- Модульное тестирование Vue-компонентов
- Создание пользовательской директивы прокрутки
- Отладка в VS Code
- Используем axios для доступа к API
- Устранение утечек памяти
- Хранение данных на стороне клиента
- Публикация Vue-компонентов в npm
- Интегрируем Docker в приложение Vue.js
- Практическое использование слотов с ограниченной областью видимости с GoogleMaps
Эта документация для версий v2.x и ранее. Для v3.x, документация на русском здесь.
Интегрируем Docker в приложение Vue.js
Простой пример
Итак, вы создали своё первое приложение на Vue.js, используя потрясающий шаблон Vue для webpack, и теперь вы хотите похвастаться своим коллегам, показав им, что можно также запустить его в Docker-контейнере.
Начнём с создания Dockerfile
в корневом каталоге нашего проекта:
|
Может показаться лишним сначала копировать package.json
и package-lock.json
, а затем все файлы и каталоги проекта в два отдельных шага, но на самом деле есть одна очень веская причина для этого (спойлер: это позволяет нам использовать кэшированные слои Docker).
Теперь давайте соберём образ Docker для нашего приложения на Vue.js:
|
Наконец, запустим наше приложение Vue.js в контейнере Docker:
|
У нас есть доступ к нашему Vue.js-приложению по адресу localhost: 8080
.
Пример из реальной жизни
В предыдущем примере мы использовали простой, не требующий конфигурации HTTP-сервер, работающий из командной строки, для обслуживания нашего приложения на Vue.js, который отлично подходит для быстрого прототипирования и может быть даже для простых сценариев в production. В конце концов, в документации говорится:
Он достаточно мощный для использования в production, но он прост и достаточно уязвим для хакерских атак, поэтому он подходит для использования в качестве тестирования, локальной разработки и обучения.
Тем не менее, для реально сложных случаев использования в production может быть разумнее использовать широко известные решения, такие как NGINX или Apache, и это именно то, что мы собираемся сделать дальше: мы собираемся использовать NGINX для обслуживания нашего приложения на Vue.js, потому что данный сервер считается одним из наиболее эффективных и проверенных на практике решений.
Давайте доработаем наш Dockerfile
для использования NGINX:
|
ОК, разберёмся что здесь происходит
- мы разделили наш оригинальный файл
Dockerfile
на несколько этапов с помощью многоступенчатых сборок Docker; - первый этап отвечает за сборку готового для production артефакта нашего приложения Vue.js;
- второй этап отвечает за обслуживание такого артефакта с использованием NGINX.
Теперь собираем Docker-образ нашего приложения на Vue.js:
|
Наконец, запустим наше приложение Vue.js в контейнере Docker:
|
Получить доступ к Vue.js приложению теперь можно по адресу localhost: 8080
.
Дополнительный контекст
Если вы читаете этот рецепт, то скорее всего знаете, зачем вам необходимо использовать Docker в приложении на Vue.js. Но если вы просто пришли на данную страницу, нажав кнопку «Мне повезёт» с Google, позвольте мне поделиться с вами несколькими вескими основаниями для этого.
Сегодняшняя современная тенденция заключается в создании приложений с использованием подхода Cloud-Native, который тесно связан со следующими ключевыми концепциями:
- Микросервисы
- DevOps
- Непрерывная поставка (Continuous Delivery)
Посмотрим, как эти понятия в действительности влияют на наше решение использовать Docker в приложении на Vue.js.
Последствия микросервисов
Принимая этот архитектурный стиль микросервисов, мы стремимся к созданию одного приложения как набора небольших сервисов, каждый из которых работает в собственном процессе и взаимодействует с лёгкими механизмами. Эти сервисы основаны на бизнес-возможностях и независимо развёртываются путём полного автоматизированного механизма развёртывания.
Таким образом, принятие этого архитектурного подхода в большинстве случаев подразумевает разработку и доставку нашего фронтенда как независимого сервиса.
Влияние DevOps
Принимая культуру DevOps, инструменты и гибкую инженерную практику, в частности, получается хороший эффект расширения сотрудничества между ролями разработки и операциями. Одна из главных проблем прошлого (но и в некоторых реалиях сегодня) заключается в том, что команда разработчиков обычно не интересовалась операцией и обслуживанием системы после её передачи команде технической поддержки, в то время как последняя, как правило, не была в курсе всех бизнес-целей системы и, следовательно, неохотно удовлетворяя оперативные потребности системы (также называемые «капризы разработчиков»).
Таким образом, доставка нашего Vue.js-приложения в качестве Docker-образа помогает уменьшить, если не полностью устранить, разницу между запуском сервиса на ноутбуке разработчика, в production или любом другом окружении, о котором мы можем думать.
Влияние непрерывной поставки
Используя принцип непрерывной поставки, мы создаём наше программное обеспечение таким образом, чтобы его можно было выпустить в production в любое время. Такая инженерная практика обеспечивается так называемым конвейером непрерывной поставки. Цель непрерывной поставки — разделение нашей сборки на этапы (например, компиляция, модульные тесты, интеграционные тесты, тесты производительности и т.д.), И каждый этап проверяет наш артефакт сборки каждый раз при изменении нашего программного обеспечения. В конечном итоге, каждый этап повышает нашу уверенность в готовности к production артефакта сборки и, следовательно, снижает риск сломать что-то в production (или любых других окружений по этой причине).
Таким образом, создание Docker-образа для нашего приложения на Vue.js является хорошим выбором, потому что это будет представлять собой последний артефакт сборки, тот же артефакт, который будет проверен нашим конвейером непрерывной поставки и который потенциально может быть выпущен в production с уверенностью.
Альтернативные варианты
Если ваша компания ещё не использует Docker и Kubernetes, или вы просто хотите выпустить в production ваш MVP, возможно, интеграция Docker к вашему приложения на Vue.js не то, что вам нужно.
Распространённые альтернативы:
- использование платформы «всё-в-одном», например Netlify;
- Размещение вашего SPA на Amazon S3 и его обслуживание с Amazon CloudFront (см. эту страницу для подробного руководства).