How to use Actions on Google Client Library on Azure App Service

I introduced how to use Actions on Google Client Library on Azure Functions Node.js in the following story:

How to use Actions on Google Client Library on Azure Functions Node.js

Actually, we have another way to build your actions on Azure. It is to use Azure App Service.

Azure App Service Documentation - Tutorials, API Reference

You can deploy your express app into the Azure App Service without any touches, basically. Actions on Google Client Library can be used with the express.

express

actions-on-google/actions-on-google-nodejs

In this story, I introduce how to use Actions on Google Client Library on Azure App Service.

Architecture

I assume that you want to implement your fulfillment code on Azure App Service to handle requests from Dialogflow as like the following:

Prerequisite

You need to prepare the following:

• You have already registered your account on Azure.
• You have already installed Azure CLI and signed in to the Azure.
• You have already understood how to build actions for Google Assistant on Google Cloud Platform or Amazon Web Services.
• You already have your Actions on Google project and your Dialogflow agent that has already been connected to the AoG project.

If you don’t know how to build actions, you can study it with codelabs:

Build Actions for the Google Assistant (Level 1)

Build Actions for the Google Assistant (Level 2)

Create Your App Service

Let’s get started to create your App Service on Azure. If you don’t have your resource group, please create them using the following commands:

$ az group create --name <RESOURCE_GROUP_NAME> --location <LOCATION_NAME>

Next, create your App Service with the commands below. Here, we use a free plan.

$ az appservice plan create --name <PLAN_NAME> --resource-group <RESOURCE_GROUP_NAME> --sku FREE
$ az webapp create --resource-group <RESOURCE_GROUP_NAME> --plan <PLAN_NAME> --name <APP_NAME>

To work the Actions on Google Client Library, you need to prepare a Node.js environment. Please set the Node.js version to your App Service with the following command:

$ az webapp config appsettings set --resource-group <RESOURCE_GROUP_NAME> --name <APP_NAME> --settings WEBSITE_NODE_DEFAULT_VERSION=8.11.1

Create Node.js Project and Install Dependencies

You can build your actions with Actions on Google Client Library. To deploy it as the Azure App Service, you need to use express to handle HTTP requests and responses.

First, create your Node.js project with the npm command:

$ mkdir <APP_NAME>
$ cd <APP_NAME>
$ npm init

You will ask some questions from the command, but basically you can answer to press ENTER key for all questions. Then, install dependencies by the following command:

$ npm install --save actions-on-google express

The node_modules will be created and dependencies will be installed into the directory.

Write Fulfillment Code

Let’s get started to write your fulfillment code. Create a new file called index.js, and write the following content:

const express = require('express');
const bodyParser = require('body-parser');
const {dialogflow} = require('actions-on-google');
const port = process.env.PORT || 4567;
const app = dialogflow();
app.intent('Default Welcome Intent', conv => {
    conv.close('Hello, Azure!');
});
const expressApp = express().use(bodyParser.json());
expressApp.post('/', app);
expressApp.listen(port);

Create Web Config File

App Service has a Web server called “Microsoft Internet Information Services (IIS)”. And, your fulfillment code works on Node.js. IIS has to delegate requests to the node process. That is, you need to create a Web Config File called web.config. This is a configuration file for IIS written by XML format.

Create a new file named “web.config”, and write the following content:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <webSocket enabled="false" />
    <handlers>
      <add name="iisnode" path="index.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
          </conditions>
          <action type="Rewrite" url="index.js" />
        </rule>
      </rules>
    </rewrite>
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin" />
        </hiddenSegments>
      </requestFiltering>
    </security>
    <httpErrors existingResponse="PassThrough" />
  </system.webServer>
</configuration>

Pack, Deploy and Test

Now you can pack your code and deploy it to the Azure App Service. First, do the following command to pack your files:

$ zip -r files.zip .

Then, deploy the zip file to the Azure App Service:

$ az webapp deployment source config-zip --resource-group <RESOURCE_GROUP_NAME> --name <APP_NAME> --src <ZIP_FILE_PATH>

If deployed successfully, the URL of your fulfillment webhook endpoint is below:

https://<APP_NAME>.azurewebsites.net/

Register the URL as the fulfillment webhook URL on your Dialogflow agent. Then, invoke your action on the Actions simulator.

Conclusion

In this story, I introduced how to use Actions on Google Client Library on Azure App Service. If you are using Azure App Service, try to build your action for Google Assistant on Azure!