如何在Plesk上同时部署.NET应用与子文件夹中的React应用？

当然可以在Plesk上同时部署两者，以下是具体实现方案和最佳实践：

一、部署操作步骤 #

• 在Plesk文件管理器中，找到你的.NET应用根目录，创建一个子文件夹（比如命名为react-app）。
• 本地打包React应用：运行npm run build，将生成的build文件夹内所有静态文件，上传到Plesk上的react-app子文件夹中。
• 配置.NET应用的静态文件支持：
  如果是ASP.NET Core（.NET 6+），在Program.cs中添加子文件夹的静态文件中间件配置：

  app.UseStaticFiles(); // 保留原有主应用的静态文件配置
  // 新增React子应用的静态文件支持
  app.UseStaticFiles(new StaticFileOptions
  {
      FileProvider = new PhysicalFileProvider(
          Path.Combine(builder.Environment.ContentRootPath, "react-app")),
      RequestPath = "/react-app"
  });
  

二、React路由适配（SPA场景） #

如果你的React应用是单页应用，需处理路由刷新404问题：

• 在React项目的package.json中添加"homepage": "/react-app"，确保打包后的资源路径自动带上子文件夹前缀。
• 配置React Router：
  使用BrowserRouter时设置basename属性：

  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.render(
    <BrowserRouter basename="/react-app">
      <App />
    </BrowserRouter>,
    document.getElementById('root')
  );
  

  或者改用HashRouter，这种方式无需后端额外配置，URL会带有#（比如https://你的域名/react-app/#/about）。

三、Plesk额外配置（可选） #

• 权限检查：在Plesk文件管理器中，确保react-app文件夹的权限允许Web服务器（IIS/Apache等）读取文件。
• IIS环境下可创建虚拟目录：在Plesk的主机设置中，添加虚拟目录react-app，指向对应的子文件夹，让IIS自动处理静态文件请求。

四、访问方式 #

部署完成后，直接通过https://你的域名/react-app访问React应用；如果是SPA，子路径下的路由可正常使用，比如https://你的域名/react-app/dashboard。

更佳实践 #

• 集成CI/CD：利用Plesk的Git部署功能，配置React项目的自动构建与部署，每次代码提交后自动更新子文件夹内的静态文件。
• API交互优化：.NET和React应用同域名下，React可直接用相对路径调用.NET的API（比如/api/user），避免跨域问题。
• SPA fallback路由：在.NET后端添加 fallback配置，将/react-app/*的请求转发到react-app/index.html，彻底解决SPA刷新404：

  app.MapFallbackToFile("/react-app/{*path}", "react-app/index.html");
  

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