Знаю почти:zhuanlan.zhihu.com/p/37961402
В этой статье в качестве примера будет взят стандартный проект Vue, полностью откажется от традиционного метода разработки и развертывания фронтенд-проекта и будет создана оптимизированная среда разработки фронтенда с непрерывной интеграцией на основе контейнерной технологии Docker.
Необходимые знания:
1. CI (непрерывная интеграция):Введение учителя Руан Ифэн в КИ
2. Докер:Быстрый старт докера
Цель:
1. Код не нужно собирать локально
2. Просто отправьте код на Github и автоматически соберите -> разверните
3. Версия проста в управлении, и версию можно легко откатить
Давайте перейдем к теме сейчас
Шаг 1: Инициализируйте проект Vue (используя официальный скаффолдинг vue).vue-cli)
1. Инициализируйте проект vue: vue init webpack vue-docker-demo
2. Отредактируйте Dockerfile в корневом каталоге проекта.
Содержимое Dockerfile следующее (если вы собираете другие проекты, например angular4, просто установите angular-cli и измените параметры сборки на ng build, аналогично)
FROM node:6.10.3-slim
RUN apt-get update \ && apt-get install -y nginx
WORKDIR /app
COPY . /app/
EXPOSE 80
RUN npm install \ && npm run build \ && cp -r dist/* /var/www/html \ && rm -rf /app
CMD ["nginx","-g","daemon off;"]
3. Инициализировать git, подключиться и отправить код в репозиторий Github,
Шаг 2: ИспользуйтеDaoCloudВыстроить процесс DevOps
(Также можно использовать другие публичные облачные сервисы, разница не большая, в этой статье в качестве примера будет взят DaoCloud, простой в эксплуатации и бесплатный для индивидуальных разработчиков)
1. Зарегистрируйте учетную запись DaoCloud
2. Пользовательский центр -> Хостинг кода, авторизуйтесь для доступа к вашему репозиторию Github.
2. Создайте новый в проекте Devopsпроекти выберите соответствующий вновь созданный проект в Github
3. Сначала создайте версию образа вручную, чтобы можно было использовать эту версию образа для создания новой.применение
4. Подключитесь к собственному хосту (если у вас нет собственного хоста, вы также можете использовать облачную тестовую среду)
Советы: вы можете купить хосты, такие как vultr, и следовать инструкциям, чтобы завершить доступ к хосту. Это, вероятно, простая операция из трех или четырех шагов. Обратите внимание, что после завершения подключения к хосту вам необходимо вручную запустить докер (сервис запуска докера ) на хосте.
Отлично, мы подключили наш хост к DaoCloud, приступаем к самому интересному шагу.
5. Создайтеприменение
Перейдите в [Зеркальный репозиторий], выберите образ, который вы только что создали вручную, и разверните последнюю версию на бесплатном хосте или в облачной тестовой среде.
Через несколько секунд вы можете нажать «Развернуть сейчас».
Подождите, пока завершится получение образа, и после того, как контейнер в списке контейнеров появится, просмотрите приложение vue, которое мы развернули, по адресу
Отлично, мы уже можем получить доступ к приложению vue, которое мы только что развернули, что также означает, что мы развернули наш образ на нашем собственном хосте.В это время перейдите на хост, чтобы проверить статус работы контейнера, и вы можете увидеть, что Работающий контейнер — это именно то, что мы только что развернули, и все в порядке.
Сделано здесь, мы можем сказать, что 99% работы выполнено, но последний 1%, который очень важен, это настоящий пользовательский процесс непрерывной интеграции для автоматизации всего, теперь давайте вернемся к проекту Devops [определение процесса]
6. Определите задачи автоматической сборки, автоматического выпуска
Вернитесь к проекту Devops, чтобы определить процесс автоматизации.
Сначала давайте определимАвтоматизируйте задачи сборки, ставим правило выполнять задачу сборки только при наличии нового тега, находим Dockerfile в корневом каталоге при сборке и соответствующим образом собираем образ
Во-вторых, давайте определимАвтоматически публиковать задачи, когда задача сборки завершена, задача автоматического выпуска автоматически запускается и публикуется в приложении на собственном хосте.
На данный момент мы завершили всю работу по контролю процесса, чтобы проверить, может ли весь процесс работать?
Шаг 3. Протестируйте весь процесс
Вернитесь на наш локальный сервер, измените текстовое содержимое, отправьте и отправьте его на удаленный конец, установите наш первый тег версии 1.0.0 и отправьте тег на удаленный конец.
Как видите, в то же время наша операция пометки запустила определенный нами процесс CI.
Через некоторое время вы можете увидеть, что наше приложение было обновлено, и соответствующая версия — 1.0.0, которую мы только что отправили.
Так же мы можем переключить версию приложения, откатиться и т.д.
На данный момент мы успешно создали интерфейсную непрерывную интегрированную среду разработки, не написав файл конфигурации Dockerfile и не написав скрипт.После этого нам нужно только сконцентрироваться на написании нашего бизнес-кода, просто нажмите тег.Автоматизированное развертывание легко запускается .
Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь со мной, спасибо.