How do you deploy an Azure WebJob and App to the same App Service via VSTS?

Question

I have a Visual Studio 2017 solution with both an ASP.NET Web Application project (called UI) and an Azure WebJob project (called WebJobs). I have configured both to deploy to Azure from within Visual Studio (right click, publish) to the same App Service. The solution is also configured to build whenever I push to VSTS.

I would like to set up VSTS to also deploy both projects upon successful builds but I cam having problems.

My understanding is that to achieve this I need to create a release definition that is linked to my build definition with a "Deploy Azure App Service" task added to the pipeline. I tried this and got an error because more than one .zip file was found in the artifacts folder which advised me to make the filter more specific, so I changed the "Package or folder" option from $(System.DefaultWorkingDirectory)/**/*.zip to $(System.DefaultWorkingDirectory)/**/UI.zip. This got around the error but now obviously it's only deploying my App (UI).

My next step was to try creating a separate Environment for the WebJob project and specify $(System.DefaultWorkingDirectory)/**/WebJobs.zip as the Package. Now both environments "successfully" deploys but it breaks my App and I am pretty sure it has deployed the WebJob over the top of the App (I don't know how to confirm this belief...).

I notice that when you add an Environment to the release definition and choose a template, under "Azure App Service Deployment" it says: "Deploy your application to Azure App Services. Choose from Web App On Windows, Linux, Containers, Function Apps or Web Jobs" but when choose this template WebJob isn't listed in the "App Type" drop down!

I have found a few resources online regarding the deployment of of WebJobs from VSTS but they are all outdated and the options described no longer match those currently in VSTS.

SOLVED:

My problem was solved as a result of both David Ebbo's and starian chen's answers below.

Firstly you must right click your Web App project in Visual Studio and select Add > Existing Project as Azure WebJob and follow the wizard. Next you must ensure that the VSTS deploy task only finds one .zip package to deploy by updating the Package or folder path filter so it only finds the Web App's one; in my case it was $(System.DefaultWorkingDirectory)/**/UI.zip.

Big thanks to @DavidEbbo and @starianchen for their help!

Solution

All you have to do is create the WebJob project by right clicking on your Web App and choosing:

Add / New Azure WebJob project

Or if you already have a WebJobs project in the solution:

Add / Existing WebJob project

Once you do that, publishing the Web App automatically publishes the WebJob where it belongs. It all happens in a single zip file, and there is nothing special to do in VSTS. Do not try to publish the WebJob project individually once you do that.