В мае 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
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!
До встречи! 😍