チュートリアル: Visual Studio で Vue を使用して ASP.NET Core アプリを作成する

[アーティクル]
01/24/2025

この記事では、API バックエンドとして機能する ASP.NET Core プロジェクトと、UI として機能する Vue プロジェクトを構築する方法について説明します。

Visual Studio には、Angular、React、Vue をサポートする ASP.NET Core シングルページアプリケーション (SPA) テンプレートが含まれています。テンプレートには、各フレームワークの基本ファイルとフォルダーを含む、ASP.NET Core プロジェクトに組み込みのクライアントアプリフォルダーが用意されています。

この記事で説明されている方法を使用して、次のコアシングルページアプリケーション ASP.NET 作成できます。

ASP.NET Core プロジェクトの外部にある別のプロジェクトにクライアントアプリを配置する
コンピューターにインストールされているフレームワーク CLI に基づいてクライアントプロジェクトを作成する

手記

この記事では、Vite CLI を使用する Visual Studio 2022 バージョン 17.11 の更新されたテンプレートを使用したプロジェクト作成プロセスについて説明します。 Vite は、プロジェクトの依存関係 (package.jsonで構成されているものなど) を使用して Vue のバージョンを決定します。

前提条件

次のコードをインストールしてください。

visual Studio 2022 バージョン 17.11 以降。ASP.NET および Web 開発 ワークロードがインストールされています。 Visual Studio のダウンロードページに移動して、無料でインストールします。ワークロードをインストールする必要があり、既に Visual Studio がある場合は、Tools>ツールと機能の取得...に移動すると、Visual Studio インストーラーが開きます。 [ASP.NET と Web 開発] ワークロードを選んでから [変更] を選びます。
npm (https://www.npmjs.com/) は、Node.jsに含まれています。

フロントエンドアプリを作成する

[スタート] ウィンドウ ([ファイル]>[スタートウィンドウ] を選んで開きます) で、[新しいプロジェクトの作成] を選びます。

の作成を示すスクリーンショット
上部の検索バーで Vue を検索し、選択した言語として JavaScript または TypeScript を使用して Vue と ASP.NET Core を選択します。
プロジェクトに VueWithASP と名前を付け、そして [次へ] を選択します。

[追加情報] ダイアログで、HTTPS の構成が有効になっていることを確認します。ほとんどのシナリオでは、他の設定は既定値のままにします。
[作成] を選びます。

ソリューションエクスプローラーには、次のプロジェクト情報が表示されます。

スタンドアロンの Vue テンプレートと比較すると、ASP.NET Core との統合のために新しいファイルと変更されたファイルがいくつか表示されます。
- vite.config.json (変更)
- HelloWorld.vue (変更済み)
- package.json (変更)

プロジェクトのプロパティを設定する

ソリューションエクスプローラーで、VueWithASP.Server を右クリックし、[プロパティ] 選択します。
[プロパティ] ページで、[デバッグ] タブを開き、[デバッグ起動プロファイルの UI を開く] オプション 選択します。 https プロファイルまたは ASP.NET Core プロジェクトにちなんで名前が付けられたプロファイル (存在する場合) の [ブラウザーの起動] オプションをオフにします。

この値により、ソース気象データを含む Web ページが開かなくなります。

手記

Visual Studio では、launch.json デバッグツールバーの [開始] ボタンに関連付けられているスタートアップ設定が格納されます。現在、launch.json は .vscode フォルダーの下に配置する必要があります。
ソリューションエクスプローラーでソリューションを右クリックし、[プロパティ] 選択します。 [スタートアッププロジェクト] の設定が 複数のプロジェクトに設定されていること、そして両方のプロジェクトのアクションが [開始]に設定されていることを確認します。

プロジェクトを開始する

F5 押すか、ウィンドウの上部にある [スタート] ボタンを選択してアプリを起動します。次の 2 つのコマンドプロンプトが表示されます。

実行中の ASP.NET Core API プロジェクト
VITE v4.4.9 ready in 780 ms などのメッセージを示す Vite CLI

手記

メッセージのコンソール出力を確認します。たとえば、Node.jsを更新するメッセージが表示される場合があります。

Vue アプリが表示され、API 経由で設定されます (localhost ポートはスクリーンショットとは異なる場合があります)。

天気予報アプリを示すスクリーンショット。

アプリが表示されない場合は、「トラブルシューティングの」を参照してください。

プロジェクトを発行する

Visual Studio 2022 バージョン 17.3 以降では、Visual Studio 発行ツールを使用して統合ソリューションを発行できます。

手記

発行を使用するには、Visual Studio 2022 バージョン 17.3 以降を使用して JavaScript プロジェクトを作成します。

ソリューションエクスプローラーで、VueWithASP.Server プロジェクトを右クリックし、追加で [プロジェクト参照>] を選択します。

vuewithasp.client プロジェクトが選択されていることを確認します。
[OK]を選択します。
ASP.NET Core プロジェクトをもう一度右クリックし、[プロジェクトファイルの編集] 選択します。

これにより、プロジェクトの .csproj ファイルが開きます。
.csproj ファイルで、値が falseに設定された <ReferenceOutputAssembly> 要素がプロジェクト参照に含まれていることを確認します。

このリファレンスは次のようになります。
```
 <ProjectReference Include="..\vuewithasp.client\vuewithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>
```
ASP.NET Core プロジェクトを右クリックし、オプション [プロジェクト の再読み込み] が利用可能な場合は、それを選択します。

Program.csで、次のコードが存在することを確認します。

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

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

発行するには、ASP.NET Core プロジェクトを右クリックし、[の発行]選択し、Azure やフォルダーへの発行など、目的の発行シナリオに合わせてオプションを選択します。

発行時に npm run build コマンドが呼び出されるため、ASP.NET Core プロジェクトの場合よりも発行プロセスに時間がかかります。 BuildCommand は、デフォルトで npm run build が実行されます。

フォルダーに発行する場合は、発行フォルダーに追加されたファイルの詳細については、ASP.NET Core ディレクトリ構造 参照してください。

トラブルシューティング

プロキシエラー

次のエラーが表示される場合があります。

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5173 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

この問題が発生した場合は、バックエンドの前にフロントエンドが開始された可能性が最も高くなります。

バックエンドコマンドプロンプトが起動して実行されているのが表示されたら、ブラウザーで Vue アプリを更新するだけです。
また、バックエンドがフロントエンドの前に開始するように構成されていることを確認します。確認するには、ソリューションエクスプローラーでソリューションを選択し、[プロジェクト] メニュー [プロパティ] を選択。次に、[スタートアッププロジェクト構成] を選択し、バックエンド ASP.NET Core プロジェクトが一覧の先頭にあることを確認します。最初でない場合は、プロジェクトを選択し、上方向ボタンを使用して起動リストの最初のプロジェクトにします。

それ以外で、ポートが使用中の場合は、launchSettings.json と vite.config.js でポート番号を 1 だけ大きくしてみます。

プライバシーエラー

次の証明書エラーが表示される場合があります。

Your connection isn't private

%appdata%\local\asp.net\https または %appdata%\roaming\asp.net\httpsから Vue 証明書を削除してから再試行してみてください。

ポートを確認する

気象データが正しく読み込まれない場合は、ポートが正しいことを確認する必要がある場合もあります。

ポート番号が一致していることを確認します。 ASP.NET Core プロジェクトの launchSettings.json ファイル ([プロパティ] フォルダー) に移動します。 applicationUrl プロパティからポート番号を取得します。

複数の applicationUrl プロパティがある場合は、https エンドポイントを使用して 1 つを探します。 https://localhost:7142に似ているように見えるはずです。
次に、Vue プロジェクトの vite.config.js ファイルに移動します。 launchSettings.jsonの applicationUrl プロパティと一致するように、target プロパティを更新します。更新すると、その値は次のようになります。
```
target: 'https://localhost:7142/',
```

古いバージョンの Vue

プロジェクトを作成する際にコンソールメッセージ 「ファイル 'C:\Users\Me\source\repos\vueprojectname\package.json' を見つけることができません」が表示された場合は、Vite CLI のバージョンを更新する必要があるかもしれません。 Vite CLI を更新した後、C:\Users\[yourprofilename]で .vuerc ファイルを削除する必要がある場合もあります。

Docker

Docker サポート有効にしてプロジェクトを作成する場合は、次の手順を実行します。

アプリが読み込まれたら、Visual Studio の [コンテナー] ウィンドウを使用して Docker HTTPS ポートを取得します。 環境の または ポート タブを確認します。
Vue プロジェクトの vite.config.js ファイルを開きます。 [コンテナー] ウィンドウの HTTPS ポートと一致するように、target 変数を更新します。たとえば、次のコードでは次のようになります。
```
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
   env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7163';
```
https://localhost:7163 を一致する HTTPS ポートに変更します (この例では、https://localhost:60833)。
アプリを再起動します。

以前のバージョンの Visual Studio で作成された Docker 構成を使用している場合、バックエンドは Docker プロファイルを使用して起動し、構成されたポート 5173 でリッスンしない可能性があります。解決するには:

次のプロパティを追加して、launchSettings.json で Docker プロファイルを編集します。

"httpPort": 5175, 
"sslPort": 5173

次の手順

ASP.NET Core の SPA アプリケーションの詳細については、「シングルページアプリの開発」を参照してください。リンクされた記事では、aspnetcore-https.jsなどのプロジェクトファイルの追加のコンテキストを提供しますが、プロジェクトテンプレートと Vue.js フレームワークと他のフレームワークの違いにより、実装の詳細は異なります。たとえば、ClientApp フォルダーの代わりに、Vue ファイルは別のプロジェクトに含まれています。

クライアントプロジェクトに固有の MSBuild 情報については、JSPS の MSBuild プロパティを参照してください。

次の方法で共有

チュートリアル: Visual Studio で Vue を使用して ASP.NET Core アプリを作成する

前提条件

フロントエンドアプリを作成する

プロジェクトのプロパティを設定する

プロジェクトを開始する

プロジェクトを発行する

トラブルシューティング

プロキシエラー

プライバシーエラー

ポートを確認する

古いバージョンの Vue

Docker

次の手順

フィードバック

その他のリソース

次の方法で共有

チュートリアル: Visual Studio で Vue を使用して ASP.NET Core アプリを作成する

前提 条件

フロントエンド アプリを作成する

プロジェクトのプロパティを設定する

プロジェクトを開始する

プロジェクトを発行する

トラブルシューティング

プロキシ エラー

プライバシー エラー

ポートを確認する

古いバージョンの Vue

Docker

次の手順

フィードバック

その他のリソース

前提条件

フロントエンドアプリを作成する

プロキシエラー

プライバシーエラー