ASP.NET WebAPI + Vue.jsを試してみる

全く需要はないと思いますが、ASP.NET WebAPIのindexページをVue.jsで表示してみたいと思います。

環境

OS	Windows 10 Pro
フレームワーク	.NET Framwork 4.8
開発環境	Visual Studio 2019

ASP.NET WebAPI プロジェクト作成

1. Visual Studioを起動
2. 新しいプロジェクト
3. インストール済み > Visual C# > Web を選択
4. ASP.NET Webアプリケーション (.NET Framwork) を選択
5. 名前は適当（今回は「WebApplication1」としました）
6. OKをクリック

1. テンプレートに「Empty」を選択
2. フォルダーおよびコア参照を追加するにて「Web API」にチェック
3. OKをクリック

初期状態での動作確認

プロジェクト作成したての状態で一度「デバック」実行します。

index.htmlが存在しない為、403エラーが発生します。

今回はここにVue.jsで作成したページを表示させたいと思います。

Node.jsのインストール

PCにNode.jsをインストールします。※インストール方法はここでは割愛します。

コマンドプロンプトにて以下のようにNode.jsとnpmのバージョンが表示されれば完了です。

c:\>node --version
v12.14.0

c:\>npm --version
6.13.4

vue-cliのインストール

Visual Studioのソリューションエクスプローラーにて、プロジェクト直下に「Client」フォルダを作成します。※この中にvueプロジェクトを作成していきます

コマンドプロンプトにて作成した「Client」フォルダに移動します

c:\> cd C:\(省略)\WebApplication1\Client
c:\(省略)\WebApplication1\Client>

以下のコマンドを入力し、package.json のテンプレートを作成します。

c:\(省略)\WebApplication1\Client>npm init
(省略)
package name: client
※その他は初期値のままエンター

Clientフォルダ配下に「 package.json 」が作成されていれば成功です。

次に、vue-cliをインストールする為、以下のコマンドを入力します。

c:\(省略)\WebApplication1\Client>npm install --save-dev @vue/cli

インストール完了後、念のため以下のコマンドでvue/cliのバージョンを確認します。

c:\(省略)\WebApplication1\Client>npx vue --version

vueプロジェクト作成

以下のコマンドを入力します。

c:\(省略)\WebApplication1\Client>npx vue create client

今回は以下の内容でプロジェクトを作成しました。

1. Please pick a preset: Manually select features
2. Check the features neeses for your project: Babel, Linter
3. Pick a linter / formatter config: Basic
4. Pick additional lint features: Lint on save
5. Where do you prefer placing for future project? No
6. Pick the package manager to use when installing dependencies: Use npm

初期状態でのVueプロジェクトの動作確認

プロジェクト作成完了後、コマンド上の指示に従い、一度プロジェクトを起動してみます。

c:\(省略)\WebApplication1\Client>cd client
c:\(省略)\WebApplication1\Client\client>npm run serve

ブラウザ上に以下のような画面が表示されれば成功です。

Vueプロジェクトのビルド設定

今回はvueプロジェクトのビルド結果の出力先を、ASP.NET WebAPIプロジェクトの直下のフォルダに出力するようにします。

まず、 出力先 フォルダ「Static」を作成します。

次に、vueプロジェクトのビルド設定を行うため、vueプロジェクト直下に「vue.config.js」を作成します。

※Visual Studioのソリューションエクスプローラーから行う場合、一度「最新の情報に更新」したのち、「すべてのファイルを表示」にチェックを入れます。

「vue.config.js」 に以下の内容を入力します。

module.exports = {
    // WebAPIと組み合わせて動作確認する用とvue単体で動作確認する用
    publicPath: process.env.NODE_ENV === 'production'
        ? './Static/'
        : './',
    // ビルド出力先
    outputDir: '../../Static',
    // 都度出力ファイル名が変わるとASP.NET WebAPIのプロジェクトに含めるのが面倒なので固定
    filenameHashing: false
}

ASP.NET WebAPI プロジェクトのビルド設定

ASP.NET WebAPI のプロジェクト側のビルド設定を少し変更します。
具体的には、 ASP.NET WebAPI のビルド前にvueプロジェクトのビルドを自動で実施するようにします。

ASP.NET WebAPI のプロジェクトのプロパティからビルドイベント画面を表示し、ビルド前イベントのコマンドラインに以下を入力します。

Indexページの設定

ASP.NET WebAPI プロジェクト の「web.config」に以下の内容を追記します。

<configuration>
(省略)
  <system.webServer>
    (省略)
    <!-- ここから -->
    <defaultDocument enabled="true">
      <files>
        <clear />
        <add value="Static/index.html" />
      </files>
    </defaultDocument>
    <!-- ここまで -->
  </system.webServer>
</configuration>

初回ビルド

ソリューションのビルド（Ctrl+Shift+B）を一度行います。

正常に終了すると、作成した「Static」フォルダ内にvueプロジェクトのビルド結果が出力されています。

この状態で、「Static」フォルダとその配下全てを ASP.NET WebAPI プロジェクトに含めます。

デバックを実行する

ASP.NET WebAPI プロジェクトを「デバック」実行します。

すると、以前は403ページが表示されていたところにVueプロジェクトのデフォルトページが表示されるようになりました。

あとはフロントエンド側のVue.jsで、バックエンド側のASP.NETのWebAPIを叩いたりすれば、「Webサーバ兼APIサーバ」などが実現可能かと思います。