Vite React ASP.NET部署到Azure后出现HTTP ERROR 404看不到索引

Question

我有一个客户端/服务器 ASP.NET React 项目。

在本地运行良好，并使用以下方式导航到索引页面：

const router = createBrowserRouter([
    {
        element: <AppLayout />,
        children: [
            {
                path: "/",
                element: <Home />,
            },
            {

部署到Azure后，主页总是给出404：

错误：找不到页面
HTTP 错误 404

我在这里实现了

web.config

解决方案：https://www.kieferconsulting.com/2020/06/25/how-to-deploy-a-react-app-to-azure-using-devops-pipeline /

但还是不行。

Answer 1

我创建了简单的 Asp. .net core 和 Vite React 应用程序，部署到 Azure App 服务没有任何问题。

通过以下过程，我成功地将应用程序部署到azure。

• 我将后端和前端应用程序分别部署到不同的Azure Web应用程序。我使用 Visual Studio 将后端 api 部署到 Azure 应用程序服务。
• 在部署到 Azure 之前，我将以下代码行添加到 Program.cs 文件中。

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontendApp",
        policy => policy.WithOrigins("https://<FrontendApp Name>.azurewebsites.net")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

app.UseCors("AllowFrontendApp");
app.UseSwagger();
app.UseSwaggerUI(x =>
{
    x.SwaggerEndpoint("/swagger/v1/swagger.json", "Web API V1");
    if (app.Environment.IsDevelopment())
        x.RoutePrefix = "swagger"; 
    else
        x.RoutePrefix = string.Empty;
}
); 

完成Program.cs：

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontendApp",
        policy => policy.WithOrigins("https://kareactfrontend-gygsbth6fmdgdqf9.canadacentral-01.azurewebsites.net")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
var app = builder.Build();
app.UseCors("AllowFrontendApp");
app.UseSwagger();
app.UseSwaggerUI(x =>
{
    x.SwaggerEndpoint("/swagger/v1/swagger.json", "Web API V1");
    if (app.Environment.IsDevelopment())
        x.RoutePrefix = "swagger"; 
    else
        x.RoutePrefix = string.Empty;
}
); 
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();

Azure 后端输出:

下面是我在Vite React应用程序中的完整主文件。

main.jsx：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import AppLayout from './components/AppLayout';
import WeatherForecast from './pages/WeatherForecast';
import './index.css';
const router = createBrowserRouter([
    {
        element: <AppLayout />,
        children: [
            { path: "/", element: <WeatherForecast /> },
        ],
    },
]);
ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

我使用下面的代码行来获取对我的 WeatherForecast 页面的 Api 响应。

 const response = await axios.get('https://<BackendApiName>/WeatherForecast');

WeatherForecast.jsx：

import React, { useEffect, useState } from 'react';
import axios from 'axios';
function WeatherForecast() {
  const [forecast, setForecast] = useState([]);
  useEffect(() => {
    const fetchForecast = async () => {
      try {
        const response = await axios.get('https://kaaspviteapp.azurewebsites.net/WeatherForecast');
        setForecast(response.data);
      } catch (error) {
        console.error("Error fetching weather forecast:", error);
      }
    };
    fetchForecast();
  }, []);
  return (
    <div style={{ padding: '20px' }}>
      <h1>Welcome to Weather App</h1>
      <h2>Weather Forecast</h2>
      <table border="1" cellPadding="10" cellSpacing="0" style={{ borderCollapse: 'collapse', width: '100%' }}>
        <thead>
          <tr>
            <th>Date</th>
            <th>Temperature (°C)</th>
            <th>Summary</th>
          </tr>
        </thead>
        <tbody>
          {forecast.map((day, index) => (
            <tr key={index}>
              <td>{day.date}</td>
              <td>{day.temperatureC}°C</td>
              <td>{day.summary}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
export default WeatherForecast;

App.js：

import React from 'react';
import WeatherForecast from './pages/WeatherForecast';
import './App.css';
function App() {
  return (
    <div className="App">
      <h1>Welcome to Weather App</h1>
      <WeatherForecast />
    </div>
  );
}
export default App;

通过 VS Code 将 React Vite 应用程序部署到 Azure Web 应用程序后，我向应用程序添加了以下启动命令。

pm2 serve/home/site/wwwroot/dist no-daemon --spa

更新启动命令后，我得到以下输出。

Azure 前端输出：