Our app is pretty simple by design and we are keeping it that way as long as is justifiable. Accordingly, our deployment pipeline is pretty simple.
To deploy the app, you need to update the running container on our Azure App Service instance. (We’re using Web App for Containers: check out the Docker Quickstart if you want to get familiar).
Before we can update our container on Azure, we first need to upload a container somewhere. By default, App Service looks for containers on Docker Hub, but in our case, our Docker image is stored in Azure Container Registry.
Before you can update the live app, you’ll need to be set up onCRA’s Azure portal and Azure Container Registry (ACR). Once you have accounts in Azure and access to ACR, you can deploy at will! (But probably you shouldn’t.)
You’ll need access to CDS’ Azure Container Registry (ACR) to upload any container you build locally. If you haven’t signed up yet, get in touch with Paul Craig.
You’ll need access to CRA’s Azure instance to update the container running at https://claim-tax-benefits.azurewebsites.net/.
If you don’t have access — again, ask Paul Craig.
These are the steps from the point that you have a local version of the app on your laptop that you want to deploy.
The steps are:
Our testBuildDeploy.yml file goes through the deployment steps, so you can reverse engineer our deployment from that file, but let’s go through each one in more detail.
When you have a working version of the code on your laptop that you would like to deploy, you have to package it up as a container.
Make sure you have the docker command line interface installed.
First, run docker build and pass in an optional GITHUB_SHA_ARG.
docker build -t base --build-arg GITHUB_SHA_ARG=<desired tag name> .
If a GITHUB_SHA_ARG is passed to the container when building, it will show up as a <meta> tag in the <head> of the HTML on every page. This makes it easy to verify the currently-running version of the app by inspecting the HTML.
I would highly recommend passing a variable in – it makes it dead easy to know when your new version is running in prod.
Once built, tag your container before uploading it. The Azure Container Registry repo we’re uploading to is claimtaxbenefits.azurecr.io/cra-claim-tax-benefits, so you have to start the tag with that string. Tag it whatever you want — preferably pick a unique tag, but it doesn’t really matter. Our automated deploys tag the containers with the current git SHA, but you’ll have to type it in a few times, so it’s better to pick something more memorable.
If you passed in a GITHUB_SHA_ARG, you should probably tag the container with the same string.
docker tag base claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<desired tag name>
While not strictly necessary, running your container locally before uploading is a good sense-check to make sure the container you just built works the way you expect.
To run locally, use the docker run command.
docker run -it -p 3005:3005 claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<desired tag name>
Kill it with ctrl+c like you would with npm.
You can also run it in the background like so:
docker run -p 3005:3005 claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<desired tag name>
Once you have built, tagged, (and hopefully booted up) your container, it’s time to upload it to Azure Container Registry (ACR).
docker push claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<desired tag name>
Our container repository is claimtaxbenefits.azurecr.io/cra-claim-tax-benefits, so that’s where you’ll find your newly-uploaded container.
You can update the app on Azure either from your terminal using the Azure CLI tool, or by logging into the online portal and updating it in the Azure GUI.
Again, the command to update our app is the last step in the testBuildDeploy.yml file, so if you are logged-in with Azure CLI, you should be able to update it with one line.
az webapp config container set --resource-group cdscracollab-innovation-rg --name claim-tax-benefits --docker-custom-image-name claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<desired tag name>
It’ll spend about a minute thinking about it and then return
- a big fat JSON response if everything worked out
- an error message if something is wrong
Usually takes about 2-4 minutes for the live app to switch over. If you built the container with a GITHUB_SHA_ARG, you can check the page <head> to see the currently running version. If you didn’t — well, you should have.
You can also update the app by using the user interface. For a one-off update, this is probably easier.
- Visit https://portal.azure.com/
- In the lefthand menu, click
App Services - Once you see the App Services table, click
claim-tax-benefits - Under the
Settingsheading, clickContainer settings - Locate the
Image and optional tag (eg 'image:tag'). You should see a text field with the currently-running image (eg,claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:{tag_name}) - Update the tag name to your newly-uploaded tag (eg,
claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<desired tag name>) - Press the
Savebutton - Wait for it to say
Settings updated successfully
Usually takes about 2-4 minutes for the live app to switch over. If you built the container with a GITHUB_SHA_ARG, you can check the page <head> to see the currently running version. If you didn’t — well, you should have.
In case you don't want to override the live version of the app, you can spin a new instance of App Service for testing purposes by using the following command:
az webapp create --resource-group cdscracollab-innovation-rg --plan alphaPlan --name claim-tax-benefits-{tag_name} --deployment-container-image-name claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:{tag_name}
You can then find the URL in the JSON response or in the Azure portal. URL should normally be https://claim-tax-benefits-{tag_name}.azurewebsites.net
When finished testing, you can delete the Azure App Service webapp using the following command:
az webapp delete --resource-group cdscracollab-innovation-rg --name claim-tax-benefits-{tag_name}
You did it! 🍕🍻🎉
Congratulations, you are now a unicorn! 🦄
Notre application est relativement simple et nous nous efforçons de la garder simple. Notre processus de déploiement l'est tout autant.
Pour déployer l'application, vous devez mettre à jour le conteneur dans Azure App Service. (Nous utilisons Web App for Containers : voir the Docker Quickstart si vous voulez vous familiariser avec cet outil).
Avant de pouvoir mettre à jour le conteneur dans Azure, nous devons envoyer notre image quelque part. Par défaut, App Service puise les images Docker Hub, mais dans notre cas, nos images sont entreposées dans Azure Container Registry.
Avant de pouvoir modifier l'application de production, vous devez avoir accès au Azure portal et à Azure Container Registry (ACR). Une fois que vous avez accès, vous pouvez déployer (mais vous ne devriez peut-être pas).
Si vous êtes incertain ou si vous êtes incapable d'y accéder, demandez à Paul Craig ou à Charles Morin.
Ces étapes assument que vous avez une version qui fonctionne sur votre machine, dans un état prêt à déployer.
Les étapes sont :
- construire l'image
- émettre un tag pour la nouvelle image
- téléverser l'image
- mettre à jour Azure App Service
Notre fichier testBuildDeploy.yml effectue un déploiement, donc vous pouvez faire de la rétro-ingénierie à partir de ce fichier. Allons davantage dans les détails.
Lorsque vous avez une version fonctionnelle du code sur votre machine, et que vous aimeriez la déployer, vous devez l'empaqueter comme une image Docker pour qu'elle puisse rouler dans un conteneur.
Assurez-vous d'avoir Docker docker command line interface installé sur votre machine.
Premièrement, exécutez docker build et passez un argument optionnel GITHUB_SHA_ARG.
docker build -t base --build-arg GITHUB_SHA_ARG=<nom tag désiré> .
Si un argument GITHUB_SHA_ARG est passé à Docker pendant la construction, cela permettra de mettre le numéro hashage de Git dans une balise <meta> dans le rendu HTML de chaque page. Ceci permet de faciliter le diagnostic en cas de problême.
Une fois construite, créez un tag avant de téléverser l'image. Le repository dans Azure Container Registry est claimtaxbenefits.azurecr.io/cra-claim-tax-benefits, donc vous devez ajouter cette chaine de caractères avant le nom du tag. Le nom du tag est à votre discrétion — préférablement un nom unique et représentatif. Nos déploiements automatisés font cette même recette. Par contre, lors d'un déploiement manuel, vous allez devoir réécrire ce tag quelques fois, alors il vaut mieux utiliser un nom facile à retenir.
Si vous avez passé un GITHUB_SHA_ARG, vous devriez probablement utiliser la même chose pour le nom du tag.
docker tag base claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<nom tag désiré>
Quoique non absolument nécessaire, rouler le conteneur sur votre machine va vous permettre de faire un test rapide et vous assurer que ce que vous avez construit représente vraiment ce que vous vous attendez à voir.
Pour rouler le conteneur localement, utilisez la commande docker run.
docker run -it -p 3005:3005 claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<nom tag désiré>
Terminez l'exécution en faisant ctrl+c comme dans npm.
Vous pouvez également le rouler en arrière-plan comme suit :
docker run -p 3005:3005 claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<nom tag désiré>
Une fois l'image construite et identifiée via un tag (et idéalement déployée sur votre machine), c'est le temps de la téléverser dans Azure Container Registry (ACR).
docker push claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<nom tag désiré>
Notre repository est claimtaxbenefits.azurecr.io/cra-claim-tax-benefits, donc c'est à cet endroit que vos nouvelles images seront déposées.
Vous pouvez mettre à jour l'application via Azure CLI, ou via l'interface Web du Azure Portal.
Encore une fois, cette commande fait partie de notre pipeline dans le fichier testBuildDeploy.yml, donc si vous êtes connecté via Azure CLI, vous devriez pouvoir mettre à jour l'application via une seule ligne de commande.
az webapp config container set --resource-group cdscracollab-innovation-rg --name claim-tax-benefits --docker-custom-image-name claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<nom tag désiré>
Cela prendra environ une minute, pour ensuite retourner
- une réponse JSON en cas de succès
- un message d'erreur en cas d'échec
Cela prend environ 2-4 minutes pour que l'application soit entièrement changée. Vous pouvez voir quel Git commit a été déployé dans la portion <head> du code HTML.
Les étapes sont :
- Visitez https://portal.azure.com/.
- Dans le menu de gauche, cliquez sur
App Services. Si vous ne le trouvez pas, vous pouvez également faire une recherche surclaim-tax-benefits. - Cliquez sur
claim-tax-benefitsdans le tableau. - Sous
Settings, cliquez surContainer settings. - Identifiez
Image and optional tag (eg 'image:tag'). Vous devriez voir un champ de saisie avec le nom de l'image actuellement déployée (ex :claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:{nom_du_tag_actuel}). - Mettez à jour le nom du tag avec le nouveau nom (ex :
claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:<nom_du_nouveau_tag>). - Cliquez sur le bouton
Save. - Attendez de voir le message
Settings updated successfully.
Cela prend environ 2-4 minutes pour que l'application soit entièrement changée. Vous pouvez voir quel Git commit a été déployé dans la portion <head> du code HTML.
Si par exemple vous aimeriez tester quelque chose sans nécessairement écraser la version de production, vous pouvez créer un nouveau App Service temporaire via la commande suivante :
az webapp create --resource-group cdscracollab-innovation-rg --plan alphaPlan --name claim-tax-benefits-{nom_du_tag} --deployment-container-image-name claimtaxbenefits.azurecr.io/cra-claim-tax-benefits:{nom_du_tag}
Vous allez donc recevoir l'URL de votre App Service dans la réponse JSON suivant l'exécution de la commande. L'URL devrait normalement être https://claim-tax-benefits-{nom_du_tag}.azurewebsites.net.
Lorsque vous avez terminé de tester, vous pouvez supprimer le Azure App Service webapp via la commande :
az webapp delete --resource-group cdscracollab-innovation-rg --name claim-tax-benefits-{nom_du_tag}
Vous avez réussi! 🍕🍻🎉 Félicitations, vous êtes maintenant une licorne! 🦄