ASP.NET Web APIソリューションでAngularアプリを配置する場所は？

私はグリーンフィールドアプリを開始しています。ASP.NET（4.6）とAngular 2を使用したいと思います。バックエンドについては、Visual Studioでプロジェクトを作成しましたが、Angularアプリをどこに配置するのか迷っています。私は本当にフロントエンドにnpmとnode-toolsを使用したいのですが、最終的には同じAzure App Serviceインスタンスでホストされ、Angularアプリdomain.com/とその下のapi domain.com/api/などがあります。

Visual Studioでアプリを分離するにはどうすればよいですか？Angularアプリは独自のプロジェクトに含めるべきですか？APIと同じプロジェクトにAngularアプリを使用する必要がありますか？nugetや他のVSツールを使いたくない場合でも？（フロントエンドの場合、VSは多かれ少なかれ見栄えのするコードエディターになります）。この組み合わせのベストプラクティスは見つかりませんでした。

2つのオプションがあります。

ソリューションに別個のmywebsite.apiプロジェクトとmywebsite.appプロジェクトを作成します。

長所

• 懸念の適切な分離。
• APIとフロントエンドに個別に更新を展開できます。
• サイトのアーキテクチャは個別に変更できます（つまり、Webサイトに影響を与えずにasp.net 5で実行するようにAPIを更新できます）
• クリーナー

1つのプロジェクトでクライアントアプリとAPIの両方を使用して単一のプロジェクトを作成する

長所

• 更新プログラムの展開がより簡単に
• CORSと連携するように設定する必要はありません

アプリケーションをローカルでホストおよび開発する方法。

開発のための効果的なソリューションは、lite-serverを使用してクライアント（Angular 2）アプリケーションを実行し、IIS / Casiniを使用してWeb APIコードをホストすることです。使用方法の良い例は、Angular 2クイックスタートチュートリアル（下記にリンク）にあります。私の開発プロセスは、Visual Studioを介してapiを実行し、Visual Studio Codeとlite-serverを使用してクライアントサイトのコーディングを行うことです（Atomも適切な選択です）。

lite-serverドキュメントから。Webアプリを提供し、ブラウザーで開き、htmlまたはjavascriptの変更時に更新し、ソケットを使用してCSSの変更を挿入し、ルートが見つからない場合にフォールバックページを持つ軽量開発専用ノードサーバー。

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

私の見解

同じソリューションでNuget / NPMを使用しても問題はなく、プロジェクト構造の選択を通知するものではありません。

デモ/概念実証アプリケーションには、単一プロジェクトのアプローチのみを使用します。実稼働リリースの場合、懸念を常に適切に分離し、専用のAPIプロジェクトを作成します。

このシーダープロジェクトhttps://github.com/damienbod/AngularWebpackVisualStudio/を見つけました。これにより、単一のVisual Studio（2017）プロジェクトでクライアントとサーバーを開発およびホストできます。

2つのサイトを使用してホストすることの利点（特に懸念の分離）について@CountZeroのコメントに同意しますが、ほとんどの場合、APIの唯一の消費者が自分のAPIである場合、APIでCORSサポートを有効にする必要があるということ独自のクライアントフロントエンド。私はCORSの専門家ではありませんが、これは不必要なオーバーヘッドのように感じられ、追加のセキュリティ上の脅威も伴います。

もちろん、それらを2つのソリューションに分離したり、ソリューションに別のプロジェクトを追加したり、同じプロジェクトに含めることができます。私が何をするか教えてあげます。

私見、IIS でセッションを活用したり、API内で認証プロセスを非表示にしたい場合は、Visual Studioでも角度を記述します。VS2015は、Web開発拡張機能をインストールする場合、Angularとの非常に優れた統合（インテリセンス）を備えています。この方法は、よりコンパクトでポータブルになると言わなければなりません。

バックエンドプロジェクトにドキュメントページを追加する場合は、それらを独自のプロジェクト（同じソリューション）に分け、サブドメインまたはサブフォルダーからAPIを提供します。

上記のどれにも興味がなく、慣れている方法に慣れている場合は、それを試してください。トークンベースの認証を使用する場合は、間違いなくプロジェクトを分離できます。

VS 2015では、それぞれに異なるプロジェクトURLを設定する限り、デバッグ時にソリューションで複数のプロジェクトを開始するオプションがあります。

例として、Angularアプリプロジェクトを実行http://localhost:55000/するように設定し、APIプロジェクトを実行するように設定できますhttp://localhost:55000/api。[Web]タブのプロジェクトの[プロパティ]ダイアログで[プロジェクトURL]プロパティを設定します。

次に、複数のスタートアッププロジェクトを設定するには、[共通プロパティ]の下の[ソリューションプロパティ]ダイアログで、[スタートアッププロジェクト]ノードを選択します。右側にとのオプションがSingle startup projectありMultiple startup projectsます。[複数のスタートアッププロジェクト]ラジオボタンを選択します。次に、Angularプロジェクトの横にある適切なアクションを選択します（Angularなのでデバッグせずに起動し、ブラウザでデバッグする可能性が高いため）。次に、APIプロジェクトの横にある[開始]を選択します。

実行すると、Angularアプリがブラウザで開き、Web APIも実行を開始します。Web APIメソッドにブレークポイントを設定し、Angularアプリからそれらをヒットできます。