服务器无法提供静态文件

Question

我正在使用 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

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

有人知道我应该如何解决这个问题吗？

Answer 1

1. 你需要添加app.UseStaticFiles();into Startup.cs ---> Configuremethod

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

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

.
├── Controllers
└── wwwroot

1. 将您的文件添加到wwwroot dir（如 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 app的所有文件移动到ClientApp

• 构建反应应用

• 将代码添加到ConfigureServices 的Startup

  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