Публикация Angular с .NET Core на удалённый сайт

На чтение 3 мин Опубликовано 11.10.2024

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

Кто-нибудь имеет опыт в этом?

Я построил программу с использованием VS 2022. Я установил стартовый проект как проект .Server, где находится API, и у меня есть программа Angular 18 в проекте .Client. Всё это работает в разработке.

В .csproj для серверного проекта, я полагаю, он правильно инициализирует клиент:

<PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <SpaRoot>..\calorieassistant.client</SpaRoot>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    <SpaProxyServerUrl>https://localhost:4200</SpaProxyServerUrl>
</PropertyGroup>

Я развертываю его на удаленном сайте с помощью VS и документа о развертывании сайта, что проходит без ошибок.

Но не повезло – я получаю ‘не удалось загрузить’, когда перехожу на сайт (раньше отображалось сообщение ‘этот сайт просто размещен’).

Кто-нибудь делал это или вы видите что-то, что я сделал неправильно?

Сайт https://calorieassistant.com, если хотите проверить его.

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

Чтобы опубликовать приложение Angular с использованием .NET Core на удаленном сайте, важно убедиться, что все шаги выполнены корректно. Поскольку ваше приложение работает в локальной среде, переходим к тому, что может вызвать проблему при развертывании. Давайте разберем несколько ключевых моментов.

Проверка выходного результата сборки:
- Убедитесь, что приложение Angular правильно собирается в каталоге выходных данных .NET. При сборке проекта обычно Angular приложение оказывается в папке wwwroot вашего .Server проекта. Проверьте, что там есть все необходимые файлы.
Настройки конфигурации:
- В вашем .csproj файле указаны правильные пути:
```
<SpaRoot>..\calorieassistant.client\</SpaRoot>
```
  Убедитесь, что путь к клиентскому приложению указан верно, и что приложение действительно находится в указанной директории.
Настройка корневого URL:
- Убедитесь, что ваше API настроено правильно для работы с запросами из клиентской части. В некоторых случаях необходима правильная настройка CORS (Cross-Origin Resource Sharing).
Проверка настроек сервера:
- Проверьте, что конфигурация вашего удаленного сервера настроена на подачу статических файлов из папки wwwroot. На некоторых серверах это может быть отключено по умолчанию.
- Если вы используете IIS, убедитесь, что включен модуль статических файлов.
Логи и отладка:
- Посмотрите логи вашего приложения на удаленном сервере. Возможно, там есть ошибки, которые помогут понять, что не так.
- Если у вас есть доступ к инструментам разработчика в браузере (например, Google Chrome), откройте консоль и проверьте наличие ошибок загрузки файлов, особенно .js и .css.
Проверка URL:
- Убедитесь, что вы обращаетесь к правильному URL. Это может быть связано с конфигурацией редиректов или маршрутами в вашем приложении. Проверьте ваши маршруты в Angular и соответствие с API.
Кэширование:
- Проверьте, нет ли проблем с кэшированием на стороне браузера. Иногда старые файлы могут сохраняться в кэше, поэтому попробуйте очистить кэш или открыть страницу в режиме «инкогнито».
Доступ к удаленному серверу:
- Поскольку ссылка на ваш сайт активна, попробуйте выполнить последовательность ping и traceroute, чтобы убедиться, что сервер доступен и нет сетевых проблем.

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

Надеюсь, это поможет вам успешно развернуть ваше приложение Angular с .NET Core на удаленном сервере. Если появятся дополнительные вопросы, не стесняйтесь обращаться.