Deploying with 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:

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

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

1Azure Functions Core Tools
2Core Tools Version:       3.0.3477 Commit hash: 5fbb9a76fc00e4168f2cc90d6ff0afe5373afc6d  (64-bit)
3Function Runtime Version: 3.0.15584.0
4
5[2021-06-30T19:22:21.077Z] Worker process started and initialized.
6
7Functions:
8
9	graphql: [GET,POST] http://localhost:7071/api/graphql
10
11For 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:

1cd apollo-example
2npm 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:

1const { ApolloServer, gql } = require('apollo-server-azure-functions');
2const {
3  ApolloServerPluginLandingPageLocalDefault
4} = require('apollo-server-core');
5
6// Schema definition.
7const typeDefs = gql`
8  type Query {
9    hello: String
10  }
11`;
12
13// Resolver map.
14const resolvers = {
15  Query: {
16    hello: () => 'Hello world!',
17  },
18};
19
20// Create our server.
21const server = new ApolloServer({
22  typeDefs,
23  resolvers,
24  csrfPrevention: true,
25  cache: 'bounded',
26  plugins: [
27    ApolloServerPluginLandingPageLocalDefault({ embed: true }),
28  ],
29});
30exports.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:

1func 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.

1az 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.

1az 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:

1az 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:

1func azure functionapp publish apollo-example-YOURNAME

Your terminal will output something similar to the following:

1Getting site publishing info...
2Preparing archive...
3Uploading 4.45 MB [###############################################################################]
4Upload completed successfully.
5Deployment completed successfully.
6Syncing triggers...
7Functions 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:

1az 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.