AWS Amplify предлагает целый набор инструментов, которые могут облегчить вашу жизнь как разработчика. Один из таких инструментов находится в консоли Amplify. Он позволяет вам развертывать приложения и размещать их с помощью Amplify, что означает, что ваши пользователи могут получить доступ к результатам вашего труда, посетив URL-адрес, который он генерирует 🏋
В этом руководстве мы развернем интерфейсное веб-приложение в AWS Amplify. Вы спросите, почему только интерфейсное приложение, а не приложение с полным стеком? Что ж, иногда вам может потребоваться развернуть и разместить только интерфейс вашего приложения, а не всю внутреннюю часть. Например, при работе с клиентами проект часто основан на вехах. Часто один из этих этапов состоит из создания только внешнего интерфейса приложения, а конечным результатом этого этапа является размещенное интерфейсное приложение. Это позволяет вам предоставить клиенту URL-адрес, который он может посетить, чтобы проверить конечный результат разработки внешнего интерфейса приложения.
Это стало возможным с Amplify, потому что вы можете развернуть конкретную ветку из репозитория git. Когда интерфейсная часть создана и объединена с основной ветвью, вы можете оставить ее (вместо того, чтобы удалять ее), а затем указать AWS Amplify на эту ветвь. В результате будет развернут и размещен только код внешнего интерфейса, что позволит команде разработчиков продолжить работу над проектом и создать внутреннюю часть… надеюсь, сначала немного отдохнув 🛀🏿
В этом руководстве вы узнаете, как развернуть приложение в Amplify. Также есть несколько интересных ошибок, с которыми я столкнулся в конце, так что проверьте!
В этом руководстве предполагается, что у вас есть учетная запись AWS и интерфейсный проект, который вы готовы к развертыванию.
Развертывание AWS Amplify 🚀
Войдите в консоль Amplify, и вам будет представлен следующий интерфейс:
Мы используем GitHub в качестве репозитория, поэтому выбираем его. Нажмите «Продолжить», и вы будете перенаправлены на GitHub и попросите предоставить AWS Amplify разрешение на доступ к вашей учетной записи. Нажмите «Авторизовать», а затем введите свой пароль, чтобы продолжить.
Вам будет предложено выбрать репозиторий, а затем ветку, которую вы хотите развернуть. Нажмите «Далее», и вы попадете на следующий экран:
Убедитесь, что вы сняли флажок под надписью «Backend deployments», поскольку мы развертываем только интерфейсное приложение. Если вы прокрутите вниз, вы можете проверить настройки сборки и тестирования, а также настроить дополнительные параметры. После нажатия «Далее» вам будет предложено просмотреть ваше развертывание. Наконец, нажмите «Сохранить и развернуть», и вам будет показана сводка о ходе сборки:
Автоматический процесс от предоставления до проверки должен занять от 5 до 15 минут. По завершении вы можете щелкнуть URL-адрес и просмотреть свое приложение во всей красе! Более того, вы можете отправить эту ссылку своему клиенту, и он сможет поиграть с интерфейсом веб-приложения!
Ошибка 1 ⁉️
Я включил этот раздел, чтобы помочь другим в случае, если они столкнутся с теми же проблемами, что и я, поскольку все мы знаем, что ошибки могут быть невероятно раздражающими, когда вы не знаете, почему они возникают! Даже если эти ошибки вас не коснутся, вы можете узнать кое-что, что поможет вам в будущем.
Одна большая проблема, с которой я столкнулся, заключалась в том, что каждый раз, когда я пытался создать свое приложение в Amplify, он не мог скомпилировать и распечатать следующую ошибку:
Failed to compile. ./src/App.js Cannot find file ‘./components/DisplayWrappers/NavBar/NavBar’ in ‘./src’.
Насколько мне известно, этот файл определенно существовал. Я мог видеть это в Finder, и когда я ввел путь в VS Code, автозаполнение помогло мне завершить его.
Чтобы попытаться изолировать эту проблему, первое, что я сделал, - это удалил все из оператора return компонента App, так что единственное, что было отображено, - это элемент «‹p› TEST ‹/p›«. Затем я попытался развернуть это. Это сработало, и я смог просмотреть свое приложение только со словами TEST на URL-адресе, который предоставил усиление.
Проведя небольшое исследование в Интернете, я нашел намек на свою проблему. Оказывается, Mac использует файловую систему без учета регистра (моя локальная машина - macOS), тогда как Linux использует файловую систему с учетом регистра (Amplify развертывается на машине Linux). Я понятия не имел об этом, но очень рад, что наткнулся на это!
Это означает, что в macOS эти два пути эквивалентны:
./home/friends и ./HOME/FRIENDS
но в Linux они не такие.
Некоторое время назад я изменил корпус одной из своих папок, и оказалось, что это было причиной проблемы. Я понял это с какой-то любезной помощью члена команды Amplify, Эрика Клеммонса, который предоставил мне эту ссылку :)
Вот как я это исправил. Сначала я посетил свой проект на GitHub и проверил путь, по которому возникла ошибка. Оказалось, вот эта папка:
Как мы видим, корпус здесь отличается от вывода из журнала сборки. Решение заключалось в том, чтобы открыть корневую папку моего проекта в терминале, а затем cd в папку компонентов (она содержит мою папку DisplayWrappers). Я хотел переименовать папку displayWrappers в DisplayWrappers. Для этого я сделал следующее:
git mv displayWrappers DisplayWrappers_2 git mv DisplayWrappers_2 DisplayWrappers
Вы можете спросить, зачем нужен двухэтапный процесс, если это можно сделать за один (git mv displayWrappers DisplayWrapper`)? По какой-то причине git не позволял мне это сделать, поэтому мне пришлось сделать это в два этапа.
Это изменяет имя нарушающей папки с «displayWrappers» на «DisplayWrappers», последнее из которых указано в моих путях импорта и вызывало сбой сборки. Теперь, когда я развернул через Amplify, сборка прошла успешно!
Ошибка 2 ⛑
После того, как я решил первую ошибку, возникла огромная проблема… Как я уже говорил ранее, я развернул ветку под названием Front-end. Я завершил эту веху несколько недель назад и, как таковой, довольно долгое время работал над другой веткой. После внесения изменений в git, указанных выше в моей ветке Front-end, а затем переключения обратно на мою самую последнюю ветку, он больше не будет компилироваться на моем локальном компьютере. Я получал единственную бессмысленную и бесполезную ошибку в компиляторе:
syntax error: unexpected "!"
Бесполезно… Я догадался, что это, скорее всего, из-за изменения файла в git. Чтобы исправить это, в моей новой ветке оформления заказа, которая не работала, я повторил вышеупомянутые команды git. Затем я начал получать ошибки о том, что определенных узловых модулей не существует. Я использовал старый метод «удалить папку node_modules и package-lock.json и запустить npm install». Это исправило!
Большое спасибо за чтение этой статьи! Надеюсь, это помогло, и, пожалуйста, подписывайтесь на меня в Твиттере :)
👋
