ReactVite Express NodeJs Azure 应用程序服务。 404 您要查找的资源已被删除、更名或暂时不可用

Question

错误：404 未找到 您要查找的资源已被删除、更名或暂时不可用。

我已将一个简单的 Web 应用程序部署到 Azure 应用程序服务。基本 url 工作正常，但当我尝试点击 baseurl/hello 端点时，出现错误。

安装程序可以在本地进行，但我一直在绞尽脑汁地思考如何在 Azure 中快速重定向请求。

网络配置

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- SPA fallback rule to handle client-side routing -->
        <rule name="SPA Routing" stopProcessing="true">
          <match url="^(.*)$" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- Exclude /hello and any other endpoints -->
            <add input="{REQUEST_URI}" pattern="^/hello" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

package.json

  "scripts": {
    "dev": "nodemon -w src/server -x tsx src/server/main.ts",
    "start": "cross-env NODE_ENV=production tsx src/server/main.ts",
    "build": "vite build && cpx web.config dist/"

服务器/main.ts

import express from "express";
import ViteExpress from "vite-express";

const app = express();

app.get("/hello", (_, res) => {
  res.send("Hello Vite + React + TypeScript!");
});

const port = process.env.PORT || 3000;
ViteExpress.listen(app, +port, () =>
  console.log(`Server is listening on port ${port}...`)
);

项目结构图。本地，包括远方

Azure 应用服务，通过 Kudu 的 wwwroot 文件夹

Answer 1

当我尝试您的代码时，即使我也无法重定向到 Azure 应用服务中的

/hello

端点。

我将以下代码行添加到

main.ts

文件中。此设置提供

dist

文件夹中的所有静态文件，并允许前端框架处理路由。

import path from 'path';


app.use(express.static(path.join(__dirname, '../../dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../../dist', 'index.html'));
});

以下是main.ts的完整代码。

src/server/main.ts:

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import ViteExpress from 'vite-express';
const app = express();
const __dirname = path.dirname(fileURLToPath(import.meta.url));
app.use(express.static(path.join(__dirname, '../../dist')));
app.get('/hello', (_, res) => {
  res.send('Hello Vite + React + TypeScript!');
});
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../../dist', 'index.html'));
});
const port = process.env.PORT || 3000;
ViteExpress.listen(app, +port, () =>
  console.log(`Server is listening on port ${port}...`)
);

在本地环境中

vite-express

同时处理服务器和客户端，但在azure中我们需要在

/hello

中定义

vite.config.ts

路由。

vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/hello': {
        target: `http://localhost:${process.env.PORT || 3000}`,
        changeOrigin: true,
      },
    },
  },
});

package.json:

{
  "name": "my-vite-express-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
 "scripts": {
    "dev": "nodemon -w src/server -x tsx src/server/main.ts",
    "start": "cross-env NODE_ENV=production tsx src/server/main.ts",
    "build": "vite build && cpx web.config dist/"
 },
  "dependencies": {
    "cross-env": "^7.0.3",
    "express": "^4.21.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "vite-express": "^0.19.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/node": "^22.9.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "cpx": "^1.5.0",
    "eslint": "^9.13.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.11.0",
    "tsx": "^4.19.2",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.11.0",
    "vite": "^5.4.10"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "lib": ["DOM", "ESNext"],
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist",
    "types": ["node"]
  }
}

更改

main.ts

后，我成功重定向到

/hello

端点。

Azure Web 应用程序输出：