Deploying with Azure Functions
Deploying your GraphQL server to Azure Functions
This tutorial walks through setting up an example project using the
We created this tutorial using a Linux environment. Some commands might differ if you use a Windows environment;
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 Azureaccount
- 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:
func init apollo-example --worker-runtime nodecd apollo-examplefunc new --template "Http Trigger" --name graphql
Next, run the func host start
command. You should see something like the following output to your terminal:
Azure Functions Core ToolsCore Tools Version: 3.0.3477 Commit hash: 5fbb9a76fc00e4168f2cc90d6ff0afe5373afc6d (64-bit)Function Runtime Version: 3.0.15584.0[2021-06-30T19:22:21.077Z] Worker process started and initialized.Functions:graphql: [GET,POST] http://localhost:7071/api/graphqlFor detailed output, run func with --verbose flag.
If you navigate to
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:
{"version": "2.0","extensions": {"http": {"routePrefix": ""}}}
Setting up Apollo Server
We'll start by installing the dependencies for apollo-server-azure-functions
and graphql
:
cd apollo-examplenpm 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:
const { ApolloServer, gql } = require('apollo-server-azure-functions');const {ApolloServerPluginLandingPageLocalDefault} = require('apollo-server-core');// Schema definition.const typeDefs = gql`type Query {hello: String}`;// Resolver map.const resolvers = {Query: {hello: () => 'Hello world!',},};// Create our server.const server = new ApolloServer({typeDefs,resolvers,csrfPrevention: true,cache: 'bounded',plugins: [ApolloServerPluginLandingPageLocalDefault({ embed: true }),],});exports.graphqlHandler = server.createHandler();
See the 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 ofmethods
(to ensure CORS works)
Your graphql/function.json
file should now look like this:
{"bindings": [{"authLevel": "function","type": "httpTrigger","direction": "in","name": "req","route": "{*segments}","methods": ["get","post","options"]},{"type": "http","direction": "out","name": "$return"}]}
Note the route
line above is only required if you'd like to use
Now return to the base folder and run the func host start
command again:
func host start
Apollo Server should now be up and running! If you go back to your browser (to either
Deploying with the Azure CLI
Creating Azure resources
Before deploying, we first need to meet the requirements to set up a new
We'll start by creating a new --name
and --location
you specify. Make sure you replace the --location
with
az group create --name apollo-examples --location eastus
After creating a resource group, you will need to create a
az storage account create \--name apolloexampleYOURNAME \--location eastus \--resource-group apollo-examples \--sku Standard_LRS
The last resource you'll need to create is a
Note your function app name must be unique for this command to run successfully:
az functionapp create \--resource-group apollo-examples \--name apollo-example-YOURNAME \--consumption-plan-location eastus \--runtime node \--functions-version 3 \--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:
func azure functionapp publish apollo-example-YOURNAME
Your terminal will output something similar to the following:
Getting site publishing info...Preparing archive...Uploading 4.45 MB [###############################################################################]Upload completed successfully.Deployment completed successfully.Syncing triggers...Functions in apollo-example:graphql - [httpTrigger]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
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