使用不带SPA代理的ASP.NET Core React.js模板

4ngedf3f  于 2023-05-30  发布在  .NET
关注(0)|答案(3)|浏览(103)

在VS 2019 Preview中,您有多个模板。我对以下两个感兴趣:

我玩了一会儿,我观察到了不同之处。在ASP.NET Core with React.js模板中,启动了SPA代理服务器,而在ASP.NET Core with React.js and Redux中,仅在没有SPA代理服务器的情况下工作(第二个模板是TS,而不是JS)。
simply works without that是什么意思我已经查看了两个.csproj文件,并观察到了一个差异(我将只附上值得注意的差异):
第一个模板:

...
    <SpaProxyServerUrl>https://localhost:5002</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="6.0.0-preview.6.21355.2" />
  </ItemGroup>
...
 <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
...

第二模板:

...
# SpaProxy stuff missing
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="6.0.0-preview.5.21301.17" />
  </ItemGroup>
...
 <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**; $(SpaRoot)build-ssr\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>

注意,在第二个模板中,使用Microsoft.AspNetCore.SpaServices.Extensions而不是Microsoft.AspNetCore.SpaProxy
Startup.cs文件中也有一些差异。第二个模板使用了一些额外的中间件

public void ConfigureServices(IServiceCollection services)
    {
      services.AddControllersWithViews();

      // NEW
      services.AddSpaStaticFiles(configuration =>
      {
        configuration.RootPath = "ClientApp/build";
      });
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      ...
      // NEW
      app.UseSpaStaticFiles();
      ...
      // NEW
      app.UseSpa(spa =>
      {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
          spa.UseReactDevelopmentServer(npmScript: "start");
        }
      });
    }

我还观察到,在JS ClientApp中有一个setupProxy.js文件,而在TS ClientApp中没有。此外,npm start命令被设置为"start": "rimraf ./build && react-scripts start",而在TS文件中它仅为react-scripts start
我试图进行必要的调整来运行像TS一样的JS应用程序,但我认为我错过了一些东西,因为我遇到了一个问题:
System.Net.Http.HttpRequestException:无法将请求代理到http://localhost:61105/,因为对代理目标的请求失败。检查代理目标服务器是否正在运行并接受对http://localhost:61105/的请求。
虽然这个错误是有意义的,但我不知道TS模板在哪里以及如何启动这样一个代理服务器,如果它确实这样做的话。
我的问题是:我可以在JS模板中获得TS模板的行为吗?如果是,如何进行?如果不是,原因何在?

unguejic

unguejic1#

我不知道TS模板在哪里以及如何启动这样一个代理服务器,如果它有的话。
这就是spa.UseReactDevelopmentServer(npmScript: "start")为您所做的。查看package.json,您将看到start脚本在端口5002上启动代理服务器。

nfs0ujit

nfs0ujit2#

虽然这个错误是有意义的,但我不知道TS模板在哪里以及如何启动这样一个代理服务器,如果它确实这样做的话。
不是的。我只是花了很长时间才发现这个魔法。它是create-react-app:create-react-app文档
如果代理选项对您来说不够灵活,您可以直接访问Express应用程序示例并连接您自己的代理中间件。
您可以将此特性与package.json中的proxy属性结合使用,但建议您将所有逻辑合并到src/setupProxy.js中。
接下来,创建src/setupProxy.js并将以下内容放入其中:
This github issue关于他们改变了什么以及为什么改变也提供了更多的背景,但老实说,这是一个完全混乱的时刻。我希望我只是在.NET5上做了一个spa,而不是在这些乱七八糟的东西中搜寻

uajslkp6

uajslkp63#

1.创建“ASP.NET Core Web API”项目
1.在launchSettings中将https.applicationUrl设置为“https://localhost:3000; http://localhost:3001”
1.将WeatherForecastController从[Route(“[controller]”)]更改为[Route(“API/[controller]”)]
1.将ClientApp文件夹添加到解决方案
1.在ClientApp中运行>npm create vite@latest并选择模板(react/vue/etc)

  1. npm install“vite-plugin-mkcert”
    1.用以下代码更新vite.config.ts。这将在https://localhost:5000上运行前端,在https://localhost:5000/api上运行后端,后者代理到https://localhost:3000/api
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import mkcert from "vite-plugin-mkcert";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), mkcert()],
  server: {
    port: 5000,
    https: true,
    strictPort: true,
    proxy: {
      "/api": {
        target: "https://localhost:3000",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, "/api"),
      },
    },
  },

1.现在你可以重新启动你的后端,而不必启动/停止前端或与微软SpaProxy废话混乱。

相关问题