reactjs - 服务器无法提供静态文件

Question

我正在使用 IONOS linux vps 和 Plesk Obsidian 来托管我的项目。
我使用 .NetCore 创建后端 api
和 React 作为前端。
后端部署完美，我使用 apache2 为后端提供服务。我可以通过 https://www.mywebsite.com/api/controller 调用我的 api
但我正在努力应对 react 部署。 (事件虽然它应该更容易)
我试过的:

一些教程推荐的最简单的方法，复制 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

您需要添加 app.UseStaticFiles();进入 Startup.cs ---> Configure方法

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

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

.
├── Controllers
└── wwwroot

将您的文件添加到 wwwroot目录(如 1.jpeg)

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

wget localhost:5000/1.jpeg

笔记:

不与 wwwroot 子目录中的路由冲突

将文件 (1.jpeg) 构建到 bin

您可以在当前文件夹中看到 1.jpeg
更新:
如果要单独部署，比如react app和webapi不在同一台服务器上，那么就需要使用像nginx这样的代理，这个是比较推荐的做法
如果不想单独部署，那么netcore支持spa
笔记:

I am using Angular, I am not sure if it is suitable for React

• the following code is based on netcore 2.1
• the react app directory must be ClientApp (Changeable, but must ensure that the code is consistent with the path)
• React compilation output folder must be dist (Changeable, but must ensure that the code is consistent with the path)

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

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

构建 react 应用

将代码添加到 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