reactjs React with ASP.NET Core -发布时出现HTTP 404错误

quhf5bfb  于 5个月前  发布在  React
关注(0)|答案(1)|浏览(80)

使用Visual Studio 2022 React with .NET Core模板。它有2个单独的项目:该项目已发布到Azure,但它返回HTTP 404“未找到页面”错误。
在本地调试模式下,我通常用npm start运行react项目,并在localhost:3000中打开。如果我只是运行项目,它只打开API(json数据)。
我想知道如何在部署的站点上打开react页面?客户端项目是否已发布?根据Microsoft的建议,我已经将客户端项目作为项目引用添加到服务器项目。但我不知道这件事是如何工作的。


的数据
Git:https://github.com/navjotnabha/OnBo2023
Azure链接:https://onbo2023server20231229100652.azurewebsites.net/

xdnvmnnf

xdnvmnnf1#

使用您的git,部署到Azure后一切正常。它已在Azure上使用LinuxWindows进行了测试。

import React, { Component } from 'react';

export class Home extends Component {
  static displayName = Home.name;

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <p>Welcome to your new single-page application, built with:</p>
        <ul>
          <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
          <li><a href='https://facebook.github.io/react/'>React</a> for client-side code</li>
          <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
        </ul>
        <p>To help you get started, we have also set up:</p>
        <ul>
          <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
          <li><strong>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
          <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files.</li>
        </ul>
        <p>The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p>
      </div>
    );
  }
}

字符串

Azure:


的数据
下面的代码包括商店、销售、产品和客户的模型,代表数据库模式中的实体。代码取自git

[ApiController]
 [Route("api/[controller]")]
 public class CustomerController : ControllerBase
 {
     private readonly NavbaseContext _db;

     public CustomerController(NavbaseContext db)
     {
         _db = db ?? throw new ArgumentNullException(nameof(db));
     }

     [HttpGet]
     [Route("GetCustomers")]
     public IActionResult GetCustomers()
     {
         List<Customer> customerList = _db.Customers.ToList();
         return Ok(customerList);
     }

     [HttpPost]
     public IActionResult Add(Customer c)
     {
         _db.Customers.Add(c);
         _db.SaveChanges();
         return RedirectToAction("GetCustomers");
     }

     [HttpDelete]
     [Route("DeleteCustomer")]
     public IActionResult DeleteCustomer(int? id)
     {
         Customer existingCustomer = _db.Customers.FirstOrDefault(temp => temp.Id == id);

         if (existingCustomer != null)
         {
             _db.Customers.Remove(existingCustomer);
             _db.SaveChanges();
         }

         return RedirectToAction("GetCustomers");
     }
 }

Azure:



相关问题