web-dev-qa-db-ja.com

Angular 6 ASP.NET Coreアプリケーションのデプロイ

Angular 6フロントエンドアプリケーションを追加して、asp.netコア2.0 MVCアプリケーションを開発しました。どちらも同じプロジェクト構造に存在します。asp.netコアアプリケーションは、クライアント側Angular 6アプリケーション。

私はそれらを並行して開発しており、Startup.csファイル内に次のコードセグメントを含めて、両方のアプリケーションの実行中に開発できるようにしています。

_ConfigureServices
      services.AddSpaStaticFiles(configuration => {
        configuration.RootPath = "ClientApp/dist";
      });

Configure
      app.UseSpa(spa => {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment()) {
          spa.UseAngularCliServer(npmScript: "start");
        }
      });
_

Angularアプリケーションのプロジェクト構造は、ClientAppにあります。

このプロジェクトをIISに展開したいと思っています。開発環境から離れるので、コード行spa.UseAngularCliServer(npmScript: "start");は実行されません。

他のアプリケーションの場合と同じように、Visual Studioを介してプロジェクトを公開し、inetpubフォルダーに移動すると、Angular 6アプリケーション内で開発したページが提供されません。 Angular 6アプリケーションのRoutingModule内で定義した/ Homeなどのページにアクセスしようとすると、500内部サーバーエラーが発生します。

Angularアプリケーション（これは_ng build --prod_を介して実行できます）を構築し、コンパイルされたJSファイルをHTMLページに追加する必要があるためです。しかし、確信が持てません。どうすればよいでしょうか。誰かが関連するWebページへのリンクを高く評価していただければ幸いです。

更新＃1：

Startup.csファイル内で、プロダクションモードで実行するときにapp.UseDeveloperExceptionPage（）を使用できるようにしました。

500内部サーバーエラーページの代わりに、例外が発生しました：SPAデフォルトページミドルウェアは、デフォルトページ '/index.html'を検出できなかったため、返すことができませんでした。リクエスト

また、発行後にClientApp/distフォルダーが存在しないことにも気付きました。手動でClientAppをビルドし、inetpubのアプリケーションに追加しました。今、私はコンソールにエラーが表示されます：

_runtime.a66f828dca56eeb90e02.js:1 Uncaught SyntaxError: Unexpected token <

polyfills.7a0e6866a34e280f48e7.js:1 Uncaught SyntaxError: Unexpected token <

Request:10 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/styles.169e0a841442606822c8.css".

scripts.ee7fed27c36eaa5fa8a9.js:1 Uncaught SyntaxError: Unexpected token <

main.befe6f4d3c1275f2e1b3.js:1 Uncaught SyntaxError: Unexpected token <
_
c#asp.netangular
7
Callum Osborn

このコードはASP.NET Core 2.に使用する必要があり、使用しているものではありません。私のアプリケーションは、このアプローチを使用して公開されています。

        app.UseMvc(routes =>
        {
 //Remove this if you don't need it
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
              defaults: new { controller = "Home", action = "SPAIndex" }); // For SPA 
        });

Viewを返すアクションをHomeControllerに含める必要があります。ビューのコードは

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
1
Wiqi

この変更を加えるだけで、製品IISで機能するはずです。

 public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist/client";

        });
    }
0
Ngoc Nguyen Thanh

私はこれと同じ問題をいじっています。しかし、私よりもIIS）に詳しい人の助けを借りて、それを機能させることができました。

Angular 6 .NET Core 2.1アプリをIISで実行するための手順を説明します。

まず、Startup.csからservices.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/dist"; });を削除します

  1. ng build --prodを使用してangularアプリを公開します
  2. WwwrootフォルダーにClientAppフォルダーを作成します
  3. 次に、クライアントアプリフォルダー内に別のwwwrootフォルダーを作成します
  4. Dist\ClientAppから新しいwwwroot/ClientApp/wwwrootパスにファイルをコピーします。
  5. アプリも公開するための新しいディレクトリを作成し、IISが指すようにします。
  6. コマンドラインを使用して.Net Coreアプリを新しいディレクトリに公開し、dotnet publish -c Release -o Your new directoryを実行します
  7. 新しいディレクトリのルートにあるすべての公開ファイルをwwwroot/ClientAppフォルダーに切り取ります。これが画像の例です enter image description here
  8. 新しいweb.configをwwwroot/ClientAppフォルダーに追加します。
  9. これをあなたの設定に追加してください
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="dotnet" arguments=".\YourApp.dll" stdoutLogEnabled="true" stdoutLogFile=".\stdout" />
    <rewrite>
      <rules>
        <rule name="AngularApi" stopProcessing="true">
          <match url="ControllerName/.*" />
          <action type="None" />
        </rule>
        <rule name="Angular Routes" enabled="true" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
    <httpErrors errorMode="Detailed" existingResponse="Replace">
      <remove statusCode="404" />
      <error statusCode="404" responseMode="ExecuteURL" path="/index.html" />
    </httpErrors>
  </system.webServer>
</configuration>
  1. IISにWebサイトを作成し、新しい公開ディレクトリのwwwroot/ClientAppフォルダを指すようにします。これはC:\Projects\ClientLocatorExceptions2\wwwroot\ClientAppのようになります。
0
Austin Born

Visual Studio 2019はこのためのプロジェクトテンプレートを提供します。スタートページの最初のステップで新しいプロジェクトを選択し、ASP.NET Core Web Application C＃を選択し、ソリューション名を入力して、Angularプロジェクトテンプレートを選択します。 .NET Coreまたは.NET Frameworkで実行されているASP.NET Coreに基づいてソリューションを構築できます。

0
Stephan Kühn