Open Closed

Support for deploy both angular and asp-net core on single azure web service #1473


User avatar
0
Ravisha created
  • ABP Framework version: v4.3
  • UI type: Angular
  • DB provider: EF Core
  • Identity Server Separated (Angular):No
  • ABP Commercial application

Hi Team,

I'm trying to deploy both angular and asp-net core on single azure web service. Here is my project structure I have included the following source package(code) to my application 1. Account.pro module 2. LeptonTheme

Deployement steps to azure:

  1. I have deployed HttpApi.Host application to azure web service(https://abptest-dev.azurewebsites.net)
  2. I have deployed angular app to same azure web service(https://abptest-dev.azurewebsites.net) Both these application are deployed to root folder (say [wwwroo in](http://wwwroo](http://wwwroo in in) azure)

HttpApi.Host application is working perfectly fine, swagger api is working fine as i can autorise to login for swagger and i can call api's throught swagger. Login is also working with url: https://abptest-dev.azurewebsites.net/account/login

Angular application is not loading, attached the picture

Asp-net core configuration Details: Appsettings.json

    "SelfUrl": "https://abptest-dev.azurewebsites.net",
    "AngularUrl": "https://abptest-dev.azurewebsites.net",
    "CorsOrigins": "https://*.abptest-dev.azurewebsites.net,http://abptest-dev.azurewebsites.net",
    "RedirectAllowedUrls": "http://abptest-dev.azurewebsites.net,https://abptest-dev.azurewebsites.net"
  },
  "Redis": {
    "Configuration": "127.0.0.1"
  }
  "AuthServer": {
    "Authority": "https://abptest-dev.azurewebsites.net",
    "RequireHttpsMetadata": "false",
    "SwaggerClientId": "abptest_Swagger",
    "SwaggerClientSecret": "1q2w3e*"
  },

Angular configuration:

Environment.prod.ts

import { Environment } from '@abp/ng.core';

const baseUrl = 'http://abptest-dev.azurewebsites.net';

export const environment = {
  production: true,
  application: {
    baseUrl,
    name: 'abptest',
  },
  oAuthConfig: {
    issuer: 'https://abptest-dev.azurewebsites.net',
    redirectUri: baseUrl,
    clientId: 'abptest_App',
    responseType: 'code',
    scope: 'offline_access openid profile role email phone abptest',
  },
  apis: {
    default: {
      url: '',
      rootNamespace: 'abptest',
    },
  },
} as Environment;

Could you please let me know is model deployment will work or supportted by ABP. if yes What configuration is missing?


49 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you share the details of error?

    Do you have a web.config file? What is the content?

  • User Avatar
    0
    Ravisha created

    hi

    Can you share the details of error?

    Do you have a web.config file? What is the content?

    Here is the error log:

    2021-06-14 05:32:07.504 +00:00 [INF] - Volo.Abp.Swashbuckle.AbpSwashbuckleModule 2021-06-14 05:32:07.504 +00:00 [INF] - Volo.Abp.AspNetCore.Serilog.AbpAspNetCoreSerilogModule 2021-06-14 05:32:10.980 +00:00 [INF] Starting IdentityServer4 version 4.1.1+cebd52f5bc61bdefc262fd20739d4d087c6f961f 2021-06-14 05:32:13.963 +00:00 [INF] Using the default authentication scheme Identity.Application for IdentityServer 2021-06-14 05:32:18.292 +00:00 [INF] Initialized all ABP modules. 2021-06-14 05:32:18.899 +00:00 [INF] Now listening on: http://127.0.0.1:35308 2021-06-14 05:32:18.899 +00:00 [INF] Application started. Press Ctrl+C to shut down. 2021-06-14 05:32:18.899 +00:00 [INF] Hosting environment: CI 2021-06-14 05:32:18.899 +00:00 [INF] Content root path: D:\home\site\wwwroot 2021-06-14 05:32:20.215 +00:00 [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/ - - 2021-06-14 05:32:20.467 +00:00 [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/ - - 2021-06-14 05:32:28.293 +00:00 [INF] Executing endpoint 'abptest.Controllers.HomeController.Index (abptest.HttpApi.Host)' 2021-06-14 05:32:28.304 +00:00 [INF] Executing endpoint 'abptest.Controllers.HomeController.Index (abptest.HttpApi.Host)' 2021-06-14 05:32:28.420 +00:00 [INF] Route matched with {action = "Index", controller = "Home", area = "", page = ""}. Executing controller action with signature Microsoft.AspNetCore.Mvc.ActionResult Index() on controller abptest.Controllers.HomeController (abptest.HttpApi.Host). 2021-06-14 05:32:28.428 +00:00 [INF] Route matched with {action = "Index", controller = "Home", area = "", page = ""}. Executing controller action with signature Microsoft.AspNetCore.Mvc.ActionResult Index() on controller abptest.Controllers.HomeController (abptest.HttpApi.Host).

    I haven't done any modification or chnages to web.config, I'm using the original web.config here is the content of web.config.

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <location path="." inheritInChildApplications="false">
        <system.webServer>
          <handlers>
            <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
          </handlers>
          <aspNetCore processPath="dotnet" arguments=".\abptest.HttpApi.Host.dll" stdoutLogEnabled="false" stdoutLogFile="\\?\%home%\LogFiles\stdout" hostingModel="OutOfProcess" />
        </system.webServer>
      </location>
    </configuration>
    

    I have commeted out the health check in HealthcheckBuilderExtension.cs as mentioned below

    // If you don't want to add HealthChecksUI, remove following configurations.
        //var healthChecksUiBuilder = services.AddHealthChecksUI(settings =>
        //{
        //    settings.AddHealthCheckEndpoint("abptest Health Status", "/health-status");
        //});
    
        // Set your HealthCheck UI Storage here
        //healthChecksUiBuilder.AddInMemoryStorage();
    
        //services.MapHealthChecksUiEndpoints(options =>
        //{
        //    options.UIPath = "/health-ui";
        //    options.ApiPath = "/health-api";
        //});
    

    I have chnaged the the home redirect url to index.html as mentioned below in Home Controller of HttpApi.Host

    //return Redirect("~/swagger");
    return Redirect("/index.html");
    

    Looks like SPA Client has not read or it is not able to load the angular, this is my suspection.

  • User Avatar
    0
    Ravisha created

    Hi Maliming,

    Could you please let me know if you need more details.

    Thanks

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi Ravisha

    It seems to be the right approach. return Redirect("/index.html");

    Does the first load work now? Does the routing work after refreshing the page?

    There is example to handle the refresh.

    <!-- 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>
    
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    return Redirect("/index.html"); Does the first load work now? Does the routing work after refreshing the page?

  • User Avatar
    0
    Abhinandan created

    hi

    return Redirect("/index.html"); Does the first load work now? Does the routing work after refreshing the page?

    Hi Maliming,

    This is Abhi from same team and we are working on the same issue. In fact we have tried adding the <rewrite> rule and angular route didn't load after that only we have decided to ask question here.

    Abhi.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    angular route didn't load after that

    Can you share the browser's console & app logs?

  • User Avatar
    0
    Abhinandan created

    hi

    angular route didn't load after that

    Can you share the browser's console & app logs?

    Browser's console log attached in the attachment.

    Here is the error log:

    Microsoft.AspNetCore.Mvc.ActionResult Index() on controller PearlDocs.Controllers.HomeController (abptest.HttpApi.Host). 2021-06-15 06:21:17.963 +00:00 [INF] Executing RedirectResult, redirecting to /index.html. 2021-06-15 06:21:17.963 +00:00 [INF] Executed action abptest.Controllers.HomeController.Index (abptest.HttpApi.Host) in 0.8016ms 2021-06-15 06:21:17.963 +00:00 [INF] Executed endpoint 'abptest.Controllers.HomeController.Index (abptest.HttpApi.Host)' 2021-06-15 06:21:17.963 +00:00 [INF] Request finished HTTP/1.1 GET http://abptest-dev.azurewebsites.net/?httpStatusCode=404 - 0 - 302 0 - 53.0249ms 2021-06-15 06:21:18.024 +00:00 [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/index.html - - 2021-06-15 06:21:18.078 +00:00 [INF] Request finished HTTP/1.1 GET http://abptest-dev.azurewebsites.net/index.html - - - 302 0 - 53.7046ms 2021-06-15 06:21:18.146 +00:00 [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/?httpStatusCode=404 - 0 2021-06-15 06:21:18.198 +00:00 [INF] Executing endpoint 'abptest.Controllers.HomeController.Index (abptest.HttpApi.Host)' 2021-06-15 06:21:18.198 +00:00 [INF] Route matched with {action = "Index", controller = "Home", area = "", page = ""}. Executing controller action with signature Microsoft.AspNetCore.Mvc.ActionResult Index() on controller abptest.Controllers.HomeController (abptest.HttpApi.Host). 2021-06-15 06:21:18.199 +00:00 [INF] Executing RedirectResult, redirecting to /index.html. 2021-06-15 06:21:18.199 +00:00 [INF] Executed action abptest.Controllers.HomeController.Index (abptest.HttpApi.Host) in 0.7548ms 2021-06-15 06:21:18.199 +00:00 [INF] Executed endpoint 'abptest.Controllers.HomeController.Index (abptest.HttpApi.Host)' 2021-06-15 06:21:18.199 +00:00 [INF] Request finished HTTP/1.1 GET http://abptest-dev.azurewebsites.net/?httpStatusCode=404 - 0 - 302 0 - 53.4134ms 2021-06-15 06:21:18.268 +00:00 [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/index.html - - 2021-06-15 06:21:18.316 +00:00 [INF] Request finished HTTP/1.1 GET http://abptest-dev.azurewebsites.net/index.html - - - 302 0 - 48.1551ms 2021-06-15 06:21:18.385 +00:00 [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/?httpStatusCode=404 - 0 2021-06-15 06:21:18.437 +00:00 [INF] Executing endpoint 'abptest.Controllers.HomeController.Index (abptest.HttpApi.Host)' 2021-06-15 06:21:18.437 +00:00 [INF] Route matched with {action = "Index", controller = "Home", area = "", page = ""}. Executing controller action with signature Microsoft.AspNetCore.Mvc.ActionResult Index() on controller abptest.Controllers.HomeController (abptest.HttpApi.Host). 2021-06-15 06:21:18.438 +00:00 [INF] Executing RedirectResult, redirecting to /index.html. 2021-06-15 06:21:18.438 +00:00 [INF] Executed action abptest.Controllers.HomeController.Index (abptest.HttpApi.Host) in 0.808ms 2021-06-15 06:21:18.438 +00:00 [INF] Executed endpoint 'abptest.Controllers.HomeController.Index (abptest.HttpApi.Host)' 2021-06-15 06:21:18.438 +00:00 [INF] Request finished HTTP/1.1 GET http://abptest-dev.azurewebsites.net/?httpStatusCode=404 - 0 - 302 0 - 53.4104ms 2021-06-15 06:21:18.507 +00:00 [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/index.html - - 2021-06-15 06:21:18.559 +00:00 [INF] Request finished HTTP/1.1 GET http://abptest-dev.azurewebsites.net/index.html - - - 302 0 - 52.5579ms 2021-06-15 06:21:18.633 +00:00 [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/?httpStatusCode=404 - 0 2021-06-15 06:21:18.684 +00:00 [INF] Executing endpoint 'abptest.Controllers.HomeController.Index (abptest.HttpApi.Host)' 2021-06-15 06:21:18.685 +00:00 [INF] Route matched with {action = "Index", controller = "Home", area = "", page = ""}. Executing controller action with signature Microsoft.AspNetCore.Mvc.ActionResult Index() on controller abptest.Controllers.HomeController (abptest.HttpApi.Host). 2021-06-15 06:21:18.685 +00:00 [INF] Executing RedirectResult, redirecting to /index.html. 2021-06-15 06:21:18.685 +00:00 [INF] Executed action abptest.Controllers.HomeController.Index (abptest.HttpApi.Host) in 0.7635ms 2021-06-15 06:21:18.685 +00:00 [INF] Executed endpoint 'abptest.Controllers.HomeController.Index (abptest.HttpApi.Host)' 2021-06-15 06:21:18.685 +00:00 [INF] Request finished HTTP/1.1 GET http://abptest-dev.azurewebsites.net/?httpStatusCode=404 - 0 - 302 0 - 52.4167ms

  • User Avatar
    0
    Abhinandan created

    Hi Mailming,

    Ravisha is not able to answer to your reply from his account as always he is getting error popup saying "you are not authorized"

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi @Abhinandan

    The index.html exists in wwwroot folder, right? Can you confirm?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Ravisha is not able to answer to your reply from his account as always he is getting error popup saying "you are not authorized"

    Can you try to re-login?

  • User Avatar
    0
    Abhinandan created

    Ravisha is not able to answer to your reply from his account as always he is getting error popup saying "you are not authorized"

    Can you try to re-login?

    I wil ask Ravisha to re-login and try again.

  • User Avatar
    0
    Abhinandan created

    hi @Abhinandan

    The index.html exists in wwwroot folder, right? Can you confirm?

    Yes. Index.html(of angular) is available in wwwroot..

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    It seems that your application did not find this file.

    [INF] Request finished HTTP/1.1 GET http://abptest-dev.azurewebsites.net/index.html - - - 302 0 - 52.5579ms
    [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/?httpStatusCode=404 - 0
    

    I add a index.html file to wwwroot and http://localhost/index.html works.

  • User Avatar
    0
    Ravisha created

    hi

    It seems that your application did not find this file.

    [INF] Request finished HTTP/1.1 GET http://abptest-dev.azurewebsites.net/index.html - - - 302 0 - 52.5579ms 
    [INF] Request starting HTTP/1.1 GET http://abptest-dev.azurewebsites.net/?httpStatusCode=404 - 0 
    

    I add a index.html file to wwwroot and http://localhost/index.html works.

    Yes, application is not finding the index.html from root. any suggetions for this.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    I need the steps to reproduce this problem. Can you try it in your local computer ?

  • User Avatar
    0
    Ravisha created

    I need the steps to reproduce this problem. Can you try it in your local computer ?

    On my local computer, no issue it works fine.

    Steps Reproduce:

    1. Genarated app using abp suite with following details ABP Framework version: v4.3 UI type: Angular DB provider: EF Core Identity Server Separated (Angular):No
    2. I have included the following module source package(code) to my application
      • Account.pro module
      • LeptonTheme
    3. Created DB and run the migration using above mentioned configuartion in appsettings.jon of DBMigration project
    4. Deployed the angular app using visual studio code
    5. Deployed the Asp-net core app using visual studio
  • User Avatar
    0
    alper created
    Support Team Director

    check out :

    • https://stackoverflow.com/questions/62055847/how-to-deploy-angular-spa-with-asp-net-core-3-1-api-on-iis
    • https://www.codementor.io/@noorsaifi/how-to-deploy-angular-asp-net-core-webapi-to-iis-on-shared-hosting-1dytrihj56
  • User Avatar
    0
    Ravisha created

    Thanks Mailmin, We can try this which is standard asp net core and spa integration. for this we have to change the copy angular code inside the asp-net and needs to change abp code(what all code and also need to add the yarn buid:prod command inside the abp host csproj) and i'm not sure that this will work or not? I have already spend more than 2 days for this. if you have steps to do this please let me know? we didn't investigate this deployment challenges during our evaluation abp framework as we thought this is very basic in architecure which abp would have taken care. or can i try deploy using domainresolver way and i see document is very clear in abp documention site?I hope if configure using domainresolver way it will work as many people tried this way and i could see they are succeded in this way?.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    I will try to deploy and share the steps to you.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi @Ravisha

    I realized that we don't need use IIS URL Rewrite, also no need to change your web.config, I just changed my HomeController.

    public class HomeController : AbpController
    {
    	public ActionResult Index()
    	{
    		return Redirect("~/index.html" + HttpContext.Request.QueryString);
    	}
    }
    

    Everything is working now.

    You can try it, if there is still a problem, I can check it remotely.

  • User Avatar
    0
    Ravisha created

    hi @Ravisha

    I realized that we don't need use IIS URL Rewrite, also no need to change your web.config, I just changed my HomeController.

    public class HomeController : AbpController 
    { 
      public ActionResult Index() 
      { 
      	return Redirect("~/index.html" + HttpContext.Request.QueryString); 
      } 
    } 
    

    Everything is working now.

    You can try it, if there is still a problem, I can check it remotely.

    Thanks Mailming.

    Actually I have reverted and trying use domainresolver way of solving this problem as i mentioned in the prevoius reply. I'm in the middle of this approach. Anyway I will setup one more environment and i will try these changes in that environment. I will let you know the updates.

  • User Avatar
    0
    Ravisha created

    Hi Mailming,

    Sorry, I din't get time to continue my investigation with domainresolver approach as I was busy with other high priority issue. as of I could see angular is loading without adding <rewrite> rule web.xml and also copying index.html to wwwroot but I could see other issue. I continue tomorrow I will update soon on this approach.

    By way collegue tried with old apprach with your suggetion(Redirect("~/index.html" + HttpContext.Request.QueryString)) and but azure ecpects a index.html page at wwwroot/wwwroot folder not at the wwwroot folder of azure to load the angular. In this way he was able to load the index page but dependend js and routing files are wwwroot folder so in browser say 404 for all those files. I will try to get those detailed info as well.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    but azure ecpects a index.html page at wwwroot/wwwroot folder not at the wwwroot folder

    I don't know much about azure, I just tested it successfully in the local IIS.

  • User Avatar
    0
    Ravisha created

    Hi Maliming,

    It works in IIS but not Azure web service, it is expecting in subfolder. As I communicated earlier I couldn't get time to continue with DomainResolver approach(There I have could see angular page loading and i have faced client server configuration issues). I continue to try next week(coming Monday), if you have any steps/document links please share, so that I will not get stuck monday. I have to resolve this issue by Monday/Tuesday. I will keep posting the updates for your information.

    Note:our production deployment approach -->I'm trying to deploy both angular and asp-net core on one azure web app service and tenants will using https://{TenantName}.hostname.com.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11