I have two Web Apps, inside the same App Service. One is a back-end portion (with API on it, using .NET Core, SSL cert installed) and the other one is the front-end (ReactTS, created using create-react-app).
When I try to call the API method (an Auth method) using my Front-end I got this message as response:
Login failed: The resource you are looking for has been removed, had
its name changed, or is temporarily unavailable.
-404 error
Another fact is, if I run my ront-end solution locally, I can use the API (published on the Web App), normally.
My API URL is set inside the package.json file, as proxy.
My first thought was about an CORS problem, but it throws a 404 error.
Any configuration that I can do on my Azure, or something that I need to change in my application to allow my front-end to communicate with my API?
If we publish two web applications to one Azure Web App, the later one will cover the first one. It will cause that the first web application can't work. I suggest you create different Azure Web Apps for your web applications. You could choose one Azure Web App Plan for your Azure Web Apps. It will not add extra costs except for Shared plan.
If you use Shared App Plan and don't want to increase the extra cost, you could add a virtual directory to your Azure Web App. Then you could publish your second web application to the virtual directory. To create a virtual directory, steps below are for your reference.
Azure portal -> Web App Panel -> Application settings
Related
I would to host two ASP.NET Core Applications, a Web API and a Blazor Server App, but I searched in the internet and the answers that I founded only target to a different path inside of one application, that's not my case. I would to use they like a sub-address of the same Azure Web App for example: www.example.com and www.example.com/api where each one will be a different .NET Core application. So I suspect that I'll need to create two Azure App Services and try to communicate they both, but maybe the structured that I wonder won't work in this way, it's that right? How I can do this?
I have the same setup as you; an ASP.NET Core web API, and a Blazor Server Side app.
As you want to use the same domain for both services, you would have to use Azure API Management or some other proxy if you were to route requests to two different Azure App Services.
An easier option is to deploy both services to the same App Service, but as different virtual applications. You publish your Blazor app as normal, but for the Web API you would publish to a new virtual application /api.
To enable this virtual application, navigate to Configuration and then Path mappings in your App Service. Here you already have the default virtual application / pointing to site\wwwroot. You then add another virtual application named /api pointing to site\wwwroot\api:
When adding the virtual application, remember to remove checkbox for Directory (making it a virtual application instead), and optionally enable Preload:
If you publish your app using Azure DevOps Pipeline, it has an option to specify virtual application if another than default should be used.
You can now navigate to your two different URLs and hit each service. Note that when developing your Web API, you should not add api to your controllers routes, as this virtual application does that for you.
We have an Angular5 application with a DotNet OData backend API. The application is hosted in a Web Application with a virtual directory for the Angular5 app and another virtual directory for the DotNet backend. The web application is secured by Azure AD, with an Azure AD Application defined for the web site.
This all works perfectly. We have no authentication code in the front end (except for 'withCredentials: true' set in the service calls) but apparently having the whole application protected by Azure AD makes the front end able to call the backend without issue (Azure makes you authenticate when you access the Angular5 front end).
The problem comes when we try to develop the front end. When developing Angular5 one needs to run the Angular5 code locally, so I've set up a web app which hosts only the backend code and point the local configuration for the Angular5 app there. This fails with the first backend call with a 401. One of our developers discovered that if you simply plug in the URL to the backend with the same browser (i.e. copy the failing call from the browser network developer tab into a new browser tab in the same browser) you will go through the authentication process and then when you run the local Angular5 app again it works. We thought we had found a workaround until we noticed that for some reason this only seems to fix the "read only" calls. GET works, OPTIONS works but POST fails with a 401. I put some debugging code in the backend but it seems this code does not even get called (i.e. Azure, not our backend, is blocking the call).
So I've tried to figure out how to get the local Angular5 instance to behave as the one hosted by the Web app but I can't figure out what I need to be doing. I have also been unable to find anyone else doing this so I can't find a solution.
I have tried various solutions of actively getting a token (e.g. setting up /.auth/me, using adal5 to "login", etc.) for the front end but it seems every possible solution is defeated by CORS in the end. Our backend has an Allow-Origin for localhost:4200 but this doesn't apply to login.windows.com for the authentication step. I tried putting localhost:4200 in the CORS setting on the Azure Web App but then it complains about an Allow-Authentication header being missing and I have no way to force Azure to provide that. I read online that this is happening because Azure didn't expect people to be using "cookie authentication" so after some research I found that "cookie authentication" was being used because of the "withCredentials: true" calls, so I changed all of those to false. Then the Allow-Authentication failure goes away but I just run into more CORS failures during the authorisation (login.windows.com).
So I'm really stuck here. I can't believe I'm the only person on earth who's trying to run a local instance of Angular5 against an Azure AD secured Azure Web app backend but I can't find any examples anywhere of people successfully doing this. I also would like to avoid having to do some elaborate local authentication because the code works perfectly as-is when hosted on the same Azure Web app as the backend. Does anyone have a setup like I describe that is working?
i have a web app that has a seperate nodejs backend and angular frontend.
is it possible to make them both run on the same azure web service? or do i need a stand alone service for each?
my nodejs server is just a light API that feeds my angular app with some statistical data to render it. if it is possible what would be the way to do it?
since i am using typescript i know i need to push my nodejs using zipdeployment and i know i need to use visual studio to push my angular project to azure. but when i want to run both on the same service, how do i do it?
is it possible to make them both run on the same azure web service? or do i need a stand alone service for each?
If you choose the Web App on Windows OS, IIS allows you to configure multiple virtual applications within a single website. For this approach, you could follow Deploying multiple virtual directories to a single Azure Website. Note: The multiple virtual applications would share the same application pool.
As kim mentioned, you pay for the App Service Plan, not for the Web App. You could also host nodejs backend and angular frontend in different web apps under the same app service plan.
For the deployment, you could leverage VS publish wizard or manually upload your files via KUDU or FTP. Moreover, you could also follow Deploy the app section about various approaches for deployment.
You can run multiple web sites in different web apps in Azure so that they are sharing the same Azure App Service.
You can think of the App Service as a virtual machine offering resources for your applications. How many web apps you can run simultaneously depends on the size of your plan, see this page for details.
This way you can deploy them separately, manually or automatically using e.g. VSTS.
I've created a web application API with a swagger interface that I've deployed as an API App to Azure.
When creating a Logic App I can find my API App but whenever I try to use it I get the following error:
Failed to fetch swagger. Ensure you have CORS enabled on the endpoint
and are calling an HTTPS endpoint.
I'm using the default https url for the API definition in the API App:
https://microsoft-SOME-LONG-MS-INTERNAL-ID.azurewebsites.net/swagger/docs/v1
The swagger docs have been provided in my C# web API application through Swashbuckle.
For CORS I've set a single * item.
This didn't seem sufficient for the Logic App to access the API App I then configured Authentication / Authorization for the API App to use Azure Active Directory (express), creating an AD Azure App.
I believe the issue will be one of configuring security which is all pretty new to me in Azure. I'd like to make the API App inaccessible externally, but available to Web Apps and Logic Apps within my Azure subscription.
I've not added any authentication mechanism to the ASP.NET web application itself as I figured the web application would effectively be sitting in a private network on Azure. Perhaps this is a bad assumption and I need to add authentication to allow Azure AD to work?
Any pointers / suggestions?
Turns out I needed to update the Azure SDK for Visual Studio. I had an older version that was deploying a preview Api App which resulted in a "Api app host" type being deployed rather that an "API app" type.
Everything works after the update and I've found some documentation for securing the API App and making it available in the Logic App - https://azure.microsoft.com/en-us/documentation/articles/app-service-logic-custom-hosted-api/
We are building webapplication with an AngularJS frontend and a Web.Api backend. Both need to be hosted in Azure. To support this we created two projects:
A worker role with an endpoint on 8080 for the web.api (converted from a selfhosting web.api)
A web role on port 80
Both roles are combined in one azure service project. When running the project local in the azure emulator we have two endpoints that are working as desired. Localhost gives back the website, localhost:8080/api gives back the api. Together a nice website is running.
When deploying it to the staging environment on azure it publishes correctly. After done publishing, when we go to the site the sites loads up. The api does not work though.
When we go to the instances tab in the azure portal, we get 2 instances running in the project. 1 for XX.Azure.Worker_IN_0 and one for XX.WebRole_IN_0.
We looked in the eventlog of the worker role, but we cannot find any problems. Is there anyplace where we should look for errors? We tried searching for it but we couldn't find a log on the server. Or are we doing things with azure that we are not supposed to do.