[英]Asp.Net Core Web Api and Vue.js client with IIS
I'm trying to create an app with Asp.Net Core (.NET 6.0) as backend and Vue.js as frontend.我正在尝试创建一个以 Asp.Net Core (.NET 6.0) 作为后端,以 Vue.js 作为前端的应用程序。 I've created the .NET project inside Visual Studio 2022, added SPA Extensions and finally my Program.cs file look like this:
我在 Visual Studio 2022 中创建了 .NET 项目,添加了 SPA 扩展,最后我的 Program.cs 文件如下所示:
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// Used by single page application requirements.
builder.Services.AddSpaStaticFiles(options =>
{
options.RootPath = "wwwroot";
});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.UseStaticFiles();
if (!app.Environment.IsDevelopment())
{
app.UseSpaStaticFiles();
}
app.UseSpa(configuration =>
{
configuration.Options.SourcePath = "wwwroot";
if (app.Environment.IsDevelopment())
{
configuration.UseProxyToSpaDevelopmentServer("http://localhost:5002");
}
});
app.Run();
Deploying code with setttings:使用设置部署代码:
Release
Release
net6.0
Frameworknet6.0
框架win-x64
Runtimewin-x64
运行时Produce me a folder containing wwwroot folder with frontend files and many files for my backend application.为我生成一个包含 wwwroot 文件夹的文件夹,其中包含前端文件和我的后端应用程序的许多文件。 I put them in an application inside iis server with an application pool configured as:
我将它们放在 iis 服务器内的应用程序中,应用程序池配置为:
But my application can only load index.html file but not any.js or.css.但是我的应用程序只能加载 index.html 文件而不能加载 any.js 或 .css。
My application has a binding like this: https://app.domain.it/app-name and she try to open https://app.domain.it/filename.ext file each time, failing, since file is in a https://app.domain.it/app-name/wwwroot/file.ext and he's searching for https://app.domain.it/file.ext我的应用程序具有这样的绑定: https://app.domain.it/app-name她每次都尝试打开https://app.domain.it/filename.ext文件,但失败了,因为文件位于https://app.domain.it/app-name/wwwroot/file.ext他正在搜索https://app.domain.it/file.ext
Anyone could help me?任何人都可以帮助我吗?
Edit 1: since I've selected Self-contained mode, I don't need the .NET 6 runtime installed on server host, right?编辑 1:因为我选择了独立模式,所以我不需要在服务器主机上安装 .NET 6 运行时,对吧?
My recommendation is to create two different Application Pools and then deploy the .net core solution as your API (a) and the vue-app as your UI (b) separately.我的建议是创建两个不同的应用程序池,然后分别将 .net 核心解决方案部署为您的 API (a) 并将 vue-app 作为您的 UI (b)。
(a) Standard Deployment with neither a project reference to UI-project nor a configuration of the pipeline regarding Static and default Files ( app.UseStaticFiles(); app.UseDefaultFiles(); not necessary ) (a) 标准部署,既没有对 UI 项目的项目引用,也没有关于 Static 和默认文件的管道配置( app.UseStaticFiles(); app.UseDefaultFiles(); 不是必需的)
(b) right click on vue project in VS and "Open in Terminal" -> then npm run build -> then go to dist folder and copy content to physical path for respective application pool on IIS (b) 在 VS 中右键单击 vue 项目并“在终端中打开”-> 然后npm 运行构建-> 然后 go 到 dist 文件夹并将内容复制到 IIS 上相应应用程序池的物理路径
Solution worked for me.解决方案对我有用。 Let me know if it is a solution for you as well and if you have any questions.
让我知道它是否也适合您,如果您有任何问题。 Hope I could help you.
希望我能帮助你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.