Deploying Serverless NestJS GraphQL API to Azure Functions

Getting

nest/azure-func-http

and

nest/graphql

to play well together is tricky. There are several GH issues and SO posts on this topic with little in the way of a solution. Additionally, none of the official nest.js docs or samples contain a configuration with both graphql and azure functions.

The one source of reliable information on this topic is a blog post by trilon.io here. This is a good tutorial on creating a Nest.js REST api with

nest/azure-func-http

. However the tutorial steps to not carry over directly when creating a GraphQl API.

This repo and tutorial is a minimal example of a working integration of

nest/azure-func-http

and

nest/graphql

. I hope this helps some folks out!

Starting Point

I started this repo with the boilerplate from 23-type-graphql. This is a working repo with Typescript, GraphQL, and Nest but NOT

nest/azure-func-http

Adding azure-func-http

$ nest add @nestjs/azure-func-http

This will install the function app boilerplate in the repo. Here is where this tutorial deviates from the trilion.io tutorial. Several of the default azure function configurations need to be altered along with some of your nest app code.

Steps

1. Change build script in

package.json

- "build": "nest build"
+ "build": "rimraf dist && tsc -p tsconfig.build.json"

2. Remove the include from your tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true
  },
-  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

These two steps create seperate

/src

and

/main

directories in

/dist

.

• /src

  is for your source code

• /main

  is the entry point for the function app

3. Adjust Nest.js App

At this point the azure function will run but it will not resolve your GraphQL requests! Some changes need to be made to the nest app itself.

main.ts

import { ValidationPipe } from "@nestjs/common";
import { NestFactory } from "@nestjs/core";
import { AppModule } from "./app.module";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe());
+ app.enableCors();
+ app.setGlobalPrefix("api");
  await app.listen(3000);
}
bootstrap();

app.module.ts

import { Module } from "@nestjs/common";
import { GraphQLModule } from "@nestjs/graphql";
import { RecipesModule } from "./recipes/recipes.module";

@Module({
  imports: [
    RecipesModule,
    GraphQLModule.forRoot({
      installSubscriptionHandlers: true,
+     context: ({ req }) => ({ req }),
      autoSchemaFile: "schema.gql",
+     useGlobalPrefix: true
    })
  ]
})
export class AppModule {}

3. Adjust function app config

host.json

{
  "version": "2.0",
+ "extensions": {
+   "http": {
+     "routePrefix": "api"
+   }
  }
}

index.ts

import { Context, HttpRequest } from "@azure/functions";
import { AzureHttpAdapter } from "@nestjs/azure-func-http";
import { createApp } from "../src/main.azure";

export default function(context: Context, req: HttpRequest): void {
+ context.res = {
+   headers: {
+     "Content-Type": "application/json"
+   }
+ };
  AzureHttpAdapter.handle(createApp, context, req);
}

Your GraphQL function app is good to go!!

$ npm run build && func host start

Testing out the app

Add a sample body to the create method in

recipies.service.ts

for testing.

recipies.service.ts

  async create(data: NewRecipeInput): Promise<Recipe> {
+    return {
+      id: "sample",
+      title: data.title,
+      description: data.description,
+      creationDate: new Date(),
+      ingredients: data.ingredients
+    } as Recipe;
- return {} as any;
  }

fire up http://localhost:7071/api/graphql and run a mutation

mutation($newRecipeData: NewRecipeInput!) {
  addRecipe(newRecipeData: $newRecipeData) {
    creationDate
  }
}

query variables

{
  "newRecipeData": {
    "title": "Salad",
    "description": "Im trying to be healthy and im disappointed in my self",
    "ingredients": ["leaves", "sadness"]
  }
}

you should get back something like....

{
  "data": {
    "addRecipe": {
      "creationDate": 1582340836192
    }
  }
}

---

Deploying to Azure Functions

The battle has been won but the war has just begun

1. Create resource in Azure Portal

Navigate to your azure account and create a new

Function App

. The

Create Function App

workflow contains five tabs: Basics, Hosting, Monitoring, Tags, and Review + create. Settings in

Basics

and

Hosting

need to be adjusted, the other tabs can be left at their defaults.

Basics

Hosting

Upon completing the Basics and Hosting, press

Review + create

to deploy the function app.

2. Deploy your code to the Function App

Once created, head back to your editor and deploy your Nest Graphql App to this newly created Function App.

$ npm run build && func azure functionapp publish <APP_NAME>

This will create an output similar to the following:

Note: This step requires

Azure Functions Core Tools v3

for local development and deployment of Azure Functions. Instructions on how to get this on your development machine can be found here

3. Use the deployed graphql endpoint

Wait a few minutes for the application to propagate then head to the deployed graphql endpoint:

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

You should then be treated to the graphql playground.

Notes on Deployment

Getting the function to run remotely on azure is not clear cut. I have found that the best configuration options are Function app V3 and WEBSITES_NODE_DEFAULT_VERSION set to ~12

Documentation on how to changes these Azure related setting can be found here

If you are using vscode there is some helpful extensions for deploying function apps. Your can read about that here

Included in this repo is a

template.zip

. This contains the templated deployment parameters from the

Deploying to Azure Functions

section of this article.