В этом коротком рассказе я покажу вам, как развертывать веб-приложения GWT / J2CL в Службе статических веб-приложений Microsoft Azure. Есть некоторые преимущества, если вы реализуете свои веб-приложения с полной CSR (рендеринг на стороне клиента), чтобы веб-приложения просто запускались в вашем веб-браузере и использовали вычислительную мощность клиента. Стоимость облачных вычислений - одна из них. В этом случае облачный провайдер просто должен доставить статические файлы, не выполняя большой обработки со своей стороны.

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

  • Веб-браузер как платформа: слайды по-английски
  • Веб-браузер как платформа: YouTube видео на немецком языке.

GWT / J2CL - это транспилятор Java в JavaScript, поэтому во время выполнения веб-приложения представляют собой чистый HTML, CSS и JavaScript. Java доступна только во время разработки, поэтому разработчики Java могут использовать все хорошо известные, такие как Maven / Gradle, IntelliJ / Eclipse / NetBeans / Visual Studio Code и другие инструменты и фреймворки.

В моем списке историй вы можете найти разные статьи по GWT / J2CL, от новичка до эксперта. Вы также можете заглянуть в GWT Padlet для получения всей актуальной информации о GWT / J2CL.

После того, как вы реализуете свое веб-приложение с помощью GWT / J2CL, вы обязательно развернете его где-нибудь, чтобы ваши клиенты могли его использовать. Сегодня существует множество поставщиков облачных услуг, таких как AWS, Azure, Google Cloud, Heroku и т. Д. Сегодня я покажу вам, как развертывать приложения в Службе статических веб-приложений Microsoft Azure. Это интересно, потому что приложения GWT - это просто HTML, CSS и JavaScript, поэтому служба просто доставляет файлы один раз в веб-браузер, и все. Если вам нужны некоторые функции на стороне сервера, вы можете использовать Функции Azure. Ниже представлена ​​архитектура статических веб-приложений Azure.

Для развертывания я просто создаю простое веб-приложение GWT с Domino UI из DominoKit.

Репозиторий GitHub для демонстрации: https://github.com/lofidewanto/gwt-azure-static-webapp

Эта Документация по быстрому запуску очень помогает при развертывании статических веб-приложений. У вас должна быть учетная запись GitHub и Azure, чтобы иметь возможность развертывать веб-приложения. У многих из нас уже есть учетная запись GitHub, так что это не должно быть проблемой. Чтобы получить учетную запись Azure, у вас должна быть кредитная карта (по крайней мере, в Германии), а это не так-то просто. Heroku не запрашивает кредитную карту для бесплатного обслуживания. Для личного проекта служба статических веб-приложений Azure должна быть бесплатной: Планы статических веб-приложений Azure.

Итак, как происходит развертывание в статических веб-приложениях Azure? На самом деле нужно только следовать приведенной выше документации по быстрому запуску. Проблема, с которой я столкнулся, заключалась в том, что все примеры относятся к фреймворкам на основе JavaScript или TypeScript, таким как Vue.js. Angular или React, ничего для Java или GWT.

Получив некоторую помощь от Бруно Борхеса и Энтони Чу, мне удалось развернуть веб-приложение GWT. Основная проблема заключалась в добавлении шага сборки Maven в действия GitHub. Для этого мне нужно сделать следующее:

  • Добавьте этап создания веб-приложения GWT с помощью Maven
  • Измените app_location на /target/gwt-azure-static-webapp-1.0.0-SNAPSHOT/calculator, который является каталогом результатов для перенесенных файлов Java. Это каталог, в котором мы можем найти файлы HTML, CSS и JavaScript.
  • Измените skip_app_build на true. Это приводит к тому, что процесс сборки JavaScript не выполняется.

Вот и все!

Файл рабочего процесса GitHub Action для демонстрации: https://github.com/lofidewanto/gwt-azure-static-webapp/blob/main/.github/workflows/azure-static-web-apps-lively-pebble-036bda903. yml

Все шаги действия GitHub можно отобразить в виде списка.

Вы также можете взглянуть на консоль управления Azure для управления развернутым веб-приложением.

Результат развертывания можно увидеть прямо по адресу: https://lively-pebble-036bda903.azurestaticapps.net

… И вот результат!

Резюме и следующий шаг…

Преимущества использования GWT / J2CL заключаются в том, что веб-приложения будут полностью работать в веб-браузере, а это означает, что поставщику облачных услуг просто нужно доставить файлы без особой обработки. Служба статических веб-приложений Azure предлагает такую ​​функцию. В то же время разработчики Java могут по-прежнему работать со своими хорошо известными инструментами и фреймворками благодаря транспилятору GWT / J2CL.

Комбинация GitHub и Azure очень приятна. Использование GitHub Actions также очень просто. Я использую его впервые, поэтому это не может быть так сложно. Я использую Visual Studio Code for Java для разработки простого примера GWT и добавляю плагин Azure Static Web Apps в свой VSC. Они неплохо работают вместе.

Следующим шагом будет тестирование функций Azure для добавления некоторых серверных функций в клиентское веб-приложение GWT. В данном случае мне любопытно, так как Azure Functions еще не поддерживает Java?

А пока: получайте удовольствие от запуска веб-приложений GWT / J2CL в службе статических веб-приложений Azure!