РЕКОМЕНДАЦИЯ: В части 1 раздела Создание приложения Quasar Framework с помощью сервисов AWS Amplify мы установили Quasar V1-beta и AWS Amplify CLI, а затем создали простое приложение Quasar с помощью инструмента Quasar CLI. . Мы также использовали интерфейс командной строки AWS Amplify для настройки наших учетных данных AWS и создания нового проекта Amplify с API и аутентификацией. Amplify внесла наши изменения и будет ждать, пока мы добавим дополнительные услуги или отправим и опубликуем.

Добавление хостинга S3 / CloudFront

Это может не потребоваться в вашем окончательном развертывании, поскольку мы покажем вам предпочтительный метод непрерывного развертывания для проталкивания / подготовки нашего приложения Quasar, но это полезное средство для тестирования и может считаться еще одной «промежуточной» средой.

$ amplify add hosting

Выберите Prod и продолжите.

Выберите удобочитаемое имя для корзины хостинга и выберите значения по умолчанию для следующих двух вариантов:

Развертывание в облаке

Мы будем использовать Amplify CLI для создания наших локальных внутренних ресурсов и предоставления их в облаке (AppSync / DynamoDB / Cognito / S3 + CloudFront).

$ amplify push

AWS Amplify может генерировать код javascript для наших запросов GraphQL и мутаций, которые можно использовать с помощью тега graphql - выберите значения по умолчанию для остальных запросов:

После этого AWS Amplify развернет ваши ресурсы AWS с помощью шаблонов CloudFormation.

Это может занять некоторое время, а сейчас самое время стать Патреоном Quasar Framework!

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

Вы можете увидеть такую ​​страницу, не волнуйтесь, она исчезнет после того, как мы воспользуемся Amplify для публикации нашего сайта.

Опубликуйте наш проект

Далее мы будем использовать Amplify CLI для публикации нашего веб-приложения:

$ amplify publish

После его завершения вы должны получить подтверждение и URL-адрес CloudFront для своего приложения:

Теперь у нас есть работающее приложение Quasar V1, развернутое с помощью интерфейса командной строки AWS Amplify!

Непрерывное развертывание с AWS Amplify

Далее мы рассмотрим метод непрерывного развертывания для развертывания веб-приложений в AWS Amplify. Откройте свой веб-браузер и перейдите к AWS Amplify из веб-консоли AWS по адресу https://aws.amazon.com, а затем нажмите кнопку Подключиться, чтобы начать работу.

Мы используем Github для этого проекта. Если вы еще не создали новый репозиторий и не добавили в него свой проект, сейчас самое подходящее время для этого. Мы создали репозиторий в нашем Github под названием quasar-ampify-demo и будем использовать следующие команды в каталоге нашего проекта, чтобы начать работу:

$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin https://github.com/mfreeman451/quasar-amplify-demo.git
$ git push origin master

Добавить службу репозитория

Для получения дополнительной информации об использовании AWS Amplify в нескольких средах и работе с ветками git ознакомьтесь с этой ссылкой.

Добавьте свой репозиторий и укажите свою рабочую ветку

Настройка наших параметров сборки

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

Прежде чем двигаться дальше, убедитесь, что вы выбрали среду «dev» в первом раскрывающемся списке и «ampifyconsole-backend-role» во втором раскрывающемся списке.

Прокрутите страницу вниз до области Настройки сборки, мы собираемся изменить значения по умолчанию:

К этому:

Мы добавили команду 'npm install -g @ quasar / cli' в строку 13, удалили [] из команд: [] в строке 16 и добавили 'quasar build -m pwa 'в строке 17, и, наконец, мы обновили раздел baseDirectory в строке 20, чтобы он указывал на наш каталог сборки' / dist / pwa '

version: 0.1
backend:
  phases:
    # IMPORTANT - Please verify your build commands
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm install -g @quasar/cli
        - npm ci
    build:
      commands:
        - quasar build -m pwa
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: /dist/pwa
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Сохраните изменения и нажмите кнопку Далее внизу страницы, чтобы продолжить. Наконец, просмотрите свои изменения и нажмите кнопку Сохранить и развернуть.

Чтобы начать жизненный цикл непрерывного развертывания, войдите в исходную базу проекта, внесите изменения, а затем сохраните и зафиксируйте их в своем репозитории git. Мы просто обновим README.md, а затем отправим наши изменения в github, чтобы начать процесс.

Как только вы это сделаете, перейдите в консоль AWS Amplify, и вы сможете отслеживать процесс сборки:

После успешного развертывания вы должны увидеть что-то вроде этого:

Щелкните ссылку слева, чтобы перейти на свой новый сайт. Теперь у нас есть 3 сайта разработки по существу - наша локальная среда, работающая на localhost: 8080, которую мы будем использовать для большей части нашей разработки, экземпляр которой создается с помощью команды quasar dev, наш экземпляр CloudFront / S3, который мы создали с помощью команды ampify publish, и наш сайт «prod-dev», который мы настраиваем в консоли AWS Amplify и отправляем изменения, делая фиксацию в нашей «основной» ветке github. Вам может понадобиться только ваша локальная среда и сайт непрерывного развертывания. Если вы чувствуете желание, вы можете удалить его, выполнив команду «ampify remove hosting» в каталоге вашего проекта.

Наше приложение теперь развернуто через AWS, и теперь мы можем перейти к настройке нашего приложения для использования AWS Cognito для аутентификации. О том, как это сделать, читайте в Части 3, следите за обновлениями ..

Меня зовут Майкл Фриман, я являюсь сотрудником Quasar Framework и разработчиком полного стека, работающим с VueJS, GraphQL, Kafka и Apache Spark. Я также специализируюсь на системах сетевого управления.

Больше информации

Если вам нужна дополнительная информация о Quasar, вот несколько ссылок, по которым вы можете ознакомиться: