5.8 Deploying Auth
Since we have made changes locally, we need to redeploy the API and frontend app as well as the new serverless function we created for our action
Objectives
- Upload Environmental Variables
- Run migrations
- Deploy Serverless Function
Exercise 1: Deploy a Serverless Function
Let’s get the fun part done first — let’s deploy the serverless function for our action.
Task 1: Create an Azure Function
Starting with creating a resource group for managing the serverless function. Run the following to create one:
az group create \--name hermserverless \--location uksouth
Sometimes a serverless function needs storage to store metadata and execution state. Add a storage in the resource group you just created for the function we will create soon:
az storage account create \--name <STORAGE NAME Eg. hermserverlessstorage> \--location uksouth \--resource-group <RESOURCE GROUP Eg. hermserverless> \--sku Standard_LRS
Finally, create a function that will be managed in the resource group we just created and uses the storage we created as well:
az functionapp create \--resource-group <RESOURCE GROUP Eg. hermserverless> \--consumption-plan-location uksouth \--name <UNIQUE NAME Eg. hermserverless> \--storage-account <STORAGE NAME Eg. hermserverlessstorage> \--runtime node
Task 2: Deploy Function
It’s time to push the code from our local machine to the Azure Function we created. You can publish this function using the func
CLI tool:
func azure functionapp publish <UNIQUE NAME Eg. hermserverless>
When the deploy is done, you should get the URL in the console:
Since there is a GRAPHQL_BASE_API
environmental variable, we need to set it as well. Run the following command to set an env variable in the cloud function:
az functionapp config appsettings set \--name <FUNCTION NAME eg. hermserverless> \--resource-group <RESOURCE GROUP eg hermserverless> \--settings "GRAPHQL_BASE_API=<GRAPHQL_BASE_API eg https://hermapi.azurewebsites.net>"
You can stream the logs from this function by running:
az webapp log tail \--resource-group hermserverless \--name hermserverless
Task 3: Update Action Url
Since we have two different environments now for the serverless function — local and production, we need to find a way to provide the correct URL depending on the API’s environment.
Luckily, Hasura allows you to use placeholders for environmental variables inside the action URL text box. First copy the URL you got after deploying which looks like this:
https://hermserverless.azurewebsites.net/api/checkandregisteruser?code=<ACCESS CODE>
Replace the base as follows:
{{ACTIONS_BASE_URL}}/api/checkandregisteruser?code=<ACCESS CODE>
Next open the console by running the following in the api/hasura
folder:
hasura console --admin-secret <ADMIN SECRET>
Then go to the Actions tab, open the checkAndRegisterUser action and paste the edited URL in the Handler URL field:
Now click Save to update the function.
The ACTIONS_BASE_URL
needs to be set in the local docker-compose.yml
file as well as in production.
To set locally, open api/docker-compose.yml
file and add the following to the env variables:
environment:HASURA_GRAPHQL_JWT_SECRET: '...'+ ACTIONS_BASE_URL: http://host.docker.internal:7071
To set in production run the following command:
az webapp config appsettings set \--resource-group herm \--name <API NAME eg. hermapi> \--settings \ACTIONS_BASE_URL=<SERVERRLESS BASE Eg. https://hermserverless.azurewebsites.net/api/checkAndRegisterUser>
Exercise 2: Redeploy GraphQL API
Task 1: Update Env Variables
We added the HASURA_GRAPHQL_JWT_SECRET
when enabled JWT, which means we need to send these settings to production as well. Run the following to add the same settings to your production API env:
az webapp config appsettings set \--resource-group herm \--name <API NAME eg. hermapi> \--settings \HASURA_GRAPHQL_JWT_SECRET='{"type": "RS512", "key": "-----BEGIN CERTIFICATE---<...KEY HERE...>-----END CERTIFICATE-----\n"}'
Task 2: Run Migrations
So far, since our last migration, we have made the following changes:
- Add permissions
- Create actions
- Update database schema
We need to run migrations to push these changes to production:
hasura migrate apply \--endpoint <GRAPHQL API ENDPOINT Eg. https://hermapi.azurewebsites.net> \--admin-secret <SECRET>
Exercise 3: Redeploy Next.js App
The last step of deploying to push our frontend Next.js app to Github, which will trigger a build. But before that, let’s add all those environmental variables we created locally to production:
az webapp config appsettings set \--resource-group herm \--name <FRONTEND APP NAME Eg. hermapp> \--settings \APP_BASE_URL="<PRODUCTION_FRONTEND_URL>"APP_BASE_API="<PRODUCTION_API_URL>"AUTH0_DOMAIN="<AUTH0_DOMAIN>"AUTH0_CLIENT_ID="<AUTH0_CLIENT_ID>"AUTH0_CLIENT_SECRET="<AUTH0_CLIENT_SECRET>"AUTH0_COOKIE_SECRET="<AUTH0_COOKIE_SECRET>"AUTH0_REDIRECT_URL="<PRODUCTION_FRONTEND_URL>/api/callback"
Now go ahead and push to Github then give the build a minute or 2 to complete.