Рубрики
Без рубрики

Пошаговое руководство по разработке и развертыванию VUE приложений с докером, частью двух

Еще не читал предыдущую статью? – Проверьте первую часть серии VUE-Docker. – Или если … с меткой DevOps, Vue, Docker, JavaScript.

Еще не читал предыдущую статью? – Проверьте Первая часть серии Vue-Docker Отказ – Или если вы TL: DR – Возьми меня в код Отказ

Построить dev – контейнер

Теперь, когда у нас установлены докер и легали наш проект, мы можем начать развиваться. Давайте начнем с добавления следующего к Свидетельствовать Dockerfile :

FROM node:14-alpine

WORKDIR /vue_app

EXPOSE 8080

CMD [ "npm", "run", "serve" ]

Если вы задаетесь вопросом об отсутствии Установка NPM Команда: мы будем использовать Vue_Helper Контейнерное изображение из первой статьи управлять пакетами NPM.

Мы можем построить контейнер для разработки, запустив:

docker build  \
    -f ./dockerfiles/Dev.Dockerfile \
    -t vue_app:dev 
    vue_app

Вы должны получить контейнер с именем vue_app Отказ С этим мы можем начать развитие.

Примечание: Учитывая, что вы прочитали предыдущую статью, вы заметите небольшое различие в командах сборки. Ранее мы использовали Метод stdin Читать содержимое DockerFile. Пока это вообще немного быстрее, он указывает нет Создать контекст до демона докера. Если вы попытаетесь воспроизвести способ Stdin для создания контейнера приложения для разработки, вы столкнетесь с ошибкой:

COPY failed: forbidden path outside the build context: ../vue_app/package.json

Разница, в двух словах, это то, что:

  • Способ STDIN использует контекст DockerFile (путь: ./Dockerfiles/)
  • пока -f – метод использует контекст текущего активный каталог (путь: ./)

Развиваться с докером

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

Давайте запустим контейнер для разработки, выполнив следующую команду:

docker run \
    -v /path/to/project/vue_app:/vue_app \
    -p 8080:8080
    -it vue_app:dev

Будет:

  • Запустите контейнер на основе помеченного изображения vue_app: dev и разоблачить его на порт 8080
  • синхронизировать локальный рабочий каталог /path/to/project/vue_app с рабочим каталогом контейнера vue_app над креплением
  • Откройте интерактивный сеанс, чтобы вы могли отслеживать свой сервер разработки

Если вы пытаетесь получить контейнер с Vite Вместо Vue CLI вы должны в настоящее время (30.10.2021) пройти - Гость Флаг в вашем package.json файл:

{ 
  "scripts": { 
    // ... other scripts  
    "serve": "vite --host 0.0.0.0" 
  }
}

Когда контейнер работает, приложение может быть доступно через браузер. Откройте новую вкладку на http://localhost: 8080 И вы увидите знакомую Vue Boeterplate. И благодаря креплению Bind, модификации кода на вашем локальном компьютере будут реплицироваться прямо в контейнер. Vue CLI выберет эти и перезагружают страницу браузера.

Наконец, попробуйте изменить Msg Собственность Helloworld компонент. Если изменение видно внутри вашего браузера – поздравляю – вы успешно настроили свой собственный Docker Dev-Environment 🌟.

Теперь вы можете изменить приложение к желанию вашего сердца.

В Репозиторий для этой статьи Я создал простое приложение для отправки в список, которое мы можем развернуть позже.

Подготовьте приложение для развертывания

Мы уже можем создавать и управлять приложением, а также разработать его исходный код, используя Docker. Что осталось сделать, это сделать его готовым к продуктивной среде – без накладных расходов Dev-Server.

Есть несколько способов сделать это. Вы можете использовать пример из Быстрая и грязная статья Я написал ранее То есть пользовательский сервер Express.js. Но Зачем изобретать колесо, если есть контейнер для спасения?

Пример, который вы находите ниже, вдохновлен Официальный Vue 2 Docs Отказ Он работает одинаково хорошо с любым другим видом JS Framework, которые используют WebPack или Vite.

Давайте заполним оставшиеся Развертывать. Dockerfile С жизнью, добавив эти команды:

# build stage
FROM node:14-alpine AS build-stage

WORKDIR /vue_app

COPY package.json ./

RUN npm install

COPY . .

RUN npm run build

# production stage
FROM nginx AS production-stage

COPY --from=build-stage /vue_app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Docker может интерпретировать их, чтобы объявить два разных этапа. Эта процедура обычно называется « Многоэтапное здание ‘.

  • Этап сборки построит приложение, используя изображение Node.js
  • Этап производства будет использовать Nginx Изображение веб-сервера.
  • Он запускает контейнер, который обслуживает встроенный SPA Vue на порту 80

Этапы относятся друг к другу с помощью - Из – Флаг. Таким образом, вы можете оптимизировать ваш рабочий процесс разработки. Например, вы могли бы расширить вышеуказанные команды, добавив одну или несколько тестовых фаз.

На данный момент вы также можете настроить NGINX в соответствии с требованиями вашего проекта. Проверьте Официальные документы на Dockerhub Чтобы получить больше информации.

Как только вы будете готовы отправить ваше приложение, запустите:

docker build \
    -f ./dockerfiles/Deploy.Dockerfile \
    -t vue_app:production \
    vue_app

Вы получите изображение, которое включает в себя оптимизированную версию вашего приложения. Может быть запущено в любом месте Docker установлено:

docker run -p 80:80 vue_app:production

Приложение будет доступно под http://localhost Отказ

Давайте повторимся:

  • Мы заполнили два докерафа для разработки и развертывания с помощью команд
  • Оба предоставляют нам уникальный способ разработки и распространения нашего приложения
  • Docker также позволяет нам оптимизировать наш процесс развертывания
  • Эта процедура называется «многоэтапный здание»

Пример repos github

Я собрал весь код из первых двух статей вместе в REPOS GitHUB. Вы можете использовать его либо в качестве котельной или доказательства концепции.

https://github.com/tq-bit/vue-docker-development

Следующие шаги

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

  • Мы будем использовать Docker Hub, чтобы опубликовать свое изображение приложения
  • Мы создадим виртуальный хост на цифровом океане и развернуть наше приложение к нему
  • Вместо того, чтобы запустить каждую команду Docker отдельно, мы рассмотрим использование Docker-Compose Для развития и развертывания

Этот пост был изначально опубликован в https://blog.q-bit.me/a-step-by-step-guide-form-deveoping-and-deploying-wa-vue-js-app-with-docker-part-two/ Спасибо за чтение. Если вам понравилось эту статью, давайте останемся на связи в Twitter 🐤 @qbbitme.

Оригинал: “https://dev.to/tqbit/a-step-by-step-guide-to-developing-and-deploying-vue-apps-with-docker-part-two-1djg”

Читайте ещё по теме: