Защита и развертывание микрофронтендов с помощью Angular

Микрофронтенды продолжают набирать интерес и популярность в разработке фронтендов. Эта архитектура использует ту же концепцию, что и микросервисы — как способ декомпозиции монолитных фронтенд-приложений. И, как и в случае с микросервисами, микрофронтенды имеют сложности, которыми необходимо управлять.

Эта статья является второй частью серии статей о создании сайта электронной коммерции на Angular с использованием микрофронтендов. Мы используем Webpack 5 с Module Federation, чтобы соединить микрофронтенды вместе, продемонстрировать обмен аутентифицированным состоянием между различными фронтендами, подготовиться к развертыванию с помощью динамической загрузки модулей и развернуть все это на бесплатном хостинге Vercel.

В этом втором посте мы продолжим работу над сайтом, который мы создали в первой части «Как построить микрофронтенды с использованием модульной федерации в Angular».

Как построить микрофронтенды с использованием федерации модулей в Angular

Alisa for Okta ・ May 24 ・ 15 min read

#angular #webdev #учебник #фронтенд

Давайте добавим динамическую загрузку модулей на наш сайт электронной коммерции с кексами, защитим незащищенные маршруты и настроим сайт для развертывания в Vercel, сервисе, предназначенном для улучшения рабочего процесса разработки фронтенда. 🎉

В итоге у вас будет приложение, которое выглядит вот так, общедоступное через Vercel:

Предварительные условия

  • Node Этот проект был разработан с использованием Node v16.14 с npm v8.5
  • Angular CLI
  • Аккаунт GitHub
  • Аккаунт Vercel, подключенный через учетные данные GitHub для автоматизации развертывания.

Обзор проекта микрофронтенда Angular с использованием Webpack и Module Federation

Давайте начнем с того, что освежим наши воспоминания — смахнем пыль с вашего проекта из первого поста. Как и в прошлый раз, нам понадобится IDE и терминал.

У нас есть хост-приложение, shell, и два микро-фронтенда, mfe-basket и mfe-profile. Мы используем @angular-architects/module-federation, чтобы облегчить настройку плагина Module Federation. Код функциональности корзины для кексов находится в общей библиотеке, и мы обмениваемся аутентифицированным состоянием с помощью SDK Okta.

Запустите все приложения Angular в проекте:

npm run run:all
Войдите в полноэкранный режим Выйти из полноэкранного режима

Когда вы запустите проект, вы должны увидеть все красивые кексы, которые продает этот магазин. Вы сможете войти в систему, просмотреть свой профиль, добавить товары в корзину, просмотреть корзину с кексами и выйти из системы. Все, что нужно для удовлетворения ваших потребностей в сладком!

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

git clone --branch local https://github.com/oktadev/okta-angular-microfrontend-example.git
npm ci
npm run run:all
Войти в полноэкранный режим Выйти из полноэкранного режима

Вам нужно будет следовать инструкциям по созданию приложения Okta и обновлению кода с вашим доменом Okta и ID клиента.

Динамическая загрузка пультов микрофронтенда

До сих пор мы обслуживали сайт микрофронтенда cupcake с помощью npm-скрипта run:all, который обслуживает все три приложения одновременно. Давайте посмотрим, что произойдет, если мы попробуем обслужить только хост-приложение. Остановите обслуживание сайта, запустите ng serve shell для обслуживания приложения по умолчанию, shell, и откройте браузер.

Когда вы переходите по адресу http://localhost:4200, вы видите пустой экран и несколько консольных ошибок. Ошибки консоли возникают потому, что shell не может найти пульты микро-фронтенда на портах 4201 и 4202. 👀

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

С помощью метода @angular-architects/module-federation библиотеки loadRemoteModule() мы можем динамически загружать удаленные микрофронтенды при изменении маршрута с помощью нескольких быстрых изменений.

Откройте projects/shell/src/app/app-routing.module.ts.

Функция, которую мы передаем в свойстве loadChildren для лениво загруженных маршрутов, меняется на использование loadRemoteModule(). Обновите свой массив routes, чтобы он соответствовал приведенному ниже коду.

import { loadRemoteModule } from '@angular-architects/module-federation';

const routes: Routes = [
  { path: '', component: ProductsComponent },
  {
    path: 'basket',
    loadChildren: () => loadRemoteModule({
      type: 'module',
      remoteEntry: `http://localhost:4201/remoteEntry.js`,
      exposedModule: './Module'
    }).then(m => m.BasketModule)
  },
  {
    path: 'profile',
    loadChildren: () => loadRemoteModule({
      type: 'module',
      remoteEntry: `http://localhost:4202/remoteEntry.js`,
      exposedModule: './Module'
    }).then(m => m.ProfileModule)
  },
  { path: 'login/callback', component: OktaCallbackComponent }
];
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, когда вы загружаете удаленные модули в определениях маршрутов, вам больше не нужно определять удаленный URI в projects/shell/webpack.config.js. Удалите или закомментируйте удаленные объекты в файле webpack.config.js. Еще одно преимущество динамической удаленной загрузки заключается в том, что нам больше не нужно объявлять модули для помощи TypeScript. Не стесняйтесь удалить файл projects/shell/decl.d.ts. 🪄

Дважды проверьте, что все по-прежнему работает, выполнив npm run run:all.

Затем остановите обслуживание проекта и попробуйте запустить только приложение shell, выполнив следующую команду:

ng serve shell
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь вы должны увидеть приложение-оболочку и увидеть только консольную ошибку при переходе к маршруту, обслуживаемому удаленным микро-фронтендом. Успех!

Разверните ваш проект микро-фронтенда с помощью Vercel

Теперь, когда сайт cupcakes работает локально, давайте развернем этот прекрасный сайт с помощью Vercel. Убедитесь, что вы разрешили Vercel доступ к GitHub, потому что мы воспользуемся встроенной интеграцией для автоматического развертывания изменений из ветки main.

Сначала разместите свой проект в репозитории GitHub. Если вы хотите скрыть свою конфигурацию Okta, вы можете сделать репозиторий приватным. Код конфигурации Okta не является конфиденциальной информацией, так как одностраничные приложения являются публичными клиентами. Если вам не нравится фиксировать значения конфигурации в коде, вы можете загружать значения конфигурации во время выполнения или использовать переменные окружения как часть шага сборки. Я не буду вдаваться в подробности того, как это сделать, но в конце я приведу несколько ссылок. Убедитесь, что флажок Инициализировать этот репозиторий с README снят.

На приборной панели Vercel нажмите кнопку + Новый проект, чтобы импортировать Git-репозиторий. В зависимости от того, какие разрешения вы предоставили Vercel, вы можете сразу увидеть только что созданный репозиторий GitHub. Если нет, следуйте инструкциям, чтобы настроить разрешения приложения GitHub и разрешить Vercel доступ к репозиторию. Нажмите кнопку Импорт репозитория, чтобы продолжить. Вы увидите форму для настройки проекта в Vercel.

Идея микрофронтендов заключается в том, чтобы иметь возможность развертывать каждое приложение независимо. Мы можем сделать это в Vercel, создав отдельный проект для каждого приложения. Vercel ограничивает количество проектов для одного репозитория тремя в бесплатном плане. Какое необычное совпадение!

Сначала мы настроим проект для микро-фронтенд хоста, приложения shell. Чтобы сохранить упорядоченность проектов, включите имя приложения в имя проекта Vercel, например okta-angular-mfe-shell. Вам также потребуется обновить команду сборки и выходной каталог для приложения shell. Обновите конфигурацию, чтобы она выглядела так, как показано на скриншоте ниже.

Нажмите кнопку Deploy, чтобы запустить сборку и развернуть приложение.

Вы увидите скриншот приложения и кнопку для возврата на приборную панель после завершения. На приборной панели вы увидите URI развернутого приложения и снимок витрины с кексами. Если вы посетите URI, маршруты еще не будут работать, если вы попытаетесь перейти к удаленным проектам. Нам нужно развернуть удаленные проекты и обновить URI для удаленных объектов в определении маршрута. Держите URI для приложения shell под рукой; мы скоро его используем.

Вернитесь на приборную панель Vercel, создайте новый проект и выберите тот же репозиторий для импорта. На этот раз мы настроим удаленное приложение mfe-basket. Обновите конфигурацию, чтобы она выглядела как на скриншоте ниже.

Обратите внимание на развернутый URI для приложения mfe-basket.

Вернитесь на приборную панель Vercel, чтобы повторить процесс для последнего удаленного приложения mfe-profile. Обновите конфигурацию, чтобы она выглядела так, как показано на скриншоте ниже.

Обратите внимание на развернутый URI для приложения mfe-profile.

Обновление маршрутов для поддержки путей микро-фронтенда для производства

Нам нужно обновить определение маршрута, чтобы включить URI для развернутого приложения. Теперь, когда у вас есть URI для двух пультов микрофронтенда, вы можете отредактировать projects/shell/app/app-routing.module.ts. Значения в опции конфигурации remoteEntry в методе loadRemoteModule() являются тем местом, где вы определяете путь. Но если мы обновим это значение, чтобы использовать развернутый URI, то вы больше не сможете запускать приложение удаленно.

Мы воспользуемся конфигурацией environments, встроенной в Angular для поддержки локального и развернутого окружения, и определим конфигурацию для локального обслуживания в сравнении с производственной сборкой.

Сначала мы настроим локальное обслуживание. Откройте projects/shell/src/environments/environment.ts и добавьте новое свойство для пультов микрофронтенда.

export const environment = {
  production: false,
  mfe: {
    "mfeBasket": "http://localhost:4201",
    "mfeProfile": "http://localhost:4202"
  }
};
Войти в полноэкранный режим Выйти из полноэкранного режима

Далее мы будем использовать значения в определении маршрута. Откройте projects/shell/src/app/app-routing.module.ts и обновите свойства remoteEntry, чтобы использовать новые свойства в файле environment.ts ниже.

import { environment } from '../environments/environment';

const routes: Routes = [
  { path: '', component: ProductsComponent },
  {
    path: 'basket',
    loadChildren: () => loadRemoteModule({
      type: 'module',
      remoteEntry: `${environment.mfe.mfeBasket}/remoteEntry.js`,
      exposedModule: './Module'
    }).then(m => m.BasketModule)
  },
  {
    path: 'profile',
    loadChildren: () => loadRemoteModule({
      type: 'module',
      remoteEntry: `${environment.mfe.mfeProfile}/remoteEntry.js`,
      exposedModule: './Module'
    }).then(m => m.ProfileModule)
  },
  { path: 'login/callback', component: OktaCallbackComponent }
];
Вход в полноэкранный режим Выход из полноэкранного режима

Не стесняйтесь обслуживать проект с помощью npm run run:all, чтобы дважды проверить, что все работает.

Теперь добавим конфигурацию для развернутых приложений. Откройте projects/shell/src/environments/environment.prod.ts и добавьте такое же свойство для пультов микро-фронтенда. Замените URI на развернутое местоположение.

export const environment = {
  production: true,
  mfe: {
    "mfeBasket": "https://{yourVercelDeployPath}.vercel.app",
    "mfeProfile": "https://{yourVercelDeployPath}.vercel.app"
  }
};
Вход в полноэкранный режим Выход из полноэкранного режима

Angular автоматически заменяет файл environment.ts на соответствующий, когда вы собираете проект. Таким образом, если вы обслуживаете локально, вы будете использовать содержимое из environment.ts, а если вы запускаете ng build для создания релиза, вы будете использовать содержимое из environment.prod.ts.

Примечание: В Vercel есть механизм продвижения релиза, когда вы сначала выпускаете релиз в среду staging для проведения проверки релиза, а затем продвигаете проверенное приложение в prod. При таком механизме нам придется усложнить способ доступа к URI. В этом руководстве мы упростим ситуацию и будем использовать только одну среду, но если вам нужно работать с многоэтапной конфигурацией среды выпуска, посмотрите ссылки на записи в блоге в конце руководства для работы с конфигурацией каждой среды.

Добавьте URL-адрес развертывания в Okta

Вам нужно будет обновить приложение Okta с новым местом развертывания, чтобы вы могли войти в систему. Откройте приборную панель Okta. Перейдите в раздел Applications > Applications и выберите приложение Okta, которое вы создали для этого проекта. На вкладке Общие нажмите кнопку Изменить в разделе Общие настройки и добавьте новый URI развертывания для приложения shell.

Затем добавьте URI развертывания в качестве доверенного источника в Okta. Перейдите в раздел Security > API, а затем перейдите на вкладку Trusted Origins. Нажмите + Добавить источник. Добавьте место развертывания и выберите CORS для типа.

Зафиксируйте изменения и добавьте их в основную ветку. После успешной сборки вы должны иметь возможность использовать развернутый сайт от конца до конца!

Защитите свои микрофронтенды

Прямо сейчас вы можете получить доступ к тем маршрутам, которые должны быть защищены, вручную введя полный URI маршрута профиля. Даже если вы не видите никакой информации о профиле, мы не охраняем маршрут. Давайте сделаем сайт немного более безопасным, защитив маршрут.

Откройте projects/shell/src/app/app-routing.module.ts. Мы добавим защиту маршрута, которая поставляется из коробки с Angular SDK Okta. Обновите определение маршрута для маршрута profile, как показано ниже.

import { OktaCallbackComponent, OktaAuthGuard} from '@okta/okta-angular';

{
  path: 'profile',
  loadChildren: () => loadRemoteModule({
    type: 'module',
    remoteEntry: `${environment.mfe.mfeProfile}/remoteEntry.js`,
    exposedModule: './Module'
  }).then(m => m.ProfileModule),
  canActivate: [OktaAuthGuard]
},
Вход в полноэкранный режим Выйдите из полноэкранного режима

Теперь, если вы перейдете непосредственно к маршруту профиля, вы будете сначала перенаправлены на страницу регистрации Okta, а затем обратно на маршрут профиля.

Защита маршрутов хорошо работает из оболочки микро-фронтенда. Но что если вы перейдете непосредственно к URI, где находится микро-фронтенд профиля? Вы все равно сможете перейти к маршруту профиля в микрофронтенде, потому что в приложении профиля нет защиты.

Это подводит нас к интересной концепции. Чтобы полностью защитить свои микрофронтенды, вы должны защитить и маршруты, определенные в микрофронтенде. Чтобы добавить защиту маршрутов Okta, вам нужно импортировать OktaAuthModule в mfe-profile приложение AppModule, и добавить ту же конфигурацию, что и для приложения shell. Конфигурация Module Federation разделяет библиотеку Okta между приложениями при доступе к ней через основное приложение. В отличие от этого, mfe-profile будет нуждаться в собственном экземпляре аутентифицированного состояния, когда доступ к нему осуществляется изолированно от приложения shell. Наличие собственного экземпляра аутентифицированного состояния означает, что вы должны добавить возможность входа и выхода в AppComponent приложения mfe-profile. Это также позволит вам тестировать каждое приложение микро-фронтенда независимо.

Безопасность + тестирование = победа!

Стройте микрофронтенд на релевантных изменениях

Как уже упоминалось в этом посте, ценность микрофронтендов заключается в возможности развертывать каждое приложение независимо. В производственных системах вам, возможно, придется обрабатывать несколько шагов сборки и создавать целый рабочий процесс CI/CD, но для этого руководства мы можем немного схитрить и получить преимущества раздельного развертывания. Мы добавим в Vercel конфигурацию, которая будет запускать сборку только при наличии изменений в соответствующем коде приложения.

На панели Vercel откройте проект Vercel для приложения mfe-basket. Перейдите на вкладку Settings и выберите Git. В шаге Ignored Build Step мы можем добавить команду Git, чтобы игнорировать все изменения, кроме тех, что находятся в каталоге projects/mfe-basket.

Добавьте следующую команду:

git diff --quiet HEAD^ HEAD ./projects/mfe-basket
Войти в полноэкранный режим Выйти из полноэкранного режима

Далее откройте проект Vercel для приложения mfe-profile, чтобы обновить команду Ignored Build Step. Теперь добавьте эту команду:

git diff --quiet HEAD^ HEAD ./projects/mfe-profile
Войти в полноэкранный режим Выйти из полноэкранного режима

Наконец, откройте проект Vercel для приложения shell, чтобы обновить команду Ignored Build Step. Эта команда немного отличается, потому что мы хотим подхватить все изменения в проекте, исключая изменения в mfe-basket и mfe-profile. Добавьте следующую команду:

git diff --quiet HEAD^ HEAD -- ':!projects/mfe-basket' ':!projects/mfe-profile'
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь, если вы внесете изменения в микро-фронтенд приложение, только это микро-фронтенд приложение будет собрано и развернуто. Все три проекта заметят изменение и начнут сборку, но немедленно отменят сборку, если шаг сборки должен быть проигнорирован для данного проекта.

После этого поста

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

git clone --branch deploy https://github.com/oktadev/okta-angular-microfrontend-example.git
Войти в полноэкранный режим Выйти из полноэкранного режима

oktadev / okta-angular-microfrontend-example

Стартовый код + завершенный проект для микрофронтенда с использованием Webpack 5 и плагина Module Federation в Angular и совместным использованием аутентифицированного состояния

Пример микрофронтенда Angular

В этом репозитории показано, как настроить микрофронтенды с использованием Webpack 5 и плагина Module Federation в Angular и обмениваться аутентифицированным состоянием в рамках всего проекта. Пожалуйста, прочитайте статью Как построить микрофронтенды с помощью Module Federation в Angular, чтобы узнать, как он был создан.

Это репо сопровождает посты из серии «Микро-фронтенды Angular». Начальный проект находится в ветке main. Готовый код для первого поста находится в ветке local.

Необходимые условия

  • Node 16
  • Okta CLI
  • Angular CLI
  • Учетная запись GitHub
  • Учетная запись Vercel

Okta имеет API аутентификации и управления пользователями, которые сокращают время разработки с мгновенным включением масштабируемой пользовательской инфраструктуры. Интуитивно понятный API Okta и поддержка экспертов облегчают разработчикам аутентификацию, управление и защиту пользователей и ролей в любом приложении.

  • Начало работы
  • Ссылки
  • Справка
  • Лицензия

Начало работы

Чтобы запустить этот пример, выполните следующие команды:

git clone https://github.com/oktadev/okta-angular-microfrontend-example.git
cd okta-angular-microfrontend-example
npm ci
Войти в полноэкранный режим Выйти из полноэкранного режима

Создать

Посмотреть на GitHub

Узнайте об Angular, микросервисах, OpenIDConnect, управлении несколькими средами развертывания и многом другом.

Хотите узнать больше? Если вам понравилась эта статья, ознакомьтесь со следующими.

  • Три способа конфигурирования модулей в вашем приложении Angular
  • Управление несколькими микросервисами .NET с помощью федерации API
  • Как построить и развернуть бессерверное приложение React на Azure
  • Динамическая загрузка компонентов в Angular App
  • Быстрое добавление OpenID Connect в приложения Angular

Не забывайте следить за нами в Twitter и подписываться на наш канал YouTube для получения новых интересных материалов. Мы также хотим услышать от вас, какие учебники вы хотели бы увидеть. Оставьте нам комментарий ниже.

Оцените статью
Procodings.ru
Добавить комментарий