Создание приложений с помощью Astro Build и Azure Static Web Apps CLI!

В мае 2021 года был выпущен Azure Static Web Apps. Сервис, позволяющий автоматически развертывать приложения Full Stack (от Back-End до Front-End) совершенно бесплатно на Azure из репозитория GitHub.

Самое интересное в Azure Static Web Apps то, что эта служба прекрасно интегрируется для глобального и распределенного размещения вашего приложения или статического контента на стороне Back-End, создания API с помощью службы Azure Functions, включая ресурсы аутентификации, пользовательскую маршрутизацию и даже авторизацию на основе маршрутов!
И самое главное: хостинг бесплатно!

Но что такое Azure Static Web Apps CLI?!

Сегодня речь пойдет об инструменте, связанном с этой службой, который позволит вам очень быстро и динамично эмулировать ваши статические приложения на локальном уровне: Azure Static Web Apps CLI!

Azure Static Web Apps CLI

Static Web Apps CLI, также известный как SWA CLI, служит локальным инструментом разработки для Azure Static Web Apps. Он может:

• передавать активы статических приложений или прокси-сервер на сервер разработки приложений.
• обслуживать запросы API или проксировать API, запущенные в Azure Functions Core Tools
• Эмулировать аутентификацию и авторизацию
• Эмулировать конфигурацию статических веб-приложений, включая маршрутизацию и роли ACL.
• Развертывание приложения в Azure Static Web Apps

Важные замечания

CLI эмулирует часто используемые возможности облачной службы Azure Static Web Apps. Некоторые различия вполне ожидаемы. Всегда развертывайте и тестируйте свои приложения в Azure, чтобы убедиться в их работоспособности.

Быстрый запуск

Установка CLI с помощью npm, yarn или pnpm:

• Чтобы установить CLI глобально, используйте:

  npm install -g @azure/static-web-apps-cli

  …

Согласно репозиторию инструментов Azure Static Web Apps CLI с помощью SWA CLI вы можете:

• ✅ обслуживать активы статических приложений или прокси-сервер для разработки приложений.
• ✅ обслуживать API-запросы или проксировать API, работающие в Azure Functions Core Tools
• ✅ Эмуляция аутентификации и авторизации
• ✅ Эмулировать конфигурацию Static Web Apps, включая маршрутизацию.

Еще один важный момент, о котором следует упомянуть, заключается в том, что вы можете эмулировать любой статический проект или структуру Front-End приложения, будь то:

• ✅ React
• ✅ Angular
• ✅ Svelte
• ✅ Vue
• ✅ Next.js
• ✅ Blazor/WebAssembly!

Отлично! Разговоры — это хорошо! Но гораздо лучше, когда у нас есть ДЕМО! Итак, давайте сделаем код и запустим очень простую демонстрацию того, как мы можем использовать этот инструмент локально!

Время демонстрации!

Первое, что нам нужно сделать, это установить Node.js! Всегда старайтесь устанавливать LTS версию!

В этом демо я буду использовать новый фреймворк, который может стать большим трендом в мире разработки: Astro Build.

Я не буду вдаваться в подробности об этом фреймворке, поскольку это не является целью данной статьи. Но если вы хотите узнать больше, вы можете посмотреть видео ниже:

Чтобы немного ускорить наше демо, я создал шаблонный проект, который прошу вас скачать или git clone:

git clone https://github.com/glaucia86/astro-swa-demo.git

При желании вы можете внести необходимые изменения. Например, изменить изображения и прочее! Я настоятельно рекомендую, когда вы начинаете новый проект Astro, выбрать опцию: Портфолио. У вас будет тот же шаблон для начала, возможно, новый статический сайт портфолио!

Перейдите в папку astro-demo и установите пакеты локально с помощью команды:

npm install

Введите команду npm start, чтобы запустить проект. Откройте браузер на странице: http://localhost:3000/.

Если вы видите ее так, как показано на изображении ниже, значит, все сработало отлично!

Теперь перейдем к следующему шагу! Откройте командную строку и введите команду:

npm install -g @azure/static-web-apps-cli

Создайте папку, чтобы мы могли протестировать этот инструмент. В моем случае я создал папку со следующим именем:

mkdir swa-cli-demo

Теперь наступает самая интересная часть, когда с помощью командной строки можно создать пример статической страницы. Для этого выполните приведенную ниже команду:

swa start http://localhost:3000 --run "npm start"

Теперь откройте браузер по адресу http://localhost:4280/.

Что это значит для нас? Фактически, мы эмулируем сервер Azure Static Web Apps. С помощью этой конечной точки мы можем даже протестировать Back-End API или даже имитировать интегрированную аутентификацию входа. Поскольку Azure Static Web Apps поддерживает это. (Более подробная информация ЗДЕСЬ)

Круто! Не правда ли?

Развертывание приложения с помощью Vs Code!

Чтобы выполнить описанные ниже шаги, вам необходимо разместить свой проект на GitHub и иметь бесплатную учетную запись Azure!

Теперь давайте развернем это приложение с помощью расширения Azure Static Web Apps в Visual Studio Code!

Вы можете скачать расширение Azure Static Web Apps для VS Code ЗДЕСЬ

Теперь откройте проект в Visual Studio Code и выполните следующие шаги:

Шаг 01:

Нажмите на кнопку +, как показано на рисунке ниже:

Шаг 02:

Здесь вы должны определить имя приложения. Имя должно быть уникальным!

Шаг 03:

Поскольку Astro еще не входит в список расширений, выберем вариант custom:

Шаг 04:

Здесь мы будем определять местоположение нашего приложения. Будьте очень внимательны, если ваше приложение (корень проекта) находится в какой-то подпапке (как в моем случае). В данном примере, из моего проекта, корень проекта находится в папке astro-demo.

Шаг 05:

И, наконец, мы должны определить, где генерируются файлы артефактов Astro. Согласно документации, они находятся в папке dist (для разных фреймворков существуют разные папки артефактов. Чтобы узнать больше, нажмите ЗДЕСЬ)

Шаг 06:

Затем откроется окно, которое приведет вас к следующему шагу (т.е. к репозиторию GitHub).

Шаг 07:

Теперь мы попадем на сайт репозитория проекта, там будет показана папка, содержащая файл yaml и, кроме того, действие, выполняемое GitHub.

Шаг 08:

Теперь там запущено действие job! Это демонстрирует, что наше приложение взаимодействует с платформой Azure и, кроме того, создает для нас C.I и C.D пояса!

Шаг 09:

В случае, если все работает! Теперь переходим к последнему шагу!

Шаг 10:

Переключитесь обратно в Visual Studio Code и снова откройте расширение SWA. И найдите только что созданное приложение! Щелкните правой кнопкой мыши на: browser site.

Теперь откройте браузер! И вы увидите, что ваш проект доступен глобально и готов для всех!

Вы можете посмотреть онлайн версию: ЗДЕСЬ

Заключительные слова!

Azure Static Web Apps помогает и облегчает нам, когда мы хотим развернуть статические приложения простым, быстрым и динамичным способом! И самое лучшее во всем этом — интеграция с GitHub Actions! Таким образом, мы автоматически создаем беговую дорожку из C.I и C.D! Фантастика, не правда ли?!

Если вы хотите узнать больше или даже попробовать этот сервис бесплатно, я настоятельно рекомендую курсы ниже:

• ✅ Документация по Azure Static Web Apps

• ✅ Бесплатный курс — Создание приложений с помощью Azure DevOps

• ✅ Бесплатный курс — Публикация приложения Angular, React, Svelte или Vue JavaScript с помощью Azure Static Web Apps

• ✅ Бесплатный курс — Создание и публикация статического веб-приложения с помощью Gatsby и Azure Static Web Apps

• ✅ Учебник: Публикация сайта Gatsby в Azure Static Web Apps

• ✅ Учебное пособие: Публикация сайта Hugo в Azure Static Web Apps

• ✅ Учебник: Публикация сайта VuePress в Azure Static Web Apps

• ✅ Развертывание статически рендерируемых сайтов Next.js на Azure Static Web Apps

• ✅ Развертывание сайтов Nuxt.js с серверным рендерингом на Azure Static Web Apps

• ✅ Учебник: Публикация сайта Jekyll в Azure Static Web Apps

А чтобы быть в курсе многих других новостей, обязательно следите за мной в twitter!

До встречи! 😍