РЕКОМЕНДАЦИЯ: В части 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, вот несколько ссылок, по которым вы можете ознакомиться:
- МОНОРЕПО: https://github.com/quasarframework/quasar
- ДОКУМЕНТЫ: https://v1.quasar-framework.org/
- ДИСКОРД: http://chat.quasar-framework.org/
- ФОРУМ: https://forum.quasar-framework.org/
- TWITTER: https://twitter.com/quasarframework
- STEEM: http://steemit.com/@quasarframework