Не удается разместить приложение nextjs (SSG) с базовым путём в статическом веб-приложении Azure.

Вопрос или проблема

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  basePath: '/app1',
  output: 'export',
  webpack(config, { isServer }) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    config.plugins.push(
      new NextFederationPlugin({
        name: 'someremotemfe',
        filename: `static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
        dts: false,
        exposes: {
          './Component1': './components/component/Component1',
        },
        extraOptions: {
          exposePages: false,
        },
      }),
    );
    return config;
  },
};

            - task: Bash@3
              displayName: Сборка с использованием turbo
              inputs:
                targetType: 'inline'
                script: |
                  pnpm run build
              env:
                NEXT_PUBLIC_MFE_HOST_URL: ${{ parameters.MfeHostUrl }}
            - task: AzureStaticWebApp@0
              displayName: 'Развернуть на SWA'
              inputs:
                app_location: 'apps/ui/out'
                api_location: 'apps/api'
                output_location: ''
                skip_app_build: true
                skip_api_build: true
                verbose: true
                azure_static_web_apps_api_token: ${{ parameters.DeploymentToken }}
              env:
                IS_STATIC_EXPORT: true

Ответ или решение

Как разместить Next.js приложение (SSG) с basePath в Azure Static Web Apps

Внедрение Next.js приложения с указанным basePath в Azure Static Web Apps может вызвать некоторые сложности, особенно если вы используете статический экспорт (SSG) и хотите обеспечить корректную работу маршрутизации. Рассмотрим, как можно правильно настроить ваше приложение на Azure с учетом всех нюансов.

1. Настройка next.config.mjs

Ваша конфигурация Next.js выглядит корректно, но важно учитывать, что при использовании basePath все статические ресурсы должны корректно ссылаться на путь, начинающийся с /app1. Проверьте, что имя вашего приложения верно указано, и все используемые компоненты правильно подхватывают basePath. Ваш next.config.mjs выглядит следующим образом:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  basePath: '/app1',
  output: 'export',
  webpack(config, { isServer }) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    config.plugins.push(
      new NextFederationPlugin({
        name: 'someremotemfe',
        filename: `static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
        dts: false,
        exposes: {
          './Component1': './components/component/Component1',
        },
        extraOptions: {
          exposePages: false,
        },
      }),
    );
    return config;
  },
};

Убедитесь, что все пути к статическим ресурсам в вашем коде корректно указывают на basePath. Например, если вы используете изображения или другие статические ресурсы, их пути должны быть стабильными относительно basePath.

2. Установка правильного пути в yaml конфигурации

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

Ваш YAML файл выглядит следующим образом:

- task: Bash@3
  displayName: Build using turbo
  inputs:
    targetType: 'inline'
    script: |
      pnpm run build
  env:
    NEXT_PUBLIC_MFE_HOST_URL: ${{ parameters.MfeHostUrl }}
- task: AzureStaticWebApp@0
  displayName: 'Deploy to SWA'
  inputs:
    app_location: 'apps/ui/out'
    api_location: 'apps/api'
    output_location: ''
    skip_app_build: true
    skip_api_build: true
    verbose: true
    azure_static_web_apps_api_token: ${{ parameters.DeploymentToken }}
  env:
    IS_STATIC_EXPORT: true

3. Исправления в yaml конфигурации

На этапе развертывания вам нужно убедиться, что output_location правильно указывает на выходные файлы, созданные вашим Next.js приложением. После статической сборки Next.js в папке out должны находиться все необходимые статические файлы, включая директория с ресурсами с basePath.

Обновите вашу конфигурацию следующим образом:

- task: AzureStaticWebApp@0
  displayName: 'Deploy to SWA'
  inputs:
    app_location: 'apps/ui/out'
    api_location: 'apps/api'
    output_location: 'out'  # Убедитесь, что это указание на выходные файлы
    skip_app_build: true
    skip_api_build: true
    verbose: true
    azure_static_web_apps_api_token: ${{ parameters.DeploymentToken }}
  env:
    IS_STATIC_EXPORT: true

4. Тестирование развертывания

После выполнения всех вышеуказанных пунктов разверните приложение в Azure Static Web Apps и протестируйте доступ к вашей странице по адресу https://<your-app-name>.staticapps.net/app1/. Все маршруты и ресурсы должны подхватываться соответствующим образом. Обратите внимание на консоль разработчика вашего браузера для выявления возможных ошибок загрузки ресурсов или маршрутизации.

Заключение

Настройка Next.js приложения с использованием basePath в Azure Static Web Apps требует внимательного подхода к конфигурации и корректным указаниям путей в зависимости от структуры проекта. Следуя описанным шагам, вы сможете успешно развернуть ваше приложение и обеспечить его корректную работу. Если возникнут дополнительные вопросы, рекомендую обратиться к документации Azure или сообществу разработчиков Next.js для получения поддержки.