6

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.

is that applicable with .NET core and Angular?**

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"
    }
  ]
}
Abdulaziz
  • 654
  • 3
  • 12
  • 37
  • Even with a single IP address you can host multiple sites (different host names) at port 80. Stop the idea of using different ports as that only makes things complex. – Lex Li Apr 13 '20 at 16:13
  • @LexLi My public IP on Server x and I hosted the project on Server Y and my X server redirect the REquest to Y IIS server. I don't know why they did that but I can't change this scenario. – Abdulaziz Apr 13 '20 at 17:07
  • Then what do you have/install on server X? Usually people have a reverse proxy there, but you really need to learn what you have first. With a reverse proxy, you can do almost whatever you like (like https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/reverse-proxy-with-url-rewrite-v2-and-application-request-routing). – Lex Li Apr 13 '20 at 17:08

2 Answers2

3

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

  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-hosting-bundle-installer
  2. For the setup of Angular 8 infrastructure in Clinical Content Editor, installation of IIS extension "URL Rewrite” is required https://www.iis.net/downloads/microsoft/url-rewrite

Front End:

  1. Build your angular run ng build --prod --base-href=/client-alias/

  2. Go to Default Web Site in IIS

  3. Add a application

  4. Add Alias and point physical path to your dist folder in angular application

  5. 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)

  6. Publish the API project and so that we can copy the content to the new web application of API Service.

  7. Create an application pool with .net CLR version to No Managed Code

  8. 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.

Gourav Garg
  • 2,856
  • 11
  • 24
  • thank you, Actually that what I exactly did, but I don't know what is the problem I think related to my app ports because default Backend app port is 21021 and 4200 for front-end and the Default website is 8080. – Abdulaziz Apr 13 '20 at 20:09
  • I have updated 1 thing. We can discuss in chat if that doesn't solve your issue – Gourav Garg Apr 14 '20 at 03:11
  • Thank you again, Actually, I did that before but with no luck, I think the problem in angular and .NET core app configuration, yes we can discuss that on chat but how could I open chat session in StackOverflow? – Abdulaziz Apr 14 '20 at 09:23
  • created https://chat.stackoverflow.com/rooms/211613/room-for-gourav-garg-and-user3189162 – Gourav Garg Apr 14 '20 at 09:28
  • Were you able to complete this? – Gourav Garg Apr 15 '20 at 19:15
  • Thank you but it didn't work, I used individual websites for each of FE and BE with similar IP with a different port. – Abdulaziz Apr 18 '20 at 10:40
  • the steps will work perfectly if I added reverse proxy configuration on IIS. – Abdulaziz Jul 25 '23 at 07:55
1

Only your angular Website should be public. Every IIS Website need an unique port. 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 

"App": {
    "ServerRootAddress": "http://localhost:21021/", -> Host 
    "ClientRootAddress": "http://localhost:4200/", -> Angular
    "CorsOrigins": "http://localhost:4200" -> your domain, https://learn.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

Dominik Oswald
  • 365
  • 2
  • 6
  • Dear Dominik, Once I added my domain to the CorsOrigins the Front end stop working and after checking the log file I found CORS policy execution failed. also , regarding the first link actually I follow the steps but in my scenario, I can't create any website for My app what should I did is adding the both under IIS default website. regarding the second link actually I don't merge the solution I build each of them individually . – Abdulaziz Apr 13 '20 at 17:05