Создайте шаблон и разверните панель инструментов для Netlify

Это вторая статья из серии статей, целью которой является демонстрация процесса формирования и развертывания микроинтерфейсной архитектуры с использованием Nx и Netlify. Мы создадим приложение Dashboard в качестве хост-приложения и пройдем этапы его развертывания в Netlify.

Статьи в серии

• Введение в развертывание MFE с Netlify
• Сформировать и развернуть панель инструментов для Netlify
• Сборка и развертывание удаленных приложений для Netlify
• Интеграция удаленных приложений с панелью инструментов

Подпишитесь на нас в Twitter или подпишитесь на рассылку новостей, чтобы получать уведомления о публикации новых статей.

Подмости для приборной панели

Приложение Dashboard будет хост-приложением MFE. В контексте Micro Frontends хост-приложение извлекает федеративный код из ряда удаленно развернутых приложений во время выполнения. Он действует как контейнер для удаленно развернутых приложений, размещая их в определенной области в хост-приложении, которая имеет смысл для вашей системы. Он отправляет развернутым удаленным приложениям запрос на получение файла, содержащего открытый код, который затем может быть использован хост-приложением.

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

yarn nx g @nrwl/angular:host dashboard --style=scss

Запуск этой команды сделает несколько вещей:

• Он генерирует новое приложение Angular.
• Он изменит исполнителя сборки и обслуживания на тот, который поддерживает пользовательскую конфигурацию веб-пакета.
• Будет создан новый файл mfe.config.js, содержащий конфигурацию Module Federation.
• Он создаст пользовательский файл webpack.config.js, используя thewithModuleFederationhelper, предоставленный @nrwl/angular.

Наше приложение Dashboard теперь готово к использованию кода из удаленных приложений.

Если мы обслуживаем приложение локально, запустив:

yarn nx serve dashboard

Наше приложение должно создаваться и обслуживаться правильно. Переход к http://localhost:4200 должен привести к следующему:

Однако он еще не готов к развертыванию.

Подготовьте приложение к развертыванию

Когда мы создаем панель инструментов, она создается в статических файлах. index.html, набор файлов JavaScript и файл CSS. В стандартном развертывании приложения Angular, как и в большинстве SPA, мы не перенаправляемся к другим файлам, размещенным на сервере. SPA предотвратит стандартную маршрутизацию браузера и вместо этого будет загружать другой код JavaScript в зависимости от пути в нашем URL-адресе. Чтобы это произошло после развертывания SPA, нам нужно сообщить нашему веб-серверу, что все маршруты должны разрешаться в наш файл index.html, позволяя Angular обрабатывать маршрутизацию внутри себя. Поэтому нам нужно указать Netlify, как обрабатывать запросы к конечным точкам, перенаправляя их в файл index.htmlfile.

Netlify предоставляет удобный способ настройки развертывания вашего сайта. Вы можете указать файл netlify.toml, который Netlify автоматически подберет и применит в процессе развертывания. Давайте создадим этот файл.

Создайте файл netlify.toml в корневом каталоге приложения Dashboard (apps/dashboard/src) и поместите в него следующее содержимое:

[[redirects]]
  from = “/*”
  to = “/index.html”
  status = 200

Нам также нужно указать нашему исполнителю включить этот файл в выходные данные сборки. Откройте файл project.json для приложения Dashboard (apps/dashboard/project.json) и найдите параметр build. Это должно выглядеть так:

"build": {
  "executor": "@nrwl/angular:webpack-browser",
  "outputs": ["{options.outputPath}"],
  "options": {
    "outputPath": "dist/apps/dashboard",
    "index": "apps/dashboard/src/index.html",
    "main": "apps/dashboard/src/main.ts",
    "polyfills": "apps/dashboard/src/polyfills.ts",
    "tsConfig": "apps/dashboard/tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "assets": [
      "apps/dashboard/src/favicon.ico",
      "apps/dashboard/src/assets"
    ],
    "styles": ["apps/dashboard/src/styles.scss"],
    "scripts": [],
    "customWebpackConfig": {
      "path": "apps/dashboard/webpack.config.js"
    }
},

Добавьте файл netlify.tomlв массив assets, чтобы он был скопирован на место. Ваша конфигурация build должна выглядеть так:

"build": {
  ...
  "options": {
    ...
    "assets": [
      "apps/dashboard/src/favicon.ico",
      "apps/dashboard/src/assets",
      "apps/dashboard/src/netlify.toml"
    ],
    ...
},

Давайте зафиксируем наши изменения и отправим их в наше удаленное репо:

git add .
git commit -m “feat: scaffold dashboard application”
git push

Теперь приложение готово к развертыванию в Netlify!

Разверните панель мониторинга

Давайте развернем наш сайт на Netlify. Перейдите на https://app.netlify.com.

Чтобы настроить наш сайт Dashboard, выполните следующие действия:

1. Нажмите кнопку «Импорт из Git».
2. Щелкните GitHub, когда будет предложено подключиться к поставщику Git.
3. Выберите свой репозиторий.
4. Измените команду Build и каталог публикации.
   a) Команда Build должна быть yarn build dashboard
b) Каталог публикации должен быть dist/apps/dashboard
5. Щелкните Развернуть сайт.

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

Нажав на URL-адрес, вы перейдете к развернутому приложению. Это так просто!

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

Блог: https://blog.nrwl.io/
Твиттер NxDevTools: https://twitter.com/NxDevTools
Твиттер Nrwl: https://twitter.com/nrwl_io
Твиттер Колума Ферри: https://twitter.com/FerryColum