1

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

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

我尝试了什么：

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

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

任何人都知道我应该尝试解决这个问题吗？

4

1 回答 1

1
  1. 你需要添加app.UseStaticFiles();到Startup.cs ---> Configure方法中
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // other code...
    app.UseStaticFiles();
    //other code...
}
  1. wwwwroot在您的 api 项目中创建目录
.
├── Controllers
└── wwwroot
  1. 将您的文件添加到wwwroot目录（如 1.jpeg）
.
├── Controllers
└── wwwroot
    └── 1.jpeg
  1. wgetlocalhost: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（可更改，但必须保证代码与路径一致）

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

  • 将 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

于 2021-06-30T13:17:46.693 回答