I'm using ASP.net core Boilerplate with angular. I tried hosting both apps individually website for Angular and website for .NET core under IIS localhost with no problem.
:
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.
**So, Both Front-end and Back-end should be hosted under the IIS Default Website with a different port.
Update
And here is my 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
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"
}
]
}
Here are some steps:
Pre-requisite :
Client Alias=> path name for client application which needed to add application in iis
Service Alias => path name for service application which needed to add application in iis
Front End:
Build your angular run ng build --prod --base-href=/client-alias/
Go to Default Web Site in IIS
Add a application
Add Alias and point physical path to your dist folder in angular application
You can test this http://localhost/client-alias
Back End : (https://learn.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.
Create an application pool with .net CLR version to No Managed Code
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.
Now these two application are running on as http://127.0.0.1/client-alias and http://127.0.0.1/service-alias
You can make your IP(8080) public with no another port open.