刷新 404 - 如何在 Azure 上托管的 ubuntu 上为 Angular 应用程序配置 Url 重写

Question

我已将 Angular 14 应用程序部署到 Azure 应用程序服务，并且需要设置重写规则，以便刷新路由不会引发 404 错误。点击网站根目录 (index.html) 效果很好，应用程序可以正常运行，直到您尝试直接导航到应用程序中的某个路径，例如 /orders。

我使用 github actions 进行部署，并设置在 ubuntu 上运行，但 Apache 还是 Nginx 提供页面服务还是个谜。我使用 navigationFallback 规则设置了 staticwebapp.config.json，但这似乎是 Azure“静态 Web 应用程序”服务而不是“应用程序服务”使用的内容。这方面的在线文档很少，而且 IIS web.config 上有大量信息。 SSH 似乎也没有透露太多信息。除非缺少一些重要的东西，否则这不会那么困难！

我尝试过在 SSH 中进行搜索，我尝试过检查应用程序上的响应标头，观看视频等，缺少什么？？？

Answer 1

为了使您的订单路线可见，请确保部署网络应用程序的

dist folder

：-

我引用了这个博客并部署了我的Angular应用程序：-

我创建了一个订单组件，并在路由中添加了以下代码：-

我的app.routes.ts：-

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OrdersComponent } from './orders/orders.component';

const routes: Routes = [
  { path: 'orders', component: OrdersComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export {routes};

Github Action yaml 代码：-

name: Deploy to Azure WebApp

on:
  workflow_dispatch:

env:
  AZURE_WEBAPP_NAME: 'valleywebapp9'
  AZURE_WEBAPP_PACKAGE_PATH: '.'
  NODE_VERSION: '18.x'

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'

      - name: Install dependencies and build
        run: |
          npm install
          npm run build --if-present
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: ./dist

  deploy:
    runs-on: ubuntu-latest
    needs: build

    environment:
      name: 'Development'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app

      - name: Login to Azure
        uses: azure/login@v1
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Deploy to Azure WebApp
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

      - name: Logout from Azure
        run: az logout

另外，为了设置您的路线，您可以通过参考我的

SO答案来编辑Azure Web应用程序的

web.config文件