Hosting.Net Core app 和 IIS 下的 Angular app 默認網站

Question

我正在使用 ASP.net 核心樣板和 angular。 我嘗試在 IIS localhost 下分別托管 Angular 和 .NET 核心的兩個應用程序網站，沒有問題。
：
但是當我想在公共上部署我的應用程序時，我遇到了這個問題：
1-我只有一個公共 IP 重定向到 IIS 默認網站，每個應用程序都有不同的端口。
**因此，前端和后端都應托管在具有不同端口的 IIS 默認網站下。

是否適用於 .NET 內核和 Angular？**

更新

這是我的appsetting.json

{

  "ConnectionStrings": {
    "Default": "Server=localhost\\SQLEXPRESS; Database=MyDb;User Id=admin;Password=1234"
  },
  "App": {
    "ServerRootAddress": "http://localhost:21021/",
    "ClientRootAddress": "http://localhost:4200/",
    "CorsOrigins": "http://localhost:4200,http://localhost:8080,http://localhost:8081,http://localhost:3000"
  },
  "Authentication": {
    "JwtBearer": {
      "IsEnabled": "true",
      "SecurityKey": "MyApp_C421AAEE0D114E9C",
      "Issuer": "MyApp",
      "Audience": "MyApp"
    }
  }
}

更新 2

Angular web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
    <!-- IIS URL Rewrite for Angular routes -->
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Angular appconfig.production.json

{
  "remoteServiceBaseUrl": "http://localhost:21021",
  "appBaseUrl": "http://localhost:4200",
  "localeMappings": [
    {
      "from": "pt-BR",
      "to": "pt"
    },
    {
      "from": "zh-CN",
      "to": "zh"
    },
    {
      "from": "he-IL",
      "to": "he"
    }
  ]
}

Answer 1

以下是一些步驟：

先決條件

Client Alias=> 需要在 iis 中添加應用程序的客戶端應用程序的路徑名

服務別名 => 需要在 iis 中添加應用程序的服務應用程序的路徑名

1. Download .NET Core 3.0 Runtime & Hosting Bundle for Windows or you can find exact version as per your project https://dotnet.microsoft.com/download/dotnet-core/thank-you/runtime-aspnetcore-3.0.0-windows-托管捆綁安裝程序
2. 對於在臨床內容編輯器中設置 Angular 8 基礎設施，需要安裝 IIS 擴展“URL Rewrite” httpsurl://www.iis.net/downloads/microsoft

前端：

3. 構建您的 angular 運行ng build --prod --base-href=/client-alias/

4. Go 到默認 Web 站點在 IIS

5. 添加應用程序

6. 在 angular 應用程序中添加別名並指向dist文件夾的物理路徑

7. 你可以測試這個http://localhost/client-alias

   后端（ https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/iis/?view=aspnetcore-3.1#create-the-iis-site ）

8. 發布 API 項目，以便我們可以將內容復制到 API 服務的新 web 應用程序中。

9. 使用 .net CLR 版本為無托管代碼創建應用程序池

10. 在 IIS 中，為 API 服務創建一個新的 web 應用程序，並在步驟 9 中添加應用程序池，並在步驟 8 中添加已發布文件夾的物理路徑。

現在這兩個應用程序運行在http://127.0.0.1/client-alias和http://127.0.0.1/service-alias

您可以在不打開其他端口的情況下公開您的 IP(8080)。

Answer 2

只有您的 angular 網站應該是公開的。 每個 IIS 網站都需要一個唯一的端口。 https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Deployment-Angular-Publish-IIS

另請查看您的 IIS 主機網站 appSettings.json

"App": {
    "ServerRootAddress": "http://localhost:21021/", -> Host 
    "ClientRootAddress": "http://localhost:4200/", -> Angular
    "CorsOrigins": "http://localhost:4200" -> your domain, https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1

},

如果您已合並 Angular 和主機項目： https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular#merged-project