Непрерывное развертывание всегда было отличным способом ускорить обратную связь с клиентами. Это всегда помогает члену команды ослабить давление, потому что дня выхода больше нет.
В этой статье мы собираемся создать имя приложения my-vueapp
с помощью VueJs CLI. Vuejs CLI помогает вам создать приложение с нулевой конфигурацией и может использоваться в качестве быстрого прототипа.
У него есть богатая коллекция плагинов, лучше всего подходящих для экосистемы внешнего интерфейса.
Чтобы создать приложение, мы просто запускаем следующую команду в нашем терминале.
vue create my-vueapp
Примечание. Чтобы запустить команду
vue
, вам необходимо установить vue cli глобально. Прочтите здесь.
Вам будет предложено выбрать вариант для предустановки. Мы собираемся выбрать предустановку по умолчанию.
Vue CLI v3.1.3 ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features
Есть много статей о пресетах, babel и eslint. Если вы ищете плагины и пресеты babel, этот вариант вам подойдет.
https://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/
Теперь он извлечет все файлы зависимостей, необходимые для приложения, и ваше приложение готово.
🎉 Successfully created project my-vueapp. 👉 Get started with the following commands: $ cd my-vueapp $ yarn serve
Зайдите внутрь проекта и обслужите приложение.
App running at: - Local: http://localhost:8080/ - Network: http://192.168.100.22:8080/ Note that the development build is not optimized. To create a production build, run yarn build.
Если вы заглянете в http: // localhost: 8080 /. Вы можете увидеть приложение.
Мы собираемся перенести наш проект на gitlab. Перенести наш существующий проект в репо легко, просто следуя настройкам, и ваш проект уже есть.
Мы собираемся использовать возможности хостинга, предоставляемые firebase, для размещения нашего приложения. Благодаря функциям безопасных соединений, быстрой доставке контента, откату одним щелчком мыши и быстрому развертыванию разработчик может сосредоточиться на приложении.
Для размещения нашего приложения нам необходимо создать проект в Firebase Console. Я уже создал его в своей firebase, если вы еще не создали или не знаете о firebase, вы можете прочитать эту документацию о том, как настроить свой проект.
Убедитесь, что вы установили firebase-tools глобально:
npm install -g firebase-tools
Из корня вашего проекта инициализируйте firebase
с помощью команды:
firebase init
Firebase задаст несколько вопросов о том, как настроить ваш проект.
- Выберите, какие функции Firebase CLI вы хотите настроить для своего проекта. Обязательно выберите
hosting
.
- Выберите для своего проекта проект Firebase по умолчанию.
- Установите для каталога
public
значениеdist
(или место, где находится результат вашей сборки), который будет загружен на хостинг Firebase.
// firebase.json
{ "hosting": { "public": "dist" } }
- Выберите
yes
, чтобы настроить проект как одностраничное приложение. Это создастindex.html
и в вашейdist
папке и настроит вашуhosting
информацию.
// firebase.json
{ "hosting": { "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }
Запустите npm run build
, чтобы построить свой проект.
Чтобы развернуть свой проект на хостинге Firebase, выполните команду:
firebase deploy --only hosting
Если вы хотите, чтобы были развернуты другие функции интерфейса командной строки Firebase, которые вы используете в своем проекте, запустите firebase deploy
без параметра --only
.
Теперь вы можете получить доступ к своему проекту на https://<YOUR-PROJECT-ID>.firebaseapp.com
. В моем случае это https://my-vueapp-23bee.firebaseapp.com/.
Это хорошо, но будет лучше, если мы автоматизируем процесс развертывания с помощью непрерывной интеграции. Atlassian написал отличную статью о непрерывной интеграции, непрерывном развертывании и непрерывной доставке.
Давайте автоматизировать !!
Как описано в документации GitLab Pages, все происходит с файлом .gitlab-ci.yml
, помещенным в корень вашего репозитория. Этот рабочий пример поможет вам начать:
# .gitlab-ci.yml file to be placed in the root of your repository
Зафиксируйте файл .gitlab-ci.yml
перед отправкой в репозиторий. Давайте разберем код.
- Нашему приложению требуется Nodejs для сборки и развертывания на сервере. Итак, мы делаем образ узла.
image: node:latest
- В разделе
deploy_production
происходит волшебство. Здесь мы собираемся установить все пакеты зависимостей, необходимые для приложения, а также определим нашу логику.
Здесь мы используем уникальный общий, который мы еще не обсуждали. firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_DEPLOY_KEY
Чтобы использовать скрипт развертывания firebase в CI, нам нужны токены. Это можно получить, запустив firebase login:ci
и разрешив доступ к Gmail.
Полученный таким образом токен сохраняется как переменные среды в нашем gitlab. Чтобы
настроить переменные, перейдите в «Настройки ›› CI / CD».
$ CI_PIPELINE_ID, build $ CI_BUILD_ID - зарезервированные ключи. Чтобы узнать больше о зарезервированных переменных читайте здесь.
Теперь давайте изменим текст и зафиксируем наши изменения. Мы видим, что автоматическое развертывание прошло успешно.
Теперь, если мы перейдем на наш хостинг, мы сможем увидеть конвейер ‹id› и построить ‹id›.
Давайте проверим наш сайт.
вуаля!
Внесенные нами изменения теперь доступны.