[英]Hosting .Net Core app and Angular app under IIS Default website
I'm using ASP.net core Boilerplate with angular.我正在使用 ASP.net 核心样板和 angular。 I tried hosting both apps individually website for Angular and website for .NET core under IIS localhost with no problem.
我尝试在 IIS localhost 下分别托管 Angular 和 .NET 核心的两个应用程序网站,没有问题。
: :
But When I want to deploy my App on public I encountered this problem:但是当我想在公共上部署我的应用程序时,我遇到了这个问题:
1- I have only one public IP which is redirecting to the IIS Default Website and each app has a different port. 1-我只有一个公共 IP 重定向到 IIS 默认网站,每个应用程序都有不同的端口。
**So, Both Front-end and Back-end should be hosted under the IIS Default Website with a different port. **因此,前端和后端都应托管在具有不同端口的 IIS 默认网站下。
Update更新
And here is my appsetting.json这是我的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"
}
}
}
Update 2更新 2
Angular web.config 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 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"
}
]
}
Here are some steps:以下是一些步骤:
Pre-requisite先决条件
Client Alias=> path name for client application which needed to add application in iis Client Alias=> 需要在 iis 中添加应用程序的客户端应用程序的路径名
Service Alias => path name for service application which needed to add application in iis服务别名 => 需要在 iis 中添加应用程序的服务应用程序的路径名
Front End:前端:
Build your angular run ng build --prod --base-href=/client-alias/构建您的 angular 运行ng build --prod --base-href=/client-alias/
Go to Default Web Site in IIS Go 到默认 Web 站点在 IIS
Add a application添加应用程序
Add Alias and point physical path to your dist folder in angular application在 angular 应用程序中添加别名并指向dist文件夹的物理路径
You can test this http://localhost/client-alias你可以测试这个http://localhost/client-alias
Back End ( https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/iis/?view=aspnetcore-3.1#create-the-iis-site )后端( https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/iis/?view=aspnetcore-3.1#create-the-iis-site )
Publish the API project and so that we can copy the content to the new web application of API Service.发布 API 项目,以便我们可以将内容复制到 API 服务的新 web 应用程序中。
Create an application pool with .net CLR version to No Managed Code使用 .net CLR 版本为无托管代码创建应用程序池
In IIS create a new web application for API Service with application pool added in step 9 and physical path of published folder as in step 8.在 IIS 中,为 API 服务创建一个新的 web 应用程序,并在步骤 9 中添加应用程序池,并在步骤 8 中添加已发布文件夹的物理路径。
Now these two application are running on as http://127.0.0.1/client-alias and http://127.0.0.1/service-alias现在这两个应用程序运行在http://127.0.0.1/client-alias和http://127.0.0.1/service-alias
You can make your IP(8080) public with no another port open.您可以在不打开其他端口的情况下公开您的 IP(8080)。
Only your angular Website should be public.只有您的 angular 网站应该是公开的。 Every IIS Website need an unique port.
每个 IIS 网站都需要一个唯一的端口。 https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Deployment-Angular-Publish-IIS
https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Deployment-Angular-Publish-IIS
Also check out in your IIS Host Website the appSettings.json for另请查看您的 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
}, },
If you have merged your Angular and Host Project: https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular#merged-project如果您已合并 Angular 和主机项目: https://aspnetboilerplate.com/Pages/Documents/Zero/Startup-Template-Angular#merged-project
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.