How to Deploy a Static Website to Azure Blob Storage with Azure Pipeline – part 3


bonjour hi welcome to another video of
cloud in five minutes I’m Frank Boucher and today I want to show you how
to build a release pipeline to deploy a static website inside the azure blob
storage so in the previous video I show you how
to create build pipelines so now our artifact are published and ready to be
used now what we want is to create a release pipeline and then that release
pipeline will be creating the azure resources and moving our files to our
blob storage the best way to create resources in a CI CD is to use arm
templates so let’s do this so I’m now back in Visual Studio code
and I will add a new JSON file to write my arm template so in the deployment
folder I will create a new file and we’ll name it
deploy the JSON because I’m using the extension of Visual Studio code it’s
very easy for me to create a new arm template so let’s first create an empty
skeleton and we’ll add a new resource so what I need is the azure storage so it’s
STG so we’ll do this and let’s rename it blog storage now there’s a little bug
right now in the snippet this comma here doesn’t need to be there in fact need to
be the line just above it so now it would be better to use parameter so
let’s add a parameter and I will use the type as a string and I will put the
default value as we am frank demo great so now instead of using parameter name
here I will be using this I will just put lowercase o blob blog storage is the
name of my variable and now here I need to use it so we’ll use the square
brackets and we’ll use parameter exactly and then blog storage now that we have
our arm template we also want that deployment accessible to our release
pipeline so we need to add one more step in the azure pipeline before publishing
the artifact what we want is to also copy
they’re content let’s scroll it up so what we want is also to have the arm
template accessible so we need to copy the file in the deployment folder to
subfolder deployment also and then we’ll copy that
so now let’s commit all of it it will trigger a new build and then we’ll be
starting working under release pipeline perfect so the build was successful so
now we’re ready to create a release so let’s go here new pipeline and now we’ll
start with an empty one and we’ll pick her artifact so click here it’s perfect
from the build and then I will pick my project latest version and it will just
name it drop there it is great now if I want it continuous integration and
deployment I need to enable it so click here that’s great so now I’m ready to
add the steps we need to click here one drop zero task will click on there and
to be able to release we’ll need three tasks so the first one will go here it
is to deploy the arm template so if we search for resource manager here we have
the azure resource group deployment that’s what we want so we add that one
and next if you notice when I was creating the arm template I didn’t have
any place to specify that I want the static website enable so to do that I
will need to use our execute as your CLI command so we’ll need a step for that so
if I search CLI I see this so we’ll add that and finally the last step of course
will be to copy the file into Azure so let’s do file and I have here the azure
file copy copy file to a blob or a VM that’s exactly so now we have the three
steps that we need to configure to be able to deploy in Azure let’s start by
the first one so the azure deployment so first obviously I will need to identify
my subscription so we’ll pick my subscription and it tries it I’ll just
so when it’s done I need to create or update a resource group I will just call
that one we am the location I will use East us and now the artifact if I have
to scroll down again so now the artifact is the linked artifact
because our artifact are published so I want to grab my arm template so we’ll go
here and now in drops sorry drop I’ll have another folder drop and then
deployment and I will have here my deployed adjacent file so pick this and
that’s why here I could be using a parameter file to have multiple
parameters or just have another an override of a parameter using a local
variable that will be very useful but since it’s a demo I will keep my default
value so that step is done I will keep everything else by default so now in
Android CLI again I need to specify my subscription and I won’t use a script
path because the comment is very short I will do an inline so old script in line
and the command is so easy storage blob because I’m talking to the blob storage
and then service property update because that specification of the static website
it’s in the service properties so I’m going there and then I obviously
identify my account name so when I’m Frank demo and then I specify that the
static website and the index document will be indexed great so that’s done the
only thing missing now is copying the file so copying the file I need to
identify my source so of course for us it’s in the draft folder and it will be
the output subfolder voila and as a destination I will need to identify
again my subscription so destination for us is a blob storage it’s not a VM so
let’s pick blob storage and now the storage account will use it that’s why
it’s convenient when you’re using variables because this way you don’t do
any typos so now I need to specify the container and Fermi right now
have no choice its dollar Web why dollar web because that’s the value used by
Azure to specify a static website so you use this and that’s it now all the file
content in the output folder will be copied to web now I just need to save it
and do a release so the website is generated that’s
perfect you know now how to create from A to Z Azure pipeline to generate a
static website using cake and deploying it in Azure storage if you have other
ideas leave it in the comment section or join me from the YouTube channel and
click on the tab community I’m waiting for your ideas thank you for watching
see you next time

Leave a Reply

Your email address will not be published. Required fields are marked *