React与ASP.NET Core（Preview）项目部署问题咨询

方案一：整合为单一部署包 #

这种方式将React构建后的静态文件嵌入ASP.NET Core应用，发布后只需部署一个包。

1. 构建React应用
   在React项目根目录执行构建命令，生成生产环境静态文件：

npm run build

Vite默认会将产物输出到dist目录。

2. 配置ASP.NET Core读取静态文件
   有两种配置方式：

• 方式A：通过代码指定静态文件目录
  在API项目的Program.cs中，添加静态文件中间件并指向React的构建目录，同时配置SPA路由 fallback：

// 先确保引入命名空间
using System.IO;

// ... 其他中间件配置（如UseRouting、UseAuthentication等）

// 配置静态文件服务，指向React构建产物路径
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "../ReactApp/dist")
    ),
    RequestPath = "" // 让根路径指向React静态文件
});

// 配置SPA路由 fallback，处理React的前端路由
app.MapFallbackToFile("index.html");

// ... 后续的MapControllers等配置

注意：路径需根据你的项目相对位置调整，若React项目与API项目同级，../ReactApp/dist是合理路径。

• 方式B：通过csproj自动复制构建文件
  在API项目的.csproj文件中添加以下配置，发布时自动将React构建产物复制到API的wwwroot目录：

<ItemGroup>
  <Content Include="../ReactApp/dist/**">
    <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    <Link>wwwroot\%(RecursiveDir)%(Filename)%(Extension)</Link>
  </Content>
</ItemGroup>

此时Program.cs只需保留基础的静态文件和fallback配置：

app.UseStaticFiles();
app.MapFallbackToFile("index.html");

3. 发布并部署
   直接使用Visual Studio的「发布」功能，或通过命令行执行：

dotnet publish -c Release

将生成的publish目录部署到IIS、Azure App Service、Docker等平台即可。

方案二：独立部署API与React应用 #

这种方式将API和React静态文件分开部署，适合需要独立扩容或不同域名的场景。

1. 部署ASP.NET Core API

• 按常规API发布流程，将API部署到服务器（如IIS、Docker容器、云服务）。
• 必须配置CORS允许React应用的域名访问，在Program.cs中添加：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactOrigin", policy =>
    {
        policy.WithOrigins("https://your-react-domain.com") // 替换为你的React部署域名
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

// 在UseRouting之后、UseAuthorization之前启用CORS
app.UseCors("AllowReactOrigin");

2. 部署React静态文件

• 将React构建生成的dist目录上传到静态文件服务器，比如Nginx、Apache、Azure Static Web Apps、AWS S3等。
• 在React项目的.env.production文件中配置API的基础地址：

VITE_API_BASE_URL=https://your-api-domain.com

确保React代码中所有API请求都使用这个环境变量拼接地址。

关键注意事项 #

• 开发阶段模板自带的代理配置仅用于调试，部署时需通过CORS或整合方式解决跨域问题。
• 若使用Docker，可编写多阶段构建镜像，先构建React产物，再将其复制到ASP.NET Core镜像的wwwroot目录，实现一键构建镜像。

内容的提问来源于stack exchange，提问作者aidan