Leon Welicki: Hello there and thank you very much for joining
us in this new Azure Portal How To video. Today, we learn
how to use deployment slots and testing productions
with App Service and for that we have Byron Tardif, who’s
going to show us all about that. So, thank you very much for
joining us, Byron.
Bryon Tardif: Thank you, Leon, for having me. And thank you,
everybody at home. Today, we’re going to go over features
that are a little bit more advanced. So, we usually do like a
level 100 video, but today’s a little bit more of a level 200.
But no worries, I’m going to guide you all the way through.
So, I have an app that I prepared for this demo. It’s the
how-to app. And what I’m going to do is I’m just going to
browse into it to show you what I have there. So, this is
actually a real app that we use for internal testing when
we’re validating usability accessibility of App Service. This is
the app that we give people to deploy. It’s a very simple
app, but it helps them to make sure that they’ve completed
the task.
And if we go over here, we see that there’s a feature called
deployment slots. The way to think of deployment slots is
it gives you the ability to have multiple versions of your app
and multiple versions of the code deployed on the same
infrastructure. This is very powerful because we in general,
we want you to deploy to a deployment slot. That way, your
production is never affected by deployment mechanics and
you can warm up and you can validate what’s going on with
your app on the staging slot. So, let’s go take a look at what
a deployment slot looks like.
When you look here, you’re going to see that you have exactly
the same features that you have for a regular web app. So,
a deployment slot and a web app are exactly the same.
And when we look over here, you’ll see that I have a slightly
different URL. So, in this case, my deployment slot is called
stage. And you can see that it gets added over here to the
URL.
If I go to production, you can see that I don’t have that stage
name added.
And right now, these two versions of the app are exactly the
same, so there’s nothing much to test.
So, let’s go and try to and make them a little bit different.
I’m going to use Deployment Center. And you’ll see that I
already have a CICD hooked up for this. So, I’m basically
deploying my code that’s there from GitHub. But one of the
cool things that I can do here is I can go to my logs of what
has been deployed and redeploy a specific version. So in
this case, I’m going to a specific version that I know is going
to be different, and I’m doing this just for the purpose of the
demo. So, we see that right now it’s doing the deployment.
And in a few seconds, I’ll have the new version of the app
running on the staging slot.
I will go over here. Hit refresh. And now, we see what happened
here is just basically the batch moved to the left. If I go to
production, I still have the same version of the app; it hasn’t
changed.
So, what you would do in this case is I would validate that
my staging code is up and running and doing what I want it
to do. And now, I can switch it over into production using
Swap. But let’s make this a little bit more different.
So, I’m going to go into configuration and I have already
prepared a couple app settings that my app knows about.
So, what this will do is it’ll take the values that I have
provided from my staging slot in configuration and apply
them to the app. So, as soon as I save, this takes a couple
of seconds, and what we’ll see is that now the staging
app’s starting to look a little bit more different.
If I reload, I get a little bit bigger text, and I get a different
color for the badge.
Leon: So, you can have one configuration for each slot in
this case.
Byron: Right. You can have differences in code as well as
differences in configuration. So, that’s the important thing to
distinguish. Now, the other really cool feature that you can
do because of deployment slots is you can configure testing
in production. So, what this does is it allows you to set a
specific slice of traffic to go to that particular staging slot.
So, let’s set this to 50% and let’s take that.
So, Leon, if I go to production, what color do you think we’re
going to get? We’re going to get - -
Leon: I’ll go with the green.
Byron: You’ll go with the green? Okay. So, what I’m going to
do here is I’m going to clear out some cookies and just make
sure that I’m starting from a clean slate. And I’m going to do
a hard reload. And there you go. So, if you were a betting
man, you would be winning right now. So, let me explain what’s
going on here. When the request comes in, you can see that
I’m still going to the production URL. There’s no staging that
segment.
The other thing that you will notice is that there’s a couple
cookies that get added. So, there’s this testing and production
mix. In this case, we set the threshold to be 50%. It came
in at right at 49. So, if this would’ve been higher than 49,
then you would’ve gotten the blue badge. So, let’s try that
one again. Let’s see if you were lucky two times in a row.
I just cleared out that cookie. And then I’m going to reload.
And this time, we get it again. Let’s try one more time to
see if three times a charm and I actually get to win one
back for the honor. There we go. Now, we have the blue one.
So, most people use this for scenarios where they want to
optimize and they want to test, for example, for an e-commerce
site. If making the bottom bigger is going to translate to
more sales, it’s also useful for people that want to validate
code with real production traffic. So, you could set this to
be 1%, for example, and start seeing real production traffic
hitting your staging code, making sure that everything’s fine.
And then you can start ramping it up as needed.
Leon: So, you could use it for A/B testing then?
Byron: For A/B testing, exactly.
The other thing that we have, which is a feature for more
advanced users is if I jump over here to the dashboard,
I have created this basically URLs that jump directly to a
specific slot, even though they’re still using the prod URL.
So, this is valuable for outside in when you’re doing validation
of your code, but you have something pinging your site for
health status and you want it to go to a consistent version of
your app.
So, what you can do is you can include the query string
parameter with the name of the slot that you want to target.
Production has this particular target. And you’re staging slot
goes to the name of your staging slot.
So when you’re monitoring outside/in, you can have a consistent
target that you’re going to hit and it’s not going to be affected
by your experiments.
Leon: And that dashboard that you are showing is a custom
dashboard that you created for you to make your life easier.
Byron: Exactly. This is the awesome markdown control that
the framework provides and I can put in whatever I want in
here. And this is really good when you’re doing ops because
you can have links to sites, tools, etc.
Leon: Got it.
Byron: And then the final act here is, let’s do the Swap. So,
actually, we have validated all of the things in stages that
we want to validate, so now we want the code that’s in stage
to be in production and do that without affecting anything in
production, so without causing slowness of the site, or 500
errors or anything like that. And we use Swap for that.
So, what Swap does is, it tells you I’m going to push whatever
is in stage into production without actually doing redeployment
of the bits. So, what we’re doing is we’re basically translating
the DNS and point interesting from one to the other. Any
active connections will continue to go to the version of the
code that they’re currently having a conversation with, but
then new connections start to go into the new code. If I had
conflicts in my configuration, I would be able to see them
here to validate and make sure that I’m doing the right thing.
And then finally when I click Swap, this is where the DNS
starts checking. New requests start coming into the new
code. Old requests start going up to the old code. If your
app wasn’t warm, we make sure that it’s warmed up
before it goes to prod. And if I go over here, I should be
starting to see this be the production version. So, it’s
now switched. It has the blue background because I don’t
have those app settings in production. And I’m ready to go.
Leon: Thank you very much, Byron. This is great.
And thanks every one of you for watching. Please try these
yourself at home, leave us a comment in the comments
section, follow us on Twitter, and look forward to seeing you
in the next video. Thanks for watching.