Deploying the services from Visual Studio

Make sure you have created the required Azure resources and configured the required app settings on both GAB.ImageProcessingPipeline.Web and GAB.ImageProcessingPipeline.Functions before proceeding.

Local deploy

In order to run locally and debugging the web app and functions, we can run with multiple startup-projects and have the debugger attached to the one to debug.

1. In Visual Studio, right-click on the solution and select Set StartUp Projects
2. Select Multiple startup projects.
   • GAB.ImageProcessingPipeline.Functions should have Action: Start without debugging.
   • GAB.ImageProcessingPipeline.Web should have Action: Start.
3. Click Ok and press F5. Allow traffic through your Windows Firewall if prompted.
4. In a browser, navigate to http://localhost:52116/upload and try uploading an image to test that everything is working.

Images will start to appear as they are processed.

Debugging tips

• Open the dev-console in your browser and watch log messages output progress and status.
• Use Azure Storage Explorer to watch the files appear in the blob containers as they are processed by the functions.
• Watch the Azure Functions command-window for logging output from the functions when debugging.
• Click on the Application Insights button at the top-toolbar to get instrumentation for GAB.ImageProcessingPipeline.Web in the current debugging-session.

Testing functions with a REST-client

Use curl or any other REST-client to test the functions by calling the IngressFunction with the following parameters:

curl -X POST \
  https://nnuggab2018<your initials>functions.azurewebsites.net/api/ingress \
  -H 'Cache-Control: no-cache' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -H 'x-functions-key: <your functions key>' \
  -F 'file=@<path to your image file>'

The x-functions-key header is only required when testing the deployed function in Azure.

Azure deploy

Deploy GAB.ImageProcessingPipeline.Functions

In order to publish the functions we need to create a Publish Profile and specify Release settings:

1. In Visual Studio, right-click on the GAB.ImageProcessingPipeline.Functions project and select Publish
2. In the Pick a publish target window select Select Existing, find your nnuggab2018<your initials>functions app service and click Ok.

The Publish Profile will now be created. When complete, add the required app settings:

1. Click on Manage Application Settings.
2. Copy each of the app settings from your local.settings.json.
   • Helpful tip: since this dialog has some UX-issues, have the file local.settings.json open in another text-editor for easier copy-pasting.
3. Click Ok.

Now that the settings are ready, deploy by clicking on Publish.

You can test the function by using any REST-client, see the section Testing functions with a REST-client earlier on this page.

Deploy GAB.ImageProcessingPipeline.Web

In order to publish the web app we need to create a Publish Profile:

1. In Visual Studio, right-click on the GAB.ImageProcessingPipeline.Web project and select Publish
2. In the Pick a publish target window select Select Existing, find your nnuggab2018<your initials>web app service.
3. Click Ok.

A browser-window will open the deployed web app once Web Deploy is complete. Test that everything works by uploading an image and watch as processed images appear.