Quantcast
Channel: C#タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8895

Vue.jsおよび.NET Core 3の開発

$
0
0

概要

.NET Core 3.0 の Webアプリケーション(API テンプレート)で Vue.jsをフロントエンドにして開発を行う方法。 React や Angular のテンプレートはすでに公式から出ています。(Vue.js もコマンドラインからの作成ならできたはず)

前提条件

手順

ASP.NET Core Web アプリケーションを作成します。

image.png

テンプレートは API を選択します。
image.png
image.png

プロジェクトフォルダに移動し、vue-cli を利用してVuejsのプロジェクトを作成します。
image.png

vue create client-app   

image.png
このようになります。

nuget から Microsoft.AspNetCore.SpaServices.Extensions を追加します。
image.png

プロジェクトファイルを以下のように編集します。

<ProjectSdk="Microsoft.NET.Sdk.Web"><PropertyGroup><TargetFramework>netcoreapp3.0</TargetFramework><SpaRoot>client-app\</SpaRoot><DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes><TypeScriptCompileBlocked>true</TypeScriptCompileBlocked><TypeScriptToolsVersion>Latest</TypeScriptToolsVersion><IsPackable>false</IsPackable></PropertyGroup><TargetName="PublishRunWebpack"AfterTargets="ComputeFilesToPublish"><ExecWorkingDirectory="$(SpaRoot)"Command="npm install"/><ExecWorkingDirectory="$(SpaRoot)"Command="npm run build"/><ItemGroup><DistFilesInclude="$(SpaRoot)dist\**"/><ResolvedFileToPublishInclude="@(DistFiles->'%(FullPath)')"Exclude="@(ResolvedFileToPublish)"><RelativePath>%(DistFiles.Identity)</RelativePath><CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory></ResolvedFileToPublish></ItemGroup></Target><ItemGroup><PackageReferenceInclude="Microsoft.AspNetCore.SpaServices.Extensions"Version="3.0.0"/></ItemGroup><ItemGroup><ContentRemove="$(SpaRoot)**"/><NoneRemove="$(SpaRoot)**"/><NoneInclude="$(SpaRoot)**"Exclude="$(SpaRoot)node_modules\**"/></ItemGroup><TargetName="DebugEnsureNodeEnv"BeforeTargets="Build"Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') "><ExecCommand="node --version"ContinueOnError="true"><OutputTaskParameter="ExitCode"PropertyName="ErrorCode"/></Exec><ErrorCondition="'$(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."/><MessageImportance="high"Text="Restoring dependencies using 'npm'. This may take several minutes..."/><ExecWorkingDirectory="$(SpaRoot)"Command="npm install"/></Target></Project>

プロジェクトに VueCoreConnections を言う名前でフォルダを作成し、その下に Connection.cs を作成します。
image.png

Connection.cs
usingMicrosoft.AspNetCore.Builder;usingMicrosoft.AspNetCore.SpaServices;usingMicrosoft.Extensions.DependencyInjection;usingMicrosoft.Extensions.Logging;usingSystem;usingSystem.Diagnostics;usingSystem.IO;usingSystem.Linq;usingSystem.Net.NetworkInformation;usingSystem.Runtime.InteropServices;usingSystem.Threading.Tasks;namespaceWebApplication1.VueCoreConnections{publicstaticclassConnection{privatestaticintPort{get;}=8080;privatestaticUriDevelopmentServerEndpoint{get;}=newUri($"http://localhost:{Port}");privatestaticTimeSpanTimeout{get;}=TimeSpan.FromSeconds(60);privatestaticstringDoneMessage{get;}="DONE  Compiled successfully in";publicstaticvoidUseVueDevelopmentServer(thisISpaBuilderspa){spa.UseProxyToSpaDevelopmentServer(async()=>{varloggerFactory=spa.ApplicationBuilder.ApplicationServices.GetService<ILoggerFactory>();varlogger=loggerFactory.CreateLogger("Vue");if(IsRunning()){returnDevelopmentServerEndpoint;}varisWindows=RuntimeInformation.IsOSPlatform(OSPlatform.Windows);varprocessInfo=newProcessStartInfo{FileName=isWindows?"cmd":"npm",Arguments=$"{(isWindows?"/c npm ":"")}run serve",WorkingDirectory="client-app",RedirectStandardError=true,RedirectStandardInput=true,RedirectStandardOutput=true,UseShellExecute=false,};varprocess=Process.Start(processInfo);vartcs=newTaskCompletionSource<int>();_=Task.Run(()=>{try{stringline;while((line=process.StandardOutput.ReadLine())!=null){logger.LogInformation(line);if(!tcs.Task.IsCompleted&&line.Contains(DoneMessage)){tcs.SetResult(1);}}}catch(EndOfStreamExceptionex){logger.LogError(ex.ToString());tcs.SetException(newInvalidOperationException("'npm run serve' failed.",ex));}});_=Task.Run(()=>{try{stringline;while((line=process.StandardError.ReadLine())!=null){logger.LogError(line);}}catch(EndOfStreamExceptionex){logger.LogError(ex.ToString());tcs.SetException(newInvalidOperationException("'npm run serve' failed.",ex));}});vartimeout=Task.Delay(Timeout);if(awaitTask.WhenAny(timeout,tcs.Task)==timeout){thrownewTimeoutException();}returnDevelopmentServerEndpoint;});}privatestaticboolIsRunning()=>IPGlobalProperties.GetIPGlobalProperties().GetActiveTcpListeners().Select(x=>x.Port).Contains(Port);}}

Startup.cs を編集します。

Startup.cs
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Threading.Tasks;usingMicrosoft.AspNetCore.Builder;usingMicrosoft.AspNetCore.Hosting;usingMicrosoft.AspNetCore.HttpsPolicy;usingMicrosoft.AspNetCore.Mvc;usingMicrosoft.Extensions.Configuration;usingMicrosoft.Extensions.DependencyInjection;usingMicrosoft.Extensions.Hosting;usingMicrosoft.Extensions.Logging;usingWebApplication1.VueCoreConnections;namespaceWebApplication1{publicclassStartup{publicStartup(IConfigurationconfiguration){Configuration=configuration;}publicIConfigurationConfiguration{get;}// This method gets called by the runtime. Use this method to add services to the container.  publicvoidConfigureServices(IServiceCollectionservices){services.AddControllers();// connect vue app - middleware  services.AddSpaStaticFiles(options=>options.RootPath="client-app/dist");}// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.  publicvoidConfigure(IApplicationBuilderapp,IWebHostEnvironmentenv){if(env.IsDevelopment()){app.UseDeveloperExceptionPage();}else{// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.  app.UseHsts();}app.UseHttpsRedirection();app.UseRouting();app.UseAuthorization();app.UseEndpoints(endpoints=>{endpoints.MapControllers();});// use middleware and launch server for Vue  app.UseSpaStaticFiles();app.UseSpa(spa=>{spa.Options.SourcePath="client-app";if(env.IsDevelopment()){spa.UseVueDevelopmentServer();}});}}}

以上です。 F5 でデバック実行しましょう。初回のみ npm install が実行されます。
image.png

ヒント

起動時に
image.png

こちらに遷移してしまう場合は プロジェクトのデバック設定を確認してください。
image.png

参考


Viewing all articles
Browse latest Browse all 8895

Trending Articles