.NET6 ASP.NET Coreで１つのプロジェクトで、ASP.NET WebAPI+Vue3 Viteの環境を作ってみる

はじめに

• 公式では、ReactとAngularしかないのでVite Vue3 Asp.net Coreの環境を作ってみる。

作成方法

1. VisualStudioを立ち上げで、AngularでのASPNETcoreのテンプレートを選択しプロジェクトを作成する。
   
2. ClientAppフォルダのaspnetcore-https.js以外を削除する。
   
3. プロジェクトが保存されていない任意のフォルダでnpm create vite@latest vuetemplate -- --template vueを実行する。
4. 作成したフォルダにある.vccode フォルダ以外をプロジェクトのClientAppフォルダへコピーする。
   
   
5. .csprojファイルを開く以降csprojファイルxmlを編集する。
6. PropertyGroup要素にある、SpaProxyLaunchCommandがVisualStudioで実行時に実行される、npmのコマンドなのでnpm run devに変更する。
   *.csproj

   <PropertyGroup>
     <TargetFramework>net6.0</TargetFramework>
     <Nullable>enable</Nullable>
     <IsPackable>false</IsPackable>
     <SpaRoot>ClientApp\</SpaRoot>
     <SpaProxyServerUrl>https://localhost:44421</SpaProxyServerUrl>
     <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
   

    - <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    + <SpaProxyLaunchCommand>npm run dev</SpaProxyLaunchCommand>
   

7. 下記がDebugBuild後に実行されるコマンドで、node_modulesディレクトリがないと実行されるnpm installをnpm ciに変更。
   *.csproj

    <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    </Target>
   

   - <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
   + <Exec WorkingDirectory="$(SpaRoot)" Command="npm ci" />
   

8. 下記がDotnet publishで実行されるコマンドなので同様にnpm installをnpm ci にnpm run build -- --prodをnpm run buildに変更する。
   *.csproj

    <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
   
    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
    	<RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
    	<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    	<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
    </Target>  
   

   - <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
   - <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
   + <Exec WorkingDirectory="$(SpaRoot)" Command="npm ci" />
   + <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
   

9. 同様に、distフォルダをコピーしたいので、<DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" /> を<DistFiles Include="$(SpaRoot)dist\**/>に変更

   -  <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
   +  <DistFiles Include="$(SpaRoot)dist\** />
   

10. ClientAppフォルダでターミナルを開き、npm install を行う
11. csprojファイルの<SpaProxyServerUrl>要素で、Asp.netcore からnpmで起動されるポートが確認できる。今回の場合はhttps://localhost:44421です。
12. ASP.NETCoreで使用する証明書を作成する。aspnetcore-https.jsを開くbaseFolderがWindowsとLinuxで違う場所に作成するために分岐をしていて、面倒くさいので、ClientAppにフォルダを作成してしまう。ClientApp.devcertを作成する。

    -  const baseFolder =process.env.APPDATA !== undefined && process.env.APPDATA !== ''
    -  ? `${process.env.APPDATA}/ASP.NET/https`
    -  : `${process.env.HOME}/.aspnet/https`;
    +  const baseFolder = path.join(__dirname, '.devcert');
    

13. .gitignoreに/.devcert/*を無視するように設定
14. package.jsonを編集してnpm run dev の前にaspnetcore-https.jsを実行するように変更する。"predev": "node aspnetcore-https",をscriptsに追加

    +     "predev": "node aspnetcore-https",
    

15. vite.config.jsを開きサーバー起動時に証明書の設定とポートの設定を行う。
    vite.config.js

    import path from 'path'
    
    const baseFolder = path.join(__dirname, '.devcert');
    const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
    const certificateName = certificateArg ? certificateArg.groups.value : process.env.npm_package_name;
    const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
    const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
    export default defineConfig({
     plugins: [vue()],
     server: {
         port: 44421,
         https: {
             key: keyFilePath,
             cert: certFilePath
         }
    }})
    

16. VisualStudioから実行してみる。 SpaPorxyがnpm を起動して、サーバーが立ち上がるブラウザをlocalhos:44421へredirectしているのがわかる。
    
17. ASP.NET core WebApiを呼び出すために、Proxyの設定をフロントエンドViteに設定する。WebAPIはhttps://localhost:7066で動作しているので、https://localhost:7066/api に対してProxyを設定する。vite.config.jsを修正。
    vite.config.js

    import path from 'path'
    
    const baseFolder = path.join(__dirname, '.devcert');
    const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
    const certificateName = certificateArg ? certificateArg.groups.value : process.env.npm_package_name;
    const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
    const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
    export default defineConfig({
     plugins: [vue()],
     server: {
         port: 44421,
         proxy: {
             '^/api': {
                 target: 'https://localhost:7066',
                 changeOrigin: true,
                 secure: false
             }
         },
         https: {
             key: keyFilePath,
             cert: certFilePath
         }
    }})