web-dev-qa-db-ja.com

AngularアプリをASP.NET Web APIソリューションのどこに配置しますか？

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

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

coding-styleasp.netvisual-studioangularjs
16
Christian Wattengård

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

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

利点

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

1つのプロジェクトにクライアントアプリとAPIの両方を含む単一のプロジェクトを作成する

利点

  • 更新の展開が簡単
  • CORSで動作するように構成する必要はありません

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

開発の効果的なソリューションは、lite-serverを使用してクライアント（Angular 2）アプリケーションを実行し、IIS/Casini to Host your web api code。を使用する良い例です。 Angular 2クイックスタートチュートリアル（以下にリンク）。私の開発プロセスは、Visual Studioを介してapiを実行し、Visual Studio Codeとlite-serverを使用してクライアントサイトのコーディングを操作することです（Atomは別の良い選択）。

ライトサーバーのドキュメントから。 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プロジェクトを用意します。

13
CountZero

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

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

2
Chet

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

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

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

= run Angularアプリがブラウザーで開き、Web APIも実行されます。WebAPIメソッドにブレークポイントを設定し、Angularアプリ。

0
Mike Devenney

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

IMHO、IISでSessionsを利用する、および/またはAPI内で認証プロセスを非表示にする場合は、angular Visualで書き込みますStudioも同様です。VS2015は、angular= Web開発拡張機能をインストールする場合）とのかなり優れた統合（intellisense）を備えています。

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

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

0
st.