Какая конфигурация необходима для обслуживания файлов Angular из проекта веб-API ASP.NET Core, когда оба проекта создавались отдельно? - PullRequest
1 голос
/ 24 сентября 2019

Как указано в заголовке, у меня есть два проекта, которые были созданы независимо друг от друга.1. Проект ASP.NET Core, создаваемый с использованием dotnet new webapi -o TestAPI 2. Проект Angular, созданный с использованием Angular CLI ng new TestAngularApp

Поскольку проект web api является серверной частью для углового проекта, яхочу, чтобы он служил моему угловому приложению.Основываясь на моих исследованиях, ASP.NET Core обслуживает статические файлы: вам нужно создать папку wwwroot в корневом каталоге вашего веб-проекта API и поместить все содержимое, созданное командой ng build --prod, в эту wwwrootпапка.

На следующем шаге я не уверен, что мне нужно настроить дальше.До сих пор в моем файле Startup.cs в методе Configure я добавил

app.UseDefaultFiles(); app.UseStaticFiles();

Теперь это работает, как и ожидалось, когда я запускаю проект webapi в режиме отладки прямо из Visual Studio,Проблема возникает, когда я хочу опубликовать webapi и локально развернуть его в IIS.

Я запускаю команду dotnet publish -c Release, и все файлы генерируются в каталоге .../publish, включая каталог wwwroot, как и ожидалось..

В IIS я создаю приложение в Default Web Site и указываю ему каталог .../publish.

IIS Aplication

На этом этапе я включил Failed Request Tracing на уровне сайта.

Когда я просматриваю приложение, мой webapi правильно пытается обработать файл index.html, но не может загрузить ни один из необходимых ресурсов.

Я попытался добавить правила перезаписи URL как в приложение ThePLeague, так и в каталог 'wwwroot', расположенный внутри этого приложения, но это не работает.Я проверил, чтобы убедиться, что мой модуль перезаписи url действительно работает и работает.

Мой вопрос: Требуется ли моей webapi какая-либо дополнительная конфигурация для успешного обслуживания файлов Angular?

Нужно ли использовать SpaFallbackException, UseSpa, UseSpaStaticFiles или любой из методов расширения префикса Spa, чтобы заставить это работать, или двух уже имеющихся у меня методов достаточно?

Спасибо за любую информацию, которую вы можете предоставить.

ОБНОВЛЕНИЕ

После настройки базового URL, как указано в ответе, мои файлы были успешно обработаны,Мой базовый URL был настроен на <base href="/ThePLeague/">.Однако проблема сейчас в том, что когда я обновляю страницу.Я получаю ошибку 404.У меня есть правила перезаписи URL, которые находятся в том же каталоге, что и веб-интерфейс ASP.NET Core, а НЕ в папке wwwroot, где находятся все мои статические файлы.Это связано с тем, что при включении Failed Request Tracing Rules в IIS журналы не создаются при наличии правил, созданных в папке wwwroot.

Правила перезаписи URL:

enter image description here

`<system.webServer>
        <rewrite>
            <rules>
                <rule name="test">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" />
                    </conditions>
                    <action type="Rewrite" url="wwwroot/index.html" logRewrittenUrl="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>`

Журналы трассировки при обновлении страницы:

enter image description here

1 Ответ

1 голос
/ 25 сентября 2019

Причина

Когда я просматриваю приложение, мой webapi правильно пытается обработать файл index.html, но не может загрузить ни один из необходимых ресурсов

Причина в том, что значение по умолчанию index.html, сгенерированное ng new TestAngularApp, устанавливает base как /:

<head>
  <meta charset="utf-8">
  <title>TestAngularApp</title>
  <b><base href="/"></b>
  ....
</head>

Это приведет к тому, что все ваши активы будут относиться к /.Другими словами, скомпилированные скрипты, на которые есть ссылки в вашем dist/index.html, относятся к корневому пути /:

<script type="text/javascript" src="runtime.06daa30a2963fa413676.js"></script>
<script type="text/javascript" src="polyfills.d64817aaf614d4221ef9.js"></script>
<script type="text/javascript" src="main.b4ca252475698e802446.js"></script>

Поскольку вы используете свой angular с Virtual Path из /ThePLeague, вашassets URL должен иметь с префиксом с /ThePLeague/:

/ThePLeague/runtime.06daa30a2963fa413676.js
/ThePLeague/polyfills.d64817aaf614d4221ef9.js
/ThePLeague/main.b4ca252475698e802446.js

Как исправить

  1. Изменить базовую ссылку/ThePLeague/:

    <base href="/ThePLeague/">
    

    Обратите внимание, что в base href есть трейлинг

  2. Перезагрузите ThePLeague при необходимости.Теперь он должен работать.


Требуется ли моей webapi дополнительная настройка для успешного обслуживания файлов Angular?

Нужно ли мне использовать SpaFallbackException, UseSpa, UseSpaStaticFiles или какой-либо из методов расширения префикса Spa, чтобы заставить это работать, или двух уже имеющихся у меня методов достаточно?

На самом деле, если вам не нужен запасной вариант SPA, вам не нужны никакие другие коды, кроме двух добавленных вами app.UseDefaultFiles();app.UseStaticFiles() методов.

Вам даже не нужно менять правило перезаписи URL IIS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...