DEV Community: My

Protect your function app with Azure KeyVault

My — Thu, 26 Sep 2019 06:18:31 +0000

This article is part of #ServerlessSeptember. You'll find other helpful articles, detailed tutorials, and videos in this all-things-Serverless content collection. New articles are published every day — that's right, every day — from community members and cloud advocates in the month of September.

Find out more about how Microsoft Azure enables your Serverless functions at https://docs.microsoft.com/azure/azure-functions/.

You should never store secrets in code. But what if your function need access to a secret, ie. a connection string to a storage blob? You can store those secrets in Azure KeyVault and securely reference said secrets in your function app.

The rest of this article is going to show you how to set this up without using Azure Portal.

If you want to learn more about how to better secure your function app, take a look at this article by Function PM Matthew

They can't hack your servers if you don't have any servers, right?

Matthew Henderson ・ Sep 23 '19

#serverless #security #azure

Pre-requisites

Azure CLI

Installation guide

jq

a lightweight and flexible command-line JSON processor that I promise you'll be using over and over again

A deployed function app

This can either be done through

azure-cli
Serverless framework - recommended since this article is building upon the sample app walk through from yesterday

Create and Deploy Azure Functions with Serverless

My ・ Sep 24 '19

#serverless #webdev #tutorial #node

Walk-through

All the scripts I mentioned below can be find in this accompanying repo

mydiemho / myho-serverless-demo

app to demo connecting Azure KeyVault using Serverless Framework

Feel free to change the chosen resource name in the scripts to something else, but beware that different resource have different naming restrictions.

Refer to the Azure resources naming convention guide if you're having trouble using
your desire values.

Log in

az account show # list all subscriptions you have access to 
az account set --subscription <SUB_ID> # id of the sub you want to use
az login

Clone repo

git clone git@github.com:mydiemho/myho-serverless-demo.git
cd myho-serverless-demo

Set up keyVault

./scripts/create-keyvault.sh

The script will create a resource group and a keyVault.

Add secrets

./scripts/add-secrets.sh AwesomeSecret AwesomeSecretValue

The script takes 2 inputs: the secret key and the secret value. If you do not pass in any inputs, the default key and value will be used.

Take note of the secret url in the output, you'll need it in a later step

Grant function app read permission

In order for the app the reference keyVault secrets, you have to add the app to the keyVault's access policies.

Behind the scene

The steps involved in doing this is:

Adding a system-assigned identity to the function app ¹
Add this identity as access policy to keyVault

How-to

You'll have to first deploy a function app, then you can using the following script to grant access to the app

./scripts/grant-app-access.sh <APP_RESOURCE_GROUP> <APP_NAME>

Once the script finish, you can check the portal and see that a new access policy has been added to the function app

Add new app setting

We'll add the keyvault secret reference as an app setting ^*. App settings are available as environment variables to function handlers.

Using serverless, anything under the environment section will be created as app settings.

Make sure to replace the url with the one generated in add secrets


# see https://github.com/mydiemho/myho-serverless-demo/blob/master/serverless.yml#L29

  environment: # these will be created as application settings
    SUPER_SECRET: "@Microsoft.KeyVault(SecretUri=https://myho-serverless-demo-kv.vault.azure.net/secrets/MySuperSecretName/88df087331004326994047248b0b6b67)"

Add new function

You can either update the handler code for one of the function or create a new function. For this example, I choose to create a new function called secrets.

update serverless.yml

add the following section to your yaml below existing functions


# see https://github.com/mydiemho/myho-serverless-demo/blob/master/serverless.yml#L93

  secrets:
    handler: src/handlers/secrets.printSecrets
    events:
      - http: true
        x-azure-settings:
          methods:
            - GET
          authLevel: anonymous

add handler code

Add a new file src/handlers/secrets.js


# https://github.com/mydiemho/myho-serverless-demo/blob/master/src/handlers/secrets.js

"use strict";

const superSecret = process.env["SUPER_SECRET"];

module.exports.printSecrets = async function(context, req) {
  context.log(
    "JavaScript HTTP trigger function processed a request to display the secret in keyvault."
  );

  context.res = {
    // status: 200, /* Defaults to 200 */
    // FOR DEMO PURPOSE: DO NOT LOG SECRETS IN PRODUCTION
    body: `Shhhhh.. it's a secret: ${superSecret}`
  };
};

Deploy new changes

Once you've done all the set up, you're now ready to test out your new function app that is referencing KeyVault

sls deploy

If you're having trouble deploying, refer to this article to make sure you have done all the pre-requisites

Create and Deploy Azure Functions with Serverless

My ・ Sep 24 '19

#serverless #webdev #tutorial #node

Verify changes

After deploy, you can hit the function url, apim url, or using the invoke command to test your changes.

➜ sls invoke -f secrets                                                                             
Serverless: Logging into Azure

...

Serverless: Invoking function secrets with GET request
Serverless: "Shhhhh.. it's a secret: ItIsASecret"

Create and Deploy Azure Functions with Serverless

My — Tue, 24 Sep 2019 23:04:19 +0000

This article is part of #ServerlessSeptember. You'll find other helpful articles, detailed tutorials, and videos in this all-things-Serverless content collection. New articles are published every day — that's right, every day — from community members and cloud advocates in the month of September.

Find out more about how Microsoft Azure enables your Serverless functions at https://docs.microsoft.com/azure/azure-functions/.

Overview

Previously, the most common way to create Azure Functions is through the portal or using azure-cli.

When using either of these tools to create and deploy Azure Functions, you have to first manually deploy the dependent resources

Resource group
Storage account
App service plan

You also have to write your own bindings and put them in a specific location for functions to work ¹. For example, if you have a hello http-trigger function, you will need a hello/function.json file with the following content

# hello/function.json

{
  "disabled": false,
  "bindings": [
    {
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "authLevel": "anonymous"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ],
  "entryPoint": "sayHello",
  "scriptFile": "../src/handlers/hello.js"
}

Fortunately, there's a much simpler way to do this. The serverless-azure-functions plugin allows you to quickly create and deploy function without all the overhead work.

Currently, the plugin only supports node, support for other languages are coming.

Pre-requisites

Node.js

Serverless is a Node.js CLI tool so you'll need to install Node.js on your machine.

Serverless

Make sure Serverless is installed and you're on at least 1.53

   npm i -g serverless

➜ sls -v
Framework Core: 1.53.0
Plugin: 3.1.0
SDK: 2.1.1
Components Core: 1.0.0
Components CLI: 1.2.3

Once installed, the Serverless CLI can be call with serverless or
the shorthand sls command.

$ sls -h


Commands
* You can run commands with "serverless" or the shortcut "sls"
* Pass "--verbose" to this command to get in-depth plugin info
* Pass "--no-color" to disable CLI colors
* Pass "--help" after any <command> for contextual help

Create function

Command

Using the create command we can specify one of the available templates. For this example we use azure-nodejs with the --template or shorthand -t flag.

The --path or shorthand -p is the location to be created with the template service files.

sls create --template azure-nodejs --path $(whoami)-sample-app

Output

The command above created a new directory, in my case myho-sample-app, with the following contents.

├── src
|   ├── handlers
|       ├── goodbye.js
|       ├── hello.js
|   ├── .gitignore
|   ├── host.json
|   ├── package.json
|   ├── README.md
|   ├── serverless.yml

Note

Azure plugin uses a combination of:

prefix, if provided
service name
region
stage

to generate resource names on deployment. Since resource name have to be unique in Azure, adding $(whoami) will append your username to
the service name, thus creating a unique name.

Install Azure Plugin

The previous step created a new directory <YOUR-USER-NAME>-sample-app where all the function related code are stored. cd into that directory

Run

npm install

Testing locally

You can skip this section if you do not want to test your functions locally before deploy.

The sample app created from template contains 2 functions: hello and goodbye. You can test them locally before deploying to Azure.

You'll need to use 2 terminal windows for the following.

Terminal 1

sls offline

While this process is running, you'll notice that some new files have been added. These files are necessary for Azure function to operate but will be clean up when the process exit.

Terminal 2

sls invoke local -f hello -d '{"name": "Azure"}'

In your terminal window you should see the following response

$ Serverless: URL for invocation: http://localhost:7071/api/hello?name%3DAzure
$ Serverless: Invoking function hello with GET request
$ Serverless: "Hello Azure"

Deploy to Azure

Once you're happy with your code, the next step is to deploy to Azure.

Azure subscription

If you don't have an Azure account, get started by signing up for a free account, which includes $200 of free credit

Set up credentials

Before you can deploy, you'll have to set up a service principal.

Azure-cli

Make sure you have azure-cli installed

Log in

az login
az account list # list all subscriptions
az account set --subscription <SUBSCRIPTION_ID> # choose the one you want

Generate service principals

Download this script, run it, and follow the printed instruction.

The script will generate, extract, and write the required credentials to a file that you can then export as environment variables.

# Download the file and name it `sp.sh`
curl https://raw.githubusercontent.com/serverless/serverless-azure-functions/master/scripts/generate-service-principal.sh -o sp.sh

# skip this if you're on windows
chmod +x sp.sh

# run the script
./sp.sh

Deploy

Deploying to Azure is as simple as running the following command

# if you want more logging info, uncomment the next line
# export SLS_DEBUG=*

sls deploy

Behind the scene

The plugin created an arm template that is used to deploy all the dependent resources
- Resource group
- App service plan
- Storage account
Once the infrastructure is up and running, the zipped source code is deployed to the function app

➜ sls deploy
Serverless: Parsing Azure Functions Bindings.json...
Serverless: Building binding for function: hello event: httpTrigger
Serverless: Parsing Azure Functions Bindings.json...
Serverless: Building binding for function: goodbye event: httpTrigger
Serverless: Packaging service...

...

Serverless: -> Deploying ARM template...

...

Serverless: -> ARM deployment complete
Serverless: Deploying serverless functions...
Serverless: Deploying zip file to function app: sls-wus-dev-myho-sample-app
Serverless: -> Deploying service package @ /Users/myho/dev/work/github.com/mydiemho/azure-utils/myho-sample-app/.serverless/myho-sample-app.zip

...

Serverless: Deployed serverless functions:
Serverless: -> goodbye: [GET] sls-wus-dev-myho-sample-app.azurewebsites.net/api/goodbye
Serverless: -> hello: [GET] sls-wus-dev-myho-sample-app.azurewebsites.net/api/hello

Test deployed functions

You can test the deployed functions by going directly to the url, or using the invoke command.

sls invoke -f hello -d '{"name": "Azure"}'

Wrap up

Congratulation! You have created and deployed your first Azure function with Serverless.

Next step

There are a lot more you can do with Serverless than just Http-trigger functions.

API Management

You can add APIM to your functions by configure the apim section in serverless.yml. The generated file already included this, just uncommented the section (line 33-59) and redeploy to give it a try.

APIM Configuration

# serverless.yml

apim:
  apis:
    - name: v1
      subscriptionRequired: false # if true must provide an api key
      displayName: v1
      description: V1 sample app APIs
      protocols:
        - https
      path: v1
      tags:
        - tag1
        - tag2
      authorization: none
  cors:
    allowCredentials: false
    allowedOrigins:
      - "*"
    allowedMethods:
      - GET
      - POST
      - PUT
      - DELETE
      - PATCH
    allowedHeaders:
      - "*"
    exposeHeaders:
      - "*"

1 . Deploy Output

➜ sls deploy

...

Serverless: Starting APIM service deployment
Serverless: -> Deploying API keys
Serverless: -> Deploying API: v1
Serverless: -> Deploying API Backend: myho-sample-app-backend => https://sls-wus-dev-myho-sample-app.azurewebsites.net/api
Serverless: -> Deploying CORS policy: v1
Serverless: -> Deploying API Operations: sls-wus-dev-797b03-apim
Serverless: --> GET-hello: [GET] https://sls-wus-dev-797b03-apim.azure-api.net/v1/hello
Serverless: --> GET-goodbye: [GET] https://sls-wus-dev-797b03-apim.azure-api.net/v1/goodbye
Serverless: Finished APIM service deployment

You will not be able to use the invoke command to test the APIM set up

Additional Triggers

In addition to http-trigger functions, the following triggers are also supported

Storage Blob
Storage Queue
Timer
Service Bus Queue
Service Bus Topic
EventHubs

For more information, see the official doc

More hands-on training

If you get this far and want to learn more about serverless on Azure, Microsoft is hosting a free workshop in NYC before ServerlessConf on Monday, Oct 7, 2019. Registration is @ http://aka.ms/nycworkshop

There may or may not be 🍦🍦🍦🍦🍦

ErrorBoundary does not re-render app when place below react-router

My — Fri, 25 Jan 2019 06:13:21 +0000

I am adding ErrorBoundary to my app but I found that when I add ErrorBoundary below react-router, the app doesn't re-render on route change until I manually force refresh.

Here's the sample code. I'm using BrowserRouter here. I would like to understand why the order of placement is important here.

App doesn't re-render until force refresh

<Router>
    <div className="app-shell">
        <ErrorBoundary>
            <Navbar />
            <div className="app-main">
                <Sidebar project={this.props.currentProject} />
                <MainContentRouter />
            </div>
            <ToastContainer />
        </ErrorBoundary>
    </div>
<Router>

WORKS FINE

<ErrorBoundary>
    <Router>
        <div className="app-shell">
            <Navbar />
            <div className="app-main">
                <Sidebar project={this.props.currentProject} />
                <MainContentRouter />
            </div>
            <ToastContainer />
        </div>
    <Router>
</ErrorBoundary>