Configure app settings - HenrikWM/NNUG_GAB2018 GitHub Wiki

Configure required app settings

This section will guide you through setting up the applications with required app settings in order to run locally and in Azure.

Open the solution file src\ImageProcessingPipeline\GAB2018.sln to get started.

Security note: Do not check-in sensitive config-files into source control! The config-files used are added to .gitignore to prevent check-in of sensitive account details and settings.

Setting up GAB.ImageProcessingPipeline.Web

For this ASP.NET MVC web app we'll use HiddenAppSettings.config and HiddenAppSettings.Release.config for secret app settings when in Debug and Release build configuration. These files contain the secret app settings sections used by web.config when the application is running.

  1. In Visual Studio, copy the file HiddenAppSettings.config.example and paste two new files to the same location.
  2. Rename them HiddenAppSettings.config and HiddenAppSettings.Release.config.
  3. Right-click on both files and make sure Build Action is Content.

Continue with the next sections to find each app setting.

Azure Storage

Copy key1 connection string

  1. In the Azure Portal, navigate to your Storage Account nnuggab2018<your initials>.
  2. Click on Access keys on the left-hand side menu and copy the key1 Connection String.
  3. Paste the connection string into your BlobStorage app setting in HiddenAppSettings.config and HiddenAppSettings.Release.config.

Note: You could use separate Azure Storage accounts for local development and deployed application but for simplicity's sake we will use the same in both environments.

Configure CORS

We need to allow the web app to make requests against the blob containers. For simplicity we will just whitelist all origins. Don't do this for real-life production-use!

  1. Click on CORS on the left-hand side menu.
  2. Add the "Allow all" whitelist rule by entering:
Allowed origins: *
Allowed verbs: <select all>
Allowed headers`: *
Exposed headers`: *
Maximum age`: 3600
  1. Click Save.

Functions App Service url

  1. In the Azure Portal, navigate to your Functions App Service nnuggab2018<your initials>functions.
  2. Find the URL setting and copy the URL.
  3. Paste the URL into your IngressFunctionBaseUrl app setting in HiddenAppSettings.Release.config.
  4. In your HiddenAppSettings.config, use http://localhost:7071

Functions key

Copy default key app setting

The functions are deployed with Function-authorization, meaning we can use a query string or a custom HTTP-header to send a key for authorizing the client's request. The application will use a custom header and get the key from the app setting you provide.

  1. On the same page as the previous step, click on Function App Settings.
  2. Under Host Keys, copy the default key.
  3. Paste the key into your FunctionsKey app setting in HiddenAppSettings.Release.config.
  4. Leave the FunctionsKey empty in HiddenAppSettings.config as it will not be used during local development.

Configure CORS

We need to allow the web app to do HTTP-requests against the functions. We will use a simple wildcard for now. Don't do this for real-life production-use!

  1. Click on the Platform features tab, and click on the CORS link under API title.
  2. Delete the existing entries and add a new with only *.
  3. Click Save.

Setting up GAB.ImageProcessingPipeline.Functions

In Visual Studio at the project root, rename the local.settings.json.example file to local.settings.json.

Continue with the next sections to find each app setting.

AzureWebJobsStorage, AzureWebJobsDashboard and BlobStorage

For simplicity we'll use the same Azure Storage connection string for all three.

  1. Find the connection string for key1 used in a previous section Azure Storage
  2. Paste the connection string into the app settings AzureWebJobsStorage, AzureWebJobsDashboard and BlobStorage.

CognitiveServicesApiRoot

Note: if you want to use Azure Cognitive Services and the Computer Vision API, continue. If not, skip this part.

  1. Navigate to Cognitive Services.
  2. Click on Get API Key next to Computer Vision API and log in with your Azure account.
  3. Accept terms & conditions and proceed to next page.
  4. Copy the Endpoint URL.
  5. Paste the URL into your CognitiveServicesApiRoot app setting.

CognitiveServicesSubscriptionKey

Note: if you want to use Azure Cognitive Services and the Computer Vision API, continue. If not, skip this part.

  1. On the same page as step 4 in the previous section, copy the Key 1.
  2. Past the key into your CognitiveServicesSubscriptionKey app setting.
⚠️ **GitHub.com Fallback** ⚠️