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

Ravisha created 3 years ago

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:

I have deployed HttpApi.Host application to azure web service(https://abptest-dev.azurewebsites.net)
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?

Go to accepted answer

49 Answer(s)

0

maliming created 3 years ago
Support Team Fullstack Developer

hi

Can you share the details of error?

Do you have a web.config file? What is the content?
0
Ravisha created 3 years ago
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.
0

Ravisha created 3 years ago

Hi Maliming,

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

Thanks

maliming created 3 years ago

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>

0

maliming created 3 years ago
Support Team Fullstack Developer

hi

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

Abhinandan created 3 years ago

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

maliming created 3 years ago
Support Team Fullstack Developer

hi

angular route didn't load after that

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

Abhinandan created 3 years ago

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
0

Abhinandan created 3 years ago

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"
0

maliming created 3 years ago
Support Team Fullstack Developer

hi @Abhinandan

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

maliming created 3 years ago
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?
0

Abhinandan created 3 years ago

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

Abhinandan created 3 years ago

hi @Abhinandan

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

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

maliming created 3 years ago

Support Team Fullstack Developer

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.

0
Ravisha created 3 years ago
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.
0

maliming created 3 years ago
Support Team Fullstack Developer

I need the steps to reproduce this problem. Can you try it in your local computer ?
0
Ravisha created 3 years ago
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:

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

I have included the following module source package(code) to my application

Account.pro module

LeptonTheme

Created DB and run the migration using above mentioned configuartion in appsettings.jon of DBMigration project

Deployed the angular app using visual studio code

Deployed the Asp-net core app using visual studio
0
alper created 3 years ago
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
0

Ravisha created 3 years ago

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?.
0

maliming created 3 years ago
Support Team Fullstack Developer

hi

I will try to deploy and share the steps to you.
0
maliming created 3 years ago
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.
0
Ravisha created 3 years ago
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.
0

Ravisha created 3 years ago

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

maliming created 3 years ago
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.
0

Ravisha created 3 years ago

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.

Showing 1 to 25 of 49 entries.

Previous
1 (current)
2
Next

Have an answer to this question? Log in and write your answer.