服务器无法提供静态文件 更新：

如何解决服务器无法提供静态文件 更新：

我使用 IONOS linux vps 和 Plesk Obsidian 来托管我的项目。 我使用 .NetCore 来创建后端 api 并将 React 作为前端。

后端部署工作完美，我使用 apache2 为后端提供服务。我可以在 https://www.mywebsite.com/api/controller 调用我的 api 但我正在努力应对反应部署。 （事件虽然应该更容易）

我尝试了什么：

• 一些教程推荐的最简单的方法，将 build 文件夹内容复制到 httpdocs 文件夹（在 Plesk 中默认设置为文档根目录）

• 我还尝试将构建文件放在 /var/www/vhosts/default/htdocs（在使用 https 之前工作）并将配置包含在 apache2.conf 文件中：

  <VirtualHost *:443>
    ServerName www.mywebsite.com
    DocumentRoot /var/www/vhosts/default/htdocs/
   # Relax Apache security settings
   <Directory /var/www/vhosts/default/htdocs>
     Allow from all
     Options -MultiViews
      Require all granted
   </Directory>
  

• 我还尝试在 sites-enabled 文件夹中的单独文件中指定配置。

以上所有产生相同的结果：当我调用 https://www.mywebsite.com/index.html 或存在于同一文件夹 https://www.mywebsite.com/pic.png 中的静态文件时，我总是得到 404 并且请求失败。

奇怪的是，在我从 http 更改为 https 之前它运行良好。

.netcore 的配置： http：

RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME}

ProxyPreserveHost On
ProxyPass / http://127.0.0.1:5000/
ProxyPassReverse / http://127.0.0.1:5000/
ServerName mywebsite.com
ServerAlias *.mywebsite.com
ErrorLog ${APACHE_LOG_DIR}error.log
CustomLog ${APACHE_LOG_DIR}access.log common

https：

SSLProxyEngine on
SSLProxyCheckPeerCN off
SSLProxyCheckPeerName off
ProxyPreserveHost On
ProxyPass / https://127.0.0.1:5001/
ProxyPassReverse / https://127.0.0.1:5001/
ServerName mywebsite.com
ServerAlias *.mywebsite.com
ErrorLog ${APACHE_LOG_DIR}error.log
CustomLog ${APACHE_LOG_DIR}access.log common

和服务文件：

[Unit]
Description=Example .NET Web API App running on UBUNTU

[Service]
WorkingDirectory= /var/www/vhosts/mywebsite.com/publish
ExecStart=dotnet /var/www/vhosts/mywebsite.com/publish/API.dll
Restart=always
# Restart service after 10 seconds if the dotnet service crashes:
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=my-web
User=root
Environment=ASPNETCORE_ENVIRONMENT=Production

[Install]
WantedBy=multi-user.target

我也尝试将前端文件移动到发布文件夹，但似乎没有任何效果。

有人知道我应该尝试解决什么问题吗？

解决方法

1. 您需要将 app.UseStaticFiles(); 添加到 Startup.cs ---> Configure 方法

public void Configure(IApplicationBuilder app,IWebHostEnvironment env)
{
    // other code...
    app.UseStaticFiles();
    //other code...
}

2. 在您的 api 项目中创建目录 wwwwroot

.
├── Controllers
└── wwwroot

3. 将您的文件添加到 wwwroot 目录（如 1.jpeg）

.
├── Controllers
└── wwwroot
    └── 1.jpeg

4. wget localhost:5000/1.jpeg

注意：

• 不要与 wwwroot 子目录中的路由冲突
• 将文件 (1.jpeg) 构建到 bin 中

您可以在当前文件夹中看到 1.jpeg

更新：

如果要分开部署，比如react app和webapi不在同一个服务器，那么就需要使用nginx这样的代理，这是比较推荐的做法

如果不想单独部署，那么netcore支持spa

注意：

我正在使用 Angular，我不确定它是否适合 React

• 以下代码基于 netcore 2.1
• react app 目录必须是ClientApp（可更改，但必须保证代码与路径一致）
• React 编译输出文件夹必须是dist（可更改，但必须保证代码与路径一致）

• 在你的 api 项目中创建目录 ClientApp

• 将 react 应用程序的所有文件移动到 ClientApp

• 构建反应应用

• 将代码添加到 Startup 的 ConfigureServices

  services.AddSpaStaticFiles(configuration =>
  {
    configuration.RootPath = "ClientApp/dist";//dist is the react compilation output directory
  });
  

• 将代码添加到 Startup 的 Configure

  app.UseSpa(cfg =>
  {
      cfg.Options.SourcePath = "ClientApp";
      cfg.UseProxyToSpaDevelopmentServer("http://localhost:4200");
      if (env.IsDevelopment())
      {
          //cfg.UseAngularCliServer(npmScript: "start");// use angular cli
      }
  });
  

• 构建 webapi

现在可以直接运行 Webapi 并通过 localhost:4200

访问 React