Deploying with Azure Functions

Deploying your GraphQL server to Azure Functions

This tutorial walks through setting up an example project using the Azure Functions integration for Apollo Server.

We created this tutorial using a Linux environment. Some commands might differ if you use a Windows environment; please refer to the Azure documentation for more details.

Note that apollo-server-azure-functions does not enable you to add arbitrary middleware to your web server (though you can manually wrap the handler returned by createHandler in your own handler).

Prerequisites

You must do following before proceeding:

Setup an Azure account
Install the Azure Functions Core Tools CLI version 3.x
Install the Azure CLI 2.x

Setting up the project

Creating a new Function

We'll begin by creating a new project to test things out locally before deploying to Azure:

1
func init apollo-example --worker-runtime node
2
cd apollo-example
3
func new --template "Http Trigger" --name graphql

Next, run the func host start command. You should see something like the following output to your terminal:

1
Azure Functions Core Tools
2
Core Tools Version:       3.0.3477 Commit hash: 5fbb9a76fc00e4168f2cc90d6ff0afe5373afc6d  (64-bit)
3
Function Runtime Version: 3.0.15584.0
4

5
[2021-06-30T19:22:21.077Z] Worker process started and initialized.
6

7
Functions:
8

9
    graphql: [GET,POST] http://localhost:7071/api/graphql
10

11
For detailed output, run func with --verbose flag.

If you navigate to http://localhost:7071/api/graphql?name=Apollo in your browser and will now see the text: 'Hello Apollo.'

If you'd like to change the URL for this function (e.g., to something like http://{my-url}/graphql), you can change the URL prefix in the host.json file:

1
{
2
  "version": "2.0",
3
  "extensions": {
4
    "http": {
5
      "routePrefix": ""
6
    }
7
  }
8
}

Setting up Apollo Server

We'll start by installing the dependencies for apollo-server-azure-functions and graphql:

1
cd apollo-example
2
npm install apollo-server-azure-functions graphql

To set up the apollo-server-azure-functions library, replace the content of your graphql/index.js file with the following:

1
const { ApolloServer, gql } = require('apollo-server-azure-functions');
2

3
// Schema definition.
4
const typeDefs = gql`
5
  type Query {
6
    hello: String
7
  }
8
`;
9

10
// Resolver map.
11
const resolvers = {
12
  Query: {
13
    hello: () => 'Hello world!',
14
  },
15
};
16

17
// Create our server.
18
const server = new ApolloServer({
19
  typeDefs,
20
  resolvers,
21
  csrfPrevention: true,
22
  cache: 'bounded',
23
});
24
exports.graphqlHandler = server.createHandler();

See the README for apollo-server-azure-functions for more information about this package.

Next, we need to make a couple of changes to our graphql/function.json file:

Change the output name to $return
Add options to the list of methods (to ensure CORS works)

Your graphql/function.json file should now look like this:

1
{
2
  "bindings": [
3
    {
4
      "authLevel": "function",
5
      "type": "httpTrigger",
6
      "direction": "in",
7
      "name": "req",
8
      "route": "{*segments}",
9
      "methods": [
10
        "get",
11
        "post",
12
        "options"
13
      ]
14
    },
15
    {
16
      "type": "http",
17
      "direction": "out",
18
      "name": "$return"
19
    }
20
  ]
21
}

Note the route line above is only required if you'd like to use health checks.

Now return to the base folder and run the func host start command again:

1
func host start

Apollo Server should now be up and running! If you go back to your browser (to either http://localhost:7071/api/graphql?name=Apollo or your custom URL path) and refresh, you can now open up Apollo Sandbox and run operations against your server.

Deploying with the Azure CLI

Creating Azure resources

Before deploying, we first need to meet the requirements to set up a new Azure Function.

We'll start by creating a new Azure resource group for this project. The below command will create a resource group with the --name and --location you specify. Make sure you replace the --location with your Azure region.

1
az group create --name apollo-examples --location eastus

After creating a resource group, you will need to create a storage account to store your code on Azure. Make sure to choose a unique name for your project's storage account.

1
az storage account create \
2
    --name apolloexampleYOURNAME \
3
    --location eastus \
4
    --resource-group apollo-examples \
5
    --sku Standard_LRS

The last resource you'll need to create is a function app. The below command will create a new function app using the specified resource group, location, and storage account.

Note your function app name must be unique for this command to run successfully:

1
az functionapp create \
2
    --resource-group apollo-examples \
3
    --name apollo-example-YOURNAME \
4
    --consumption-plan-location eastus \
5
    --runtime node \
6
    --functions-version 3 \
7
    --storage-account apolloexampleYOURNAME

Publishing

After creating a function app, you can now publish your function to Azure using the Azure CLI.

Use the command below, inserting your function app name, to publish your function:

1
func azure functionapp publish apollo-example-YOURNAME

Your terminal will output something similar to the following:

1
Getting site publishing info...
2
Preparing archive...
3
Uploading 4.45 MB [###############################################################################]
4
Upload completed successfully.
5
Deployment completed successfully.
6
Syncing triggers...
7
Functions in apollo-example:
8
    graphql - [httpTrigger]
9
        Invoke url: https://apollo-example.azurewebsites.net/graphql?code=4aB9bka0fXFyTVeO8jAiHTc8bmyoqx2mEabk/QDA6gu2xLcqEAJRiw==

You can now navigate to the Invoke url shown in your terminal's output to see your function app up and running.

After completing this tutorial, you can delete all of the Azure resources you created by running the az group command:

1
az group delete --name apollo-examples --yes

Deploying to Azure with VS Code

You can also publish to Azure directly from VS Code using the Azure Functions Extension. Refer to the documentation on publishing to Azure from VS Code for more information.

Edit on GitHub

Lambda

Google Cloud Functions