Passing Azure App Service Application Settings to SPA JS-application - azure

Case: The solution consists of two Web Apps configured in Azure App Service. The first one hosts a backend API (Asp.Net Core) and the second one an SPA frontend website.
In this project we decided to drop the application server(Kestrel/Node.JS) altogether from the frontend Web App, since there is no real need for that. Application is a simple Single Page Application which can be hosted directly from IIS. The application itself works perfectly. However, now when we are implementing our CI/CD-pipe we have faced an issue. The same build needs to work in both QA and Production environments. But how can we pass the API-address from Azure App Service Application Settings to the SPA-application which is running in the browser when there is no Application Server and therefore serverside code?
We can't modify the Continuous Integration -pipe - the build needs to be exactly the same in both environments. However, we could in theory add one step to the end of our Continuous Delivery -pipe and e.g. modify web.config to pass Custom Headers or add a static file that tells what environment is in question and read that from the application, but I'm not sure if that's the right way to go. Is there any App Service Extension or feature I'm unaware of which would allow passing variables from Azure App Service to the browser?

What we opted for, is reading out a json settings file which we set with a deploy step.
So in your codebase you have a file which always get read by the application with a default dev setting.
In our VSTS setup we use the 'Azure App Service Deploy'-task for deploying the code.
In that same task you have a section that is called 'File Transforms & variable Substition Option'. The XML stuff is for web.config only but for the JSON variable substitution portion you can specify file names.

Related

Azure App Service : How to Swap Anular-config.json variables in Deployment Slots?

I have created one web application in angular and backend api is build in asp.net core.
Now my clients wants to manage two deployment slots :
1.Staging
2.Production
My Requirement is when client perform swap operation from staging->production , at that I need to change one variable which is placed in /assets/config.json(in angular application).
Basically I am placing my base-url in /assets/config.json file and when angular app is loading ,in app_initializer, i am using this base url from config.json and i am performing web api call to fetch appliation specific configuration for azure active directory.
Now base-url is different for both environments.
I have placed other app configuration variables in "configuration" section in azure app service.
But now when client swap from staging to production at that time I need to change "baseurl" but i am not able to get any provision in azure configuration section for this.
If anyone knows than please help me

How to deploy single cshtml file in Azure app service

I have a .Net core app developed using Visual Studio 2019 and deployed on Azure app service. I have function app as well in the same solution. I have to do couple of things and then redeploy to Azure app service.
Add one .cshtml file
Modify one .cshtml file
My question is, how to deploy the CSHTML file only to the Azure app service? Without affecting the existing functionality of application.
As per my understanding, if web app is deployed in Azure app service then the whole thing (solution) has to be deployed even though there are/is very small code modifications.
Please let me know.Thanks.
Even if you have Web App and Function App in the same solution, they should be separated units of deployment. That said, your deployment pipeline should be separately triggered for Web App and Function App.
From the technical point of view(or architecture) there's no concept of "solution". Solution(.sln) is a Visual Studio specific being and even though it's supported e.g. in VS Code, I'd never treat it as deployment unit. Especially in your scenario, when in fact two separate services are responsible for handling your code.
Even if you deploy Function App as a part of the same App Service Plan as your Web App, it's still a separate Azure service. In such a scenario they only share compute.
Yes its possible if you have access to kudu deployment center you can perform manual add/update information , please visit below URL:-
https://[yourAppName].scm.azurewebsites.net
You can also navigate to this site using the azure portal , once you open the app service blade you will find the kudu deployment center option in the bottom left of the menu.
It will provide an online file explorer of your application hosted on the app service and from there you can migrate to relevant folder and perform add/update.

Can I use VSTS Release Manager to deploy a single web job under my app service without deploying the entire app service?

I have an Azure App Service which contains 5 web jobs. I have VSTS Release Manager set up to deploy the entire app service, which successfully updates my web jobs as well.
However, I want to deploy only a single web job without deploying the entire app service. I have the build set up successfully for the web job. But I am struggling with the configuration of the release pipeline. I've tried two methods:
1. Copy Files
Using this method, I am using $(build.artifactstagingdirectory)/app_data/jobs/triggered/[my-web-job-name] as the target folder. But when I go to find the files in the production environment (using Kudu console), they are not there. Since this completes "successfully", I think the target folder might be set up incorrectly. What target can I specify to get the files in the production environment? (as a side-note, do I need to do something special to have it deploy the contents of the drop.zip file?)
2. Azure App Service Deploy
This method seems to target the entire app service, and not a single web job. I have not tried running it using this method, as I am concerned it might wipe out my entire app service and replace it with my single web job. My thought is that there may be a way to set up a "sub-folder" of the app service to deploy into. But I'm not seeing any setting like that in any of the options. Is there a way to set up the "Azure App Service Deploy" to deploy to a single web job folder?
Or, is there an entirely different way to deploy a single web job?
I think you need to make sure the structure of your artifact matches the subfolders exactly. See here: http://www.bravegeek.com/2016/12/03/Deploy-WebJobs-from-Team-Services/
Relevant part:
In your Build definition, add a Copy Files step after the build step.
Set these properties
Source Folder: src/WebJobTest/bin/$(BuildConfiguration)/
Contents: **
Target Folder: $(build.artifactstagingdirectory)\WebJobTest\App_Data\jobs\continuous\WebJobTest

TFS 2018 Release Management to IIS

I am setting up a release for the first time in 2018 Release Management. We have a website that we want deployed to IIS.
The build definition is setup and has created the artifacts. When I setup the release definition I select the IIS Website Deployment template which gives me two tasks.
IIS Web App Manage
IIS Web App Deploy
They seem to cover similar ground, but I cannot find documentation to tell me how they are different. Do I need both?
When I configure IIS Web App Deploy, the Website Name field is grayed out. The link icon tells me
This setting is linked to the 'Website name' (Parameters.WebsiteName)
process parameter.
So I created the process parameter in the release definition and the build definition with a different name. However the Website Name does not update. Is there a way to manually edit this field?
In short:
IIS Web App Manage
This task does provisioning, for example creating an IIS Web Site and Application Pool. Typically this is only needed the first time deploying to a target machine, but there is no harm in running it on every deploy, since it then just skips creating already existing items.
IIS Web App Deploy
This task deploys your code.
You need to create a Deployment Group before using the IIS Website Deployment template. Deployment groups in VSTS/TFS make it easier to organize the servers that you want to use to host your app. A deployment group is a collection of machines with a VSTS/TFS agent on each of them. Each machine interacts with VSTS/TFS to coordinate deployment of your app.
Useful link and blog for your reference:
https://learn.microsoft.com/en-us/vsts/build-release/archive/apps/aspnet/aspnet-from-vsts-to-windows-vm?view=vsts
https://abelsquidhead.com/index.php/2017/11/28/build-and-deploy-to-multiple-iis-servers-and-sql-server-using-vsts/
If you don't want to use this template, you could also try other extensions, such as IIS Web App Deployment Using WinRM.
Both tasks are needed. The website name is set on the Environment level then referenced in all of the tasks within.

Deploying Single Page app from appveyor to azure

I'm trying to figure out how to continuously deploy a single page application from appveyor to an azure website. I'm in a bit of a bind because I don't have access to the azure directly, so I'm trying to figure out as many details before contacting the admin, but the appveyor/azure documentation is leaving me with some questions.
My Goals:
Deploy a static site after it's built or trigger azure to do a deployment after a successful build. The app is written in typescript with angular and a bunch of other dependencies that get compiled and bundled into a static site.
I do not want the end user to ever know a deployment is taking place, so any incremental copying to a live environment is out.
I do not want to check in derived files or builds into the repo.
I currently have a build system that bundles the static site it in a zip archive. So my questions are:
Will using the WebDeploy provider meet my goals? Will there be any downtime during deployments if I deploy the zip archive as an artifact?
Is there another approach that would work better?
Is there a way to do this with azure automated deployments? For example, trigger azure to deploy after a successful build. If so, can kudu handle cloning a private submodule as part of the deployment process. I saw that they have submodule support, but I couldn't figure out from the docs if there would be any authentication issues with private submodules.
FYI, the build system is 100% NodeJS driven and independent of the windows ecosystem.
AppVeyor will will automatically deploy to an Azure website. Use the website below to setup your deployment.
http://www.appveyor.com/docs/deployment/web-deploy
Users are going to notice the change if the static files are not cached in their browsers or if they do a hard reload. Regardless of the implementation method, It is advisable to use a CDN (content delivery network). Connect the CDN endpoints to your app service and have the DNS point to the CDN instead of app service. The CDN will serve the static files to the end user instead of the app service itself. The CDN caches the last deployed files and continues serving them to end user until you purge them. Hence, you can keep deploying to your app service and the end user doesn't get affected by your deployments at all since they are accessing your site via CDN instead of app service. Once you have a stable deployment, you can purge your CDN and the latest code will be cached to the CDN again from your app service.
To answer your question about deploying the code, Regardless of the CI/CD system you use, FTP deployment from azure CLI can be one of the methods. Click here for details. However, WebDeploy is the most standard methods of all when you deploy to an app service.

Resources