How to deploy a static website to Azure from Visual Studio Team Services - azure

I have an existing website that I would like to deploy on Azure, using Visual Studio Team Services. The website is made up of static files, there's no ASP.NET or anything else involved.
Within Visual Studio Team Services, I created a build which executes npm install and a gulp build. This results in a dist folder containing all the files for the website. In Azure, everything is set up correctly (subscription, web app,...).
However, I'm unsure on how to push my code to Azure. Exploring the options in the Release tab in VSTS, an 'artifact' always seems to be required, but I just have a bunch of files. I need to publish the files in the dist folder and make sure index.html is served.
How can I do that?
This question is related to this one, however, the answers all state to start from Azure, and do not mention how to deploy existing code using Visual Studio Team Services.

The trick is to create the artifact yourself, which can be as simple as a zip file containing the static website files. The zip file should be copied as an artifact to the $(build.artifactstagingdirectory) target directory. Next, you can use a simple Web App deployment task to publish the zip file to Azure. If index.html is in the root directory, Azure is smart enough to serve it.
Below is a working build and deploy flow. It assumes gulp is used to build the website and write the build output (i.e. the static files) to a dist folder.

The easiest way is to deploy from a source control, if you take a look under "Settings" for your Website in the Azure portal you will probably see "Continuous deployment".
From there you can deploy from Visual Studio Team Services, Github, etc.
Every check-in will be deployed, also wrong ones, so you may want a introduce a staging environment as a deployment slot as well, where you can swap staging with production whenever you feel your site is ready for production.

Without the need to create an artifact, another solution could be FTP deployment after creating an Service Endpoint in VSTS

Related

VSTS deployment not working properly

I've got .Net solution Built in VSTS. My Release also succeeded but I'm not able to see my WebApplication running. Find the screenshot attached
Please find my Deploy azure app service task screenshot attached .
Please suggest if i miss any configuration.
I see your package or folder to deploy in Deploy Azure App Service task is pointed to drop folder. Instead it should be pointed to zip file inside the drop folder.
Eg: $(System.DefaultWorkingDirectory)/TestApp/drop/TestApp.zip
Try this and update if any other issue.
It is the content of hostingstart.html, which is in the wwwroot folder of app service, you can check the files by accessing https://[web app name].scm.azurewebsites.net/DebugConsole and go to site\wwwroot folder.
If the app service can’t recognize the web project (e.g. Global.asax) and there aren’t the default page files (Web service Application settings.), it will display hosttingstart.html page)
So, you need to check the files in release artifact.
If it is the web deploy package (zip file), you need to publish it through Web Deploy. (Check Publish using Web Deploy option and specify package path in Package or folder box (e.g. $(System.DefaultWorkingDirectory)/**/*.zip), you can clear additional files by checking Remove additional files at destination option)

Node.js Azure WebJob: How to deploy from Visual Studio Team Services with Continuous Delivery

We have an existing Web App in Azure that we are deploying a Node.js webjob to.
We are currently deploying the webjob during the build (CI) process by copying the run.js and node_modules folder into the web app's app_data/jobs/continuous directory as per the only tutorial I found, then building and deploying the WebApp itself using CD.
While this works, it seems a little hacky, and it takes a really long time to deploy the web app now due to the huge number of files in the node_modules directory.
Is there a more automated approach, i.e. deploying the node.js webjob to an existing web app? I can find all kinds of tutorials for this scenario re: asp.net projects but only the one for node.js webjobs, which is described in para 2 above)
Update
I am using the instructions in Amit's blog: http://blog.amitapple.com/post/74215124623/deploy-azure-webjobs/#.VyC06DArKHs
Generally, if you are using Git to deploy your ASP.NET application to Azure Web Apps service, you can leverage npm manage file package.json to install the node modules via deployment task.
You can try the following steps:
Add a package.json file in your root directory path with the content including your needed dependencies. https://docs.npmjs.com/files/package.json#dependencies.
If you have the project in Visual Studio, you can right click the wwwroot, then click Add => "New item", then under the Client-side tab, select the NPM Configuration File to add.
After creating and config the npm configuration file, the Azure deployment task will install the dependencies automatically.
Create the webjob script and folder in your root directory in your repo or project. E.G. app_data\jobs\continuous\testwebjob\run.js. You can directly require the module, it will find the module in the node_modules in root directory.
Afterall, your root directory of your project will have the similar structure:
Any further concern, please feel free to let me know.

Deploy extra files to the site directory when deploying to Azure Websites from Visual Studio Online

I have been looking at this article. Part of the article says to place an extra file, applicationHost.xdt (the transform for an Azure Site Extension) in the site directory. The article mentions placing this file there via ftp.
The site directory in an Azure Web Site is the parent of the wwwroot directory that is used as the deployment target by the CI build that is configured when you connect an Azure Web Site to Visual Studio Online.
I would like to add the applicationHost.xdt file to source control and copy the file to the site directory on build. How would I go about modifying the automatically generated visual studio online build to accomplish this?
If you want to automatically deploy files to D:\Home\site, the only way to copy files to the D:\Home\site directory upon deployment would be to create a Custom Deployment Script
Alternatively, you could just copy the file there once and not deploy it again since it'll be a relatively static file.

How can I use the TFS Online <--> Azure Website integration when there are two web apps in the solution

I am trying to get continuous integration configured using Azure. The process I have followed is exactly as detailed by Continuous delivery to Windows Azure using Visual Studio Online
This process works perfectly! I check-in, it builds, and deploys to the Azure website. However, as soon as I add a second web application to the solution, after the CI build kicks off and then completes, the only thing that gets published to the website is the bin directory of the second web application! (Updates to the first project are successful, though)
Given the scenario, I don't understand why the dll's of the second application are being published to the bin directory when the rest of the application(i.e. content files) are not. There is no reference from app1 to app2 so the dll's shouldn't be brought in by reference.
How can I configure this so that it will also publish the second web application?
You can tell Windows Azure Web Sites which project within a repository to deploy using a deployment file.
Add a file called .deployment to the root directory of your repository, with this content:
[config]
project = src/MyApp.Web
You can specify the folder containing the web application, or the actual .csproj or .vbproj file for the application.
If you have two sites in a single solution/repository and you want to publish them both, you will need to use two separate Web Sites, and use App Settings in the portal to specify the project instead. Create the sites, and for each, add a setting called Project in the Configure page, with the path to the directory or project as before.
More info: https://github.com/projectkudu/kudu/wiki/Customizing-deployments (Kudu is the system that actually handles deployments on Azure Web Sites)

Azure Continuous Deployment from Visual Studio Team Services with multiple projects

While using Github (or anything other than Visual Studio Team Services) I can use the following page to customize deployment: https://github.com/projectkudu/kudu/wiki/Customizing-deployments
I'd like to customize my deployment as I currently have both a web app and a web api project. I want the web app to be deployed, as default it deploys the web api project. Using project Kudu the settings (.deployment file or even better, the app settings on Azure itself) works great, but not when you deploy from Visual Studio Team Services.
I've spoken with David Ebbo from Project Kudu, and he explained that VS Team Services doesn't use Kudu at all, but probably MS Build. So my question is, how to specifically deploy the web app.
I managed to change the Build Definition and specify the web app .csproj as the Projects To Build. This works. However, I also want to deploy my web api.
Deploying the web api project with Kudu is easy as I can create a separate website, connect to the some repository (and solution) and specify the Project App setting so that it deploys the correct .csproj. How should we do this for MS Build? When I change the Build Definition, it will always deploy the project specified in there.
Just saw another answer on Stackoverflow that looks to solve this problem: Publish Multiple Projects to Different Locations on Azure Website

Resources