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

В этой статье мы собираемся создать имя приложения 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›.

Давайте проверим наш сайт.

вуаля!

Внесенные нами изменения теперь доступны.