Интегрируем Docker в приложение Vue.js

Простой пример

Итак, вы создали своё первое приложение на Vue.js, используя потрясающий шаблон Vue для webpack, и теперь вы хотите похвастаться своим коллегам, показав им, что можно также запустить его в Docker-контейнере.

Начнём с создания Dockerfile в корневом каталоге нашего проекта:

FROM node:lts-alpine

# устанавливаем простой HTTP-сервер для статики
RUN npm install -g http-server

# делаем каталог 'app' текущим рабочим каталогом
WORKDIR /app

# копируем оба 'package.json' и 'package-lock.json' (если есть)
COPY package*.json ./

# устанавливаем зависимости проекта
RUN npm install

# копируем файлы и каталоги проекта в текущий рабочий каталог (т.е. в каталог 'app')
COPY . .

# собираем приложение для production с минификацией
RUN npm run build

EXPOSE 8080
CMD [ "http-server", "dist" ]

Может показаться лишним сначала копировать package.json и package-lock.json, а затем все файлы и каталоги проекта в два отдельных шага, но на самом деле есть одна очень веская причина для этого (спойлер: это позволяет нам использовать кешированные слои Docker).

Теперь давайте соберём образ Docker для нашего приложения на Vue.js:

docker build -t vuejs-cookbook/dockerize-vuejs-app .

Наконец, запустим наше приложение Vue.js в контейнере Docker:

docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app

У нас есть доступ к нашему Vue.js-приложению по адресу localhost: 8080.

Пример из реальной жизни

В предыдущем примере мы использовали простой, не требующий конфигурации HTTP-сервер, работающий из командной строки, для обслуживания нашего приложения на Vue.js, который отлично подходит для быстрого прототипирования и может быть даже для простых сценариев в production. В конце концов, в документации говорится:

Он достаточно мощный для использования в production, но он прост и достаточно уязвим для хакерских атак, поэтому он подходит для использования в качестве тестирования, локальной разработки и обучения.

Тем не менее, для реально сложных случаев использования в production может быть разумнее использовать широко известные решения, такие как NGINX или Apache, и это именно то, что мы собираемся сделать дальше: мы собираемся использовать NGINX для обслуживания нашего приложения на Vue.js, потому что данный сервер считается одним из наиболее эффективных и проверенных на практике решений.

Давайте доработаем наш Dockerfile для использования NGINX:

# этап сборки (build stage)
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# этап production (production-stage)
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

ОК, разберёмся что здесь происходит

• мы разделили наш оригинальный файл Dockerfile на несколько этапов с помощью многоступенчатых сборок Docker;
• первый этап отвечает за сборку готового для production артефакта нашего приложения Vue.js;
• второй этап отвечает за обслуживание такого артефакта с использованием NGINX.

Теперь собираем Docker-образ нашего приложения на Vue.js:

docker build -t vuejs-cookbook/dockerize-vuejs-app .

Наконец, запустим наше приложение Vue.js в контейнере Docker:

docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app

Получить доступ к 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 (см. эту страницу для подробного руководства).