# Quickly.Spa

**Repository Path**: fffirer/quickly-spa

## Basic Information

- **Project Name**: Quickly.Spa
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-04
- **Last Updated**: 2024-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# What is it?

相比[ASP.NET Core 中的单页应用 (SPA)](https://learn.microsoft.com/zh-cn/aspnet/core/client-side/spa/intro?view=aspnetcore-8.0)
1. 支持多个客户端
2. 支持反向代理（[YARP](https://microsoft.github.io/reverse-proxy/index.html)）
3. 仅支持开发阶段，不支持发布

### 细节

提供在开发前后端分离模式的项目时，在同一个开发域名下同时提供前端服务与后端服务。

目前，前后端分离的模式下，在生产环境部署时是分离的，但是访问时又是通过同一个域名。这种模式在本地开发时需要更快的开箱即用体验。

前后端独立开发并测试的方式可能是更解耦的方式，但是在一些场景时仍具有很好的体验：

1. 同时使用前端技术以及 MVC/Blazor 等技术时，可以在同一个域名下开发调试。
2. 如果在一个庞大的系统的背景下进行开发，系统的部分功能由不同的人负责/部署在不同的站点，但是在开发调试的时候需要使用到这些分散的功能，简化本地开发调试，提升开发效率。

参考[ASP.NET Core 中的单页应用 (SPA)](https://learn.microsoft.com/zh-cn/aspnet/core/client-side/spa/intro?view=aspnetcore-8.0)的实现方案, 并通过借助[YARP](https://microsoft.github.io/reverse-proxy/index.html)可以混合多个前端项目。

# How to use?

### example1

在`SpaProxyServer`节点按键值对添加客户端配置。键为客户端名称`ServerUrl`为;

| Key                 | Description                                                                                                              |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| ServerUrl           | 客户端的访问地址，用于健康检查确认客户端服务器是否已经启动，如果已经启动且能正常访问，则通过重定向跳转打开`ServerUrl` 。 |
| RedirectUrl         | 跳转地址，如果设置为`/`开头，将通过 YARP 反向代理此路径                                                                  |
| LaunchCommand       | 客户端启动名称，如果 ServerUrl 检查客户端未启动，则将使用此命令启动客户端                                                |
| WorkingDirectory    | 客户端项目根目录，用于启动客户端                                                                                         |
| KeepRunning         |                                                                                                                          |
| MaxTimeoutInSeconds |                                                                                                                          |
| MatchPaths          | 匹配资源路径，匹配到的路径将通过代理转到到此客户端                                                                       |

`./quickly.spa.proxy.json`

```json
// quickly.spa.proxy.json
{
  "SpaProxyServer": {
    "client3": {
      "ServerUrl": "http://localhost:3000/client3/",
      "RedirectUrl": "/client3",
      "LaunchCommand": "pnpm run dev --mode dev",
      "WorkingDirectory": "C:\\Users\\0sdf0\\source\\repos\\Quickly.Spa\\example1\\client3",
      "KeepRunning": true,
      "MaxTimeoutInSeconds": 60,
      "MatchPaths": ["/fav.ico"]
    }
  }
}
```

启动配置增加环境变量：`ASPNETCORE_HOSTINGSTARTUPASSEMBLIES`, 值设置为`Quickly.SpaProxy`，目的是通过指定承载程序集，注入相关的服务及中间件，提供基础能力。

`./Properties/launchSetting.json`

```json
// launchSetting.json
{
    "profiles"： {
        "https": {
            // ...
            "environmentVariables": {
                "ASPNETCORE_ENVIRONMENT": "Development",
                "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Quickly.SpaProxy"
            }
        }
    }
}

```

在程序启动入口增加配置`app.UseCors()`以应用默认的跨域配置；增加`app.MapReverseProxy()`以应用反向代理。

Program.cs

```csharp
// Program.cs
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.UseCors();  // CORS, 因为反向代理有配置默认跨域策略，所以需要启用

app.MapGet("/api", () => "Hello World!");
app.MapReverseProxy();  // YARP反向代理

app.Run();
```

启动Web项目