I have built a web app that has a Vue front-end and an express back-end.
I am trying to host these on an Azure Web App Service but I am a complete novice with Azure.
I have gotten the web app working fine when I place the Client side in one web app and the Server side in a different one.
I want to have both running in the same web app.
From researching online it seems that I need to go to:
my web app-> configuration-> path mappings ->Virtual applications and directories.
I created a new application with Virtual Path "/app" and physical path "site\app".
I deployed (using visual studio code) my back-end to my azure web app and thus this sits inside wwwroot.
In filezilla I create a new folder in the site directory called "app" and paste in my built Vue client side.
However, when I try to navigate to www.myapp.azurewebsites.net/app I am not presented with the expected Vue index.html rather a 404. If I just navigate to www.myapp.azurewebsites.net/ I get the default route from the server side as expected.
What am I doing wrong?
When creating a webapp, please choose Windows operating environment, because currently choosing Linux does not support Virtual Application and directories.
The directory structure should be like below.
Setting in portal.
For more details, you can refer my answer in another post.
Related
I have created a Blazor Webassembly web application with the PWA feature. It is a CRUD application.
This is my folder structure:
Now I want to deploy it to azure. How can I do that?
The server app is just an ordinary ASP.NET Core application (this is the app that needs to be published). You have several options, like publishing the app to an Azure App Service or an Azure virtual machine. The former would require you to prepare a Docker image (usually a good start would be to enable Docker support for the server project and tweak the created Dockefile to your needs).
Just read the docs at https://learn.microsoft.com/en-us/aspnet/core/tutorials/publish-to-azure-webapp-using-vs?view=aspnetcore-5.0 to get the full picture.
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.
I develop simple Web Api on Net Core 2 and add Angular app to it (inside wwwroot folder) and publish it from my VS 2017 IDE to Azure Web App Service. All work fine, but when I reload page of my app in browser, server can't find route. So It often happens when iis not setup for SPA, It's described in https://angular.io/guide/deployment, I must configure the server to return the application's host page (index.html) when asked for a file that it does not have. How I can setup server node of iis in Azure Web App Service (web.config in Net Core 2 was deleted).
I am afraid you cannot achieve this.
Cause: Azure App Services runs IIS so it behaves mostly the same as local IIS, routing requests using a native module called AspNetCoreModule. So, it needs your published web.config file. Even though you deleted the web.config file, Azure would also generate a new web.config file to be used.(Though I don't understand why you delete the web.config file)
Solution:
Even you can upload the web.config file to Azure again, I'm afraid of that it will be ignored and doesn't work. So, I suggest you redeploy your website which contains web.config file to Azure and configure it well.
Additional: Azure Web App service is a kind of PaaS. So, if you want to install IIS manually, you can choose to host your website on a Windows Azure VM.
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
We are currently in the process of building a website on azure. At this moment I have a cloud service that is hosting my web api. Deploying to azure works like a charm.
Besides this project we have a pure HTML AngularJS project. I can publish this website as a WebApp. Though, is it possible to deploy it together with the web api?
You can deploy the second one as a Virtual Application/ Directory (Remember to check the Application check box):
You can use this link on how to publish to Root App as well as Virtual directory in your Azure subscription:
http://blogs.msdn.com/b/tomholl/archive/2014/09/22/deploying-multiple-virtual-directories-to-a-single-azure-website.aspx