Build and Deploy a Full-Stack Next.js Web App with AWS Amplify- AWS Online Tech Talks
Build and Deploy a Full-Stack Next.js Web App with AWS Amplify- AWS Online Tech Talks
Web developers are increasingly expected to deliver fast, performant, seamless, and unique experiences for users and turn to modern React frameworks like Next.js to get started. When powered by AWS Amplify Hosting, a fully managed CI/CD and hosting service, server-side rendered (SSR) web apps automatically scale, serve content with low latency from AWS’s content delivery network, and lower the cost of hosting and operating web application infrastructure. With Amplify Hosting, deploying a Next.js app requires zero-configuration and provides access to the breadth of 200+ AWS services, making it faster and easier than ever to create complete, feature-rich web experiences.
Learning Objectives:
* Objective 1: Why modern applications must meet a high bar for performance, security, reliability, and scale.
* Objective 2: The benefits of building SSR web apps with complete solutions like AWS Amplify.
* Objective 3: How to build and deploy a feature-rich, Next.js web app in under 30 minutes.
***To learn more about the services featured in this talk, please visit: https://aws.amazon.com/amplify/hosting/
****To download a copy of the slide deck from this webinar visit: https://pages.awscloud.com/Build-and-… Subscribe to AWS Online Tech Talks On AWS:
https://www.youtube.com/@AWSOnlineTec…
Follow Amazon Web Services:
Official Website: https://aws.amazon.com/what-is-aws
Twitch: https://twitch.tv/aws
Twitter: https://twitter.com/awsdevelopers
Facebook: https://facebook.com/amazonwebservices
Instagram: https://instagram.com/amazonwebservices
☁️ AWS Online Tech Talks cover a wide range of topics and expertise levels through technical deep dives, demos, customer examples, and live Q\u0026A with AWS experts. Builders can choose from bite-sized 15-minute sessions, insightful fireside chats, immersive virtual workshops, interactive office hours, or watch on-demand tech talks at your own pace. Join us to fuel your learning journey with AWS.
#AWS
Content
0.243 -> (bright music)
7.53 -> - Hey, everybody.
8.37 -> My name's Mike Jerome, I am
the senior product manager
11.67 -> for AWS Amplify Hosting.
15.48 -> Today I'm going to give you
a quick tour of AWS Amplify
20.55 -> and then we're gonna drop
into a technical demo
23.097 -> and I'm gonna show you how to
set up a Next.js application
27.78 -> with authentication, all
managed by AWS Amplify.
33.6 -> So to give you a little bit
more detail on that agenda:
37.11 -> I will cover what Amplify is,
39.54 -> if you're not familiar with it,
41.49 -> a little bit more of a dive
42.93 -> into the Amplify Hosting features,
45.78 -> we'll cover Next.js because
that's the application framework
48.87 -> that we're gonna be using today,
51 -> and then we'll drop into the demo.
53.34 -> And then finally some of
the guides, et cetera,
56.19 -> will be available as QR codes
57.87 -> so you can follow along
58.95 -> and try this demo out for yourself.
61.96 -> Okay.
64.131 -> So what is AWS Amplify?
66.93 -> So it's actually a suite of
services provided by AWS,
71.82 -> roughly in four groups.
73.59 -> So we have Amplify Studio.
76.14 -> Amplify Studio is actually
like a visual builder,
79.89 -> so you can create your user interface
83.04 -> and it'll automatically
create the backend for you.
86.16 -> So you could imagine
creating a form with fields,
89.34 -> you can do it in a visual way
91.23 -> and it will also deploy the database
93.27 -> to store that information
in the background.
97.29 -> We have Amplify CLI,
99.09 -> which stands for Command Line Interface.
101.64 -> And that is the mechanism
you use to configure
104.43 -> and maintain your app.
106.05 -> It allows you to set up
107.16 -> things like authentication, storage, APIs.
111.33 -> And we'll be using that today in the demo.
115.11 -> Next we have Amplify Libraries.
118.47 -> Libraries are things that
you can use to access
120.96 -> backend services and they
also include UI components.
125.31 -> And you'll see today with
authentication we're going to use
127.83 -> a UI component to pop up a login screen
130.947 -> and a create your account screen.
134.31 -> And then we have Amplify Hosting,
136.62 -> which is where we're going
to run our demo today.
139.68 -> So it's a continuous integration,
continuous deployment,
143.94 -> CI/CD, mechanism that allows
you to take a modern web app,
149.7 -> either a static or a server side rendered
151.83 -> if you are using Next.js
application and host that.
155.82 -> So we're gonna dive into a
little bit more about why
157.92 -> you would use Amplify Hosting
and some of its features.
162.24 -> So a great reason to use Amplify
Hosting is its performance.
166.44 -> It's reliable, secure,
cost effective, scalable,
171.21 -> and it has a low operational overhead.
173.94 -> So to dive into each one of those.
175.963 -> It's performant, 'cause
it is globally distributed
179.37 -> on AWS CloudFront CDN.
181.98 -> So when you're serving your app,
183.63 -> or wherever in the world
your users are for your app,
186.48 -> they will be close to an edge node
188.31 -> and they will see very fast,
low latency performance.
192.39 -> It's highly reliable,
194.13 -> it's a managed service where
we manage the uptime for you
198.57 -> and moving parts, so there's no upgrades.
202.11 -> It's secure.
203.37 -> So we're doing as much as
possible with pre-built static
206.85 -> apps so you don't have
to think about patching
210.06 -> your framework version or
worrying about SQL injections.
215.91 -> It's cost effective because
you pay for what you use.
219.27 -> So if your traffic scales to zero,
221.46 -> then so does your egress costs
223.44 -> and that makes it very,
very cost effective.
227.1 -> It's also scalable.
228.18 -> So if you do get a burst of traffic,
230.13 -> it's a serverless environment
231.87 -> and we can serve a very large
number of concurrent users.
236.46 -> And because it's a managed service
238.95 -> it also has a low operational overhead.
242.34 -> And to give you an idea
of what that means,
245.52 -> I will show you a diagram in a moment.
248.76 -> So the features, in particular.
250.32 -> So it's connected with git repositories,
253.14 -> so your application code
can live on GitLab, GitHub,
258.188 -> AWS CodeCommit, Bitbucket.
260.67 -> We can read your code and
then as you commit changes,
264.06 -> or you make pull requests,
265.71 -> we can act on those and build
the application for you.
269.16 -> When we see changes in the git repo
271.11 -> we then run a full CI/CD
pipeline with tests
274.68 -> so we can compile your app.
276.09 -> We can run tests against
it and we can make sure
278.73 -> that it's in the right
place before it's deployed.
282.03 -> We can do things like preview branches.
284.46 -> So if you have a development
branch, or a test branch,
288.39 -> you can run that in parallel
with your main branch
291.39 -> and check your changes before
you push to production.
294.66 -> As I said before, CDN is included.
297.45 -> So you have hundreds of points
of presence around the world
300.12 -> with Amazon's CloudFront.
303.39 -> We can also manage SSL and domain names,
306.09 -> and we'll have a look at
that in the dashboard later.
308.28 -> So you can add your own domain name
310.38 -> and we will take care
of setting up the DNS
312.66 -> for you with AWS Route 53.
315.66 -> And we will also provision
and manage SSL certificates
319.23 -> so the site is secure.
321.45 -> And because it's part of the
Amplify suite it integrates
325.68 -> well with the other Amplify services.
327.84 -> And, again, what we'll
look at today is an example
330.21 -> where the hosting is
integrating with authentication.
335.82 -> So this is the slide I alluded to earlier,
338.67 -> in terms of a managed service.
339.96 -> So if you were to build
Amplify hosting for yourself
344.01 -> this is roughly the components
that you would have to manage
346.86 -> under the hood, and we
take care of this for you
349.47 -> as a managed service.
351.21 -> From a developer workflow,
you commit your code
354.99 -> into a Git repository,
which can be CodeCommit,
358.08 -> we'll take care of the
continuous build, test
360.6 -> and delivery through
CodeBuild, deployment,
363.24 -> managing your assets, et cetera,
and then pushing those out.
366.3 -> So that's the bottom row.
367.8 -> And then in terms of your customers,
369.84 -> we'll take care of managing
your Amazon Route 53 entries,
373.83 -> your SSL certificates,
375.72 -> your CloudFront distributions
and configurations,
378.87 -> Amazon S3 buckets to hold your assets,
382.5 -> and any kind of gateway and
lambda runtime environments
386.28 -> for compute.
387.15 -> And we'll see all of
these components in use
389.55 -> as we go through the demo today.
393.96 -> A little bit about Next.js.
396.42 -> So Next.js describes itself
as the React framework.
401.19 -> It offers an on rails approach
to working with a React.
406.17 -> You get out of the box static
and server side rendering,
410.13 -> you get TypeScript support,
411.84 -> and a great developer experience.
414.03 -> It's a very, very popular framework,
415.95 -> there's over 90,000 stars on GitHub.
419.07 -> It's far more opinionated than React,
421.47 -> so it expects certain configurations
424.05 -> and setups and conventions,
425.61 -> which is great for bringing
developers up to speed.
428.73 -> And, again, the popularity
means there's a lot
430.41 -> of developer familiarity.
432.72 -> So teams will pick it knowing
that as new developers
435.24 -> join their team they'll
be used to the opinions
437.97 -> and conventions and be productive quickly.
442.77 -> Okay, and with that quick intro
445.59 -> I am going to switch over to the demo.
447.957 -> And so today we're going to
build and deploy an application
451.98 -> from scratch, it's a
Next.js web application
455.76 -> and it has authentication included,
458.25 -> and the authentication is
provided by AWS Amplify.
461.94 -> Now the demo I'm going to run
through is outlined in a blog
466.71 -> on our mobile site, this
is the the blog here,
469.92 -> and there'll be a QR code for the URL
472.74 -> at the end of the demo.
474.18 -> We're going to be moving
between a web browser,
476.7 -> a command line, and a code editor.
479.22 -> So this is a pretty technical demo.
481.29 -> So to kick things off what
I'm going to do is start
484.56 -> at the command line and I'm
going to use create next app.
490.167 -> And I'm going to create an app
491.79 -> that's called Amplify Next.js.
494.43 -> I'm going to work in JavaScript,
496.23 -> and I've disabled some
of the linting tools.
499.2 -> So I have created my app here
502.44 -> and I'm just going to
change into that directory.
510.9 -> Okay.
512.042 -> And then I'm going to
initialize this project
515.31 -> with Amplify in it.
522.291 -> So what this is doing, it's
taking my AWS credentials
525.737 -> and it is building me, on the
backend, the infrastructure
529.98 -> that I need to host and
run both the front end
534.24 -> and the backend authentication environment
536.58 -> for our demo app.
538.08 -> So what we will see as this runs through
540.45 -> is we'll see AWS resources,
things like roles, buckets,
545.76 -> user pools, et cetera, will be created.
550.38 -> It does take just a moment
while things are initialized.
557.1 -> And then once that's initialized
and we have our bare-bones
561.42 -> Amplify app we can start to
add backend services to it.
565.32 -> So for today's demo we are going to add
567.51 -> an authentication service.
572.58 -> So I run the command amplify add auth,
577.89 -> and I'm taking through a wizard to set up
580.41 -> how I would like authentication to work.
583.2 -> Today we're gonna go with
a default configuration.
586.47 -> We're going to log in using
a username and password.
591.18 -> And today we are not going to change
593.34 -> any of the advanced configuration.
597.33 -> So that has initialized
locally the definition
601.17 -> of an Amplify app and
added authentication.
605.27 -> So what I'm now gonna
do is I am going to push
608.13 -> that up to Amplify and that
will prepare those resources
611.49 -> for me in the background.
615.78 -> So that's pushing right now.
618.39 -> Under the hood that's running
some cloud formation templates
622.32 -> and preparing things for us,
and you can see those there.
624.87 -> Cloud formation, and the
app, and the resources
628.59 -> are being created in the background.
630.75 -> Okay, that's gonna take a few minutes.
633.39 -> While that progresses,
we're going to move over
636.39 -> to setting up our local
development environment.
639.78 -> So at the moment we have
a bare-bones Next app
645.42 -> that we created with create Next app.
647.94 -> I'm just going to change
into the directory.
651.9 -> And there's a few additional
things that we need to install.
654.78 -> So within our Next.js
app we need to install
659.1 -> the Amplify Library and
also some of the UI tools
662.82 -> that we talked about earlier.
663.87 -> So there's a couple of MPM
packages to install here.
668.1 -> Once our packages are installed locally
670.98 -> we can take a look at our
application in a code editor.
674.58 -> I'm gonna use Visual Studio here.
679.62 -> What we'll see, if you're
a Next.js developer,
682.53 -> is a relatively familiar layout.
685.68 -> So it's a Next.js app, it has
the concepts of pages, an API,
691.02 -> this has got an index
page and if we were to run
694.95 -> a local server we would
see welcome to Next.js.
699.57 -> So if I do NPM run dev.
709.62 -> I put a new tab in my browser.
712.68 -> We'll see "Welcome to Next.js!"
714.12 -> So the application is a
completely new Next.js application
718.53 -> and it's running on my local machine here.
721.68 -> Now this page is open to
everybody and we're gonna change
724.8 -> this page so that it sits
behind authentication.
728.43 -> So the first thing we are going
to do is alter our main app
734.52 -> js, which is shared by all of the pages,
737.67 -> and we're gonna add a few extra lines
739.95 -> into the top of the the page here.
742.44 -> So where we have our CSS we're
gonna add a few extra things.
746.63 -> So we've got the Amplify styles,
748.71 -> and we'll see that defines
what the login looks like.
751.71 -> We're going to be using
Amplify and some AWS exports
757.08 -> and we are enabling SSR mode here.
760.71 -> So that is created for the app.
763.35 -> And you can see now if I
go back to the local page
767.61 -> there isn't much difference
to be seen as the page
771.45 -> is reloaded, because we
haven't actually edited
773.76 -> the homepage or the landing
page, so it's still open.
777.57 -> So the landing page, with
all of this text on it,
781.05 -> we're going to completely replace it
782.817 -> and we're actually gonna
replace it with a page
784.59 -> that's much, much simpler
so that we can see
787.11 -> what's going on here.
789 -> So I'm going to delete
everything that is in this file
795.09 -> and replace it with just these 30 lines.
799.08 -> So you can see we are bringing in
801.42 -> the with authenticator components,
804.09 -> this is what provides the authentication.
807.24 -> Now on this page there's
two functions to look at.
811.197 -> The first function is called
get server side props.
814.89 -> Now this is code that
only runs server side,
818.49 -> so either on your local machine
820.08 -> or in the Amplify Hosting environment.
822.72 -> So the page is actually
rendered server side.
826.05 -> And what we're doing for
the purposes of the demo
828.66 -> is just showing the time and
date that the page was built.
833.64 -> And every time we refresh
that page we'll see
836.4 -> that time and date be updated.
839.64 -> And I'm also going to add in a log line
843.03 -> that just says I ran
and we'll be able to see
848.34 -> that in the server logs.
850.11 -> And you can see it's actually appeared
851.49 -> down in the corner here.
853.38 -> It ran already.
854.82 -> So if we go back to our
site now we can see again
860.34 -> we're still running locally,
862.62 -> but now the page is not being shown to us.
865.61 -> So what we would expect
to see is logged in as
870.06 -> and my username.
871.56 -> But because we wrapped the entire page
873.99 -> in the with authenticator components
877.74 -> we are not shown the content
879 -> and we're actually redirected to sign in.
882.027 -> And this styling and
this branding is provided
884.64 -> by the Amplify UI components.
889.62 -> Okay.
890.453 -> So what we need to do
now is create an account
893.46 -> so we can log in and see that page
895.65 -> and see the server side
rendering happening.
898.5 -> So if I choose to create
a new account now,
900.837 -> I'm gonna give myself the very
imaginative username of Mike,
904.29 -> set myself a password
909.15 -> and then enter my email address.
912.18 -> And what that's going to do
is send a confirmation code
915.6 -> over to my email client to
just prove that I have used
918.72 -> a valid email address.
920.7 -> That code's being delivered to me,
922.68 -> to the side of the screen here.
925.23 -> I have the code.
926.73 -> I'm gonna confirm my email address.
929.67 -> And now we can see that I am
logged in and I'm recording
934.44 -> this at five to four, or
seven minutes to four.
939.84 -> And every time I refresh the page
943.53 -> we'll see that time change.
945.39 -> 3:54:19.
948.041 -> 3:54:23.
949.89 -> And you can see each time
the I ran is appearing
953.28 -> in the console.
954.113 -> So this whole page is
being rendered server side
957.75 -> and I can log back out.
960.75 -> If I'm logged back out, I can
now longer no view the page.
964.14 -> I cannot see the, whatever
secret I was hiding
967.53 -> behind the login.
968.82 -> Now log back in again.
974.1 -> So the login is actually
happening on the Amplify side.
977.79 -> So a further Next application
is running locally
981.75 -> on my machine,
983.13 -> the authentication is
being provided by Amplify
986.67 -> within the cloud.
988.92 -> Okay.
989.753 -> So the next thing to do
now is to take this app
992.46 -> and move it up into a hosted environment
995.07 -> so it's running for the world to see,
997.35 -> rather than just on my laptop.
999.675 -> So to do that I'm gonna
commit my changes in Git,
1003.17 -> I'm gonna cancel my server
here, going to add my changes.
1016.942 -> They're now committed to Git,
1018.38 -> and this is a completely new Git repo.
1021.71 -> So I'm going to create a
new Git repo using GitHub.
1025.054 -> So I'm gonna go over here
and create a new repository.
1029.75 -> I'll be the owner of it and I
will call it Amplify-Next.js.
1037.73 -> Gonna set this as a
private to me repository.
1041.3 -> Create it.
1045.14 -> And when I do that
GitHub helpfully gives me
1047.66 -> the instructions to
associate this new repo
1051.56 -> with my local code and
push up my main branch.
1055.34 -> So I'm gonna copy those commands
and I'm going to paste them
1060.5 -> into the terminal.
1062.704 -> And now when I refresh
the screen on GitHub
1066.5 -> we can see my code has been
pushed up and the pages
1069.65 -> that we were just
working on are on GitHub.
1073.25 -> Okay.
1074.48 -> Now I'm gonna switch over
to the Amplify console
1077.33 -> so we can put this code
up onto Amplify Hosting.
1080.75 -> You'll see here I've got one application
1083.78 -> which is Amplify Next.js.
1085.82 -> This was created when
I did the Amplify in it
1089.42 -> in the command line.
1090.68 -> And if I dive into the details
of this app, you'll see
1093.41 -> right now it has a backend environment
1096.05 -> and it has authentication,
1097.61 -> which is where we did Amplify add auth
1100.61 -> and we configured that.
1102.23 -> We'll have a look at
that in just a moment.
1104.81 -> On the front end, or
the hosting environment,
1107.99 -> we haven't got anything set up yet.
1110.06 -> So we're gonna connect
this app to the code
1112.22 -> that we just pushed to GitHub.
1115.51 -> Select GitHub, and then I
choose a branch to commit.
1120.5 -> So Amplify is now checking
in with my GitHub account
1124.73 -> and scanning my repos.
1126.89 -> And here's the one that we just created,
1128.96 -> Amplify-Next.js.
1131.63 -> That's correctly identified
that I have a main branch,
1135.59 -> which is the branch that I want to use
1137.18 -> and I want to publish online.
1139.58 -> I click Next
1144.05 -> and then here I'm able to see
1146.96 -> that it's automatically
detected that I'm using Next.js
1150.14 -> with SSR and I am using
Amplify as my backend.
1154.58 -> We've already got the
app and the environment
1157.37 -> that we created with the
authentication is called Dev.
1161.48 -> I've already got a role
here to access the services.
1165.83 -> If you don't have one, you
can click create new role
1168.62 -> and it will take you through the process.
1170.96 -> It's a case of clicking next,
next, next to generate a role.
1174.92 -> These are my build settings,
which we'll cover in a moment,
1177.8 -> but for now I'm gonna click Next.
1181.31 -> This confirms everything,
1183.11 -> and I'm gonna deploy this application.
1187.19 -> Okay.
1188.023 -> So now what we're
looking at is an overview
1191.12 -> of the app that we've
created within Amplify.
1194.12 -> So we already saw the backend environment
1197.03 -> with authentication and now we
have the hosting environment
1200.84 -> and we have a main branch
1203.03 -> and you will see many
branches listed down here.
1205.31 -> If, for example, you had
a develop or a test branch
1208.19 -> you would connect those through
1210.08 -> and you could have multiple branches
1211.49 -> working off the same repo,
1213.17 -> which is a great way for staging
and testing and making sure
1218.12 -> you're happy before you
push things to production.
1220.94 -> And the process that
we're gonna go through now
1223.28 -> is we're going to
provision those resources.
1225.53 -> So that includes checking
that everything is right
1229.13 -> in terms of the backend and the
authentication's configured,
1232.28 -> it's also provisioning
the hosting resources,
1235.19 -> which includes things like
the CloudFront distribution,
1238.01 -> any lambdas that we might need to run
1240.08 -> server side code, et cetera,
1242.06 -> and then it will actually run a full build
1245.15 -> of the Next.js application and
deploy that out to the edge.
1249.47 -> And then eventually we will
end up with an application
1253.07 -> that is deployed.
1254.6 -> If I hit the URL that I've got here,
1258.71 -> we won't see the app yet because
it's in the building stage,
1261.71 -> but I'm gonna open that in a browser tab
1264.53 -> and we can see that the app will be here
1267.11 -> once the first deployment
has been completed.
1271.22 -> So while that's running
I'll give you a quick tour
1274.25 -> of the things that are available to you
1276.08 -> in the hosting dashboard.
1278.84 -> I'm going to start with
the backend environment.
1281.78 -> So you saw here that we had authentication
1285.92 -> and if I click on the link
1290.84 -> we can see the Amplify studio
1293.87 -> and you can see these are
some of the backend services.
1296.27 -> So you have authentication,
APIs, file storage,
1299.75 -> analytics and functions.
1302 -> And the authentication is
actually managed by Cognito.
1305.69 -> I can find out more about my configuration
1308.45 -> and I can actually jump over to Cognito
1312.77 -> and find out the specifics.
1314.9 -> If I was to check out my users here
1317.21 -> we'd expect to see one user,
1319.34 -> which was the ID that I created
when I was testing locally.
1323.57 -> And there is my user, Mike.
1325.76 -> So this is full Amazon
Cognito, but it's managed
1329 -> for you by the AWS
Amplify backend services.
1333.89 -> So that's a kind of a
quick tour of the auth
1336.44 -> and jumping straight into Cognito.
1339.478 -> What I'll also show is some
of the front end options.
1344.48 -> So within every app we
have the general settings
1347.21 -> where we can see a little
bit more about the app.
1349.64 -> We've got details that we might need,
1351.38 -> things like the service
role that's running the code
1354.23 -> for us, where we are.
1356.75 -> So this particular app is located
in US East 1 for this demo
1360.95 -> and I'm using a web compute platform
1363.77 -> which allows us to run compute for Next.js
1367.01 -> and server side rendering.
1369.32 -> You can find out information
or reconnect the Git repo
1372.92 -> that you were using.
1373.753 -> And we're gonna leave ours as is.
1376.07 -> And you can connect one or more branches.
1378.95 -> So we have the main branch connected here
1382.28 -> and you can see that
auto build is enabled.
1384.74 -> So what this means is every
time I commit to my main branch
1388.82 -> and push to GitHub that
branch will be rebuilt
1392.45 -> and we will go back
through that build process
1395.12 -> to deploy and provision out
the updates to the code.
1398.51 -> Again, typically you would
have more than one branch,
1400.61 -> like you'd have a develop branch.
1402.26 -> So you'd push your
changes there, test them,
1405.02 -> make sure you were happy with them,
1407.18 -> and then you would be able
to merge them into main
1410.03 -> and do the deploy in main.
1415.28 -> And we touched on domain management.
1417.71 -> So we've been given an Amplify
app.com domain for our app
1423.17 -> and you can also, we've got the app ID
1425.24 -> and also the fact that we're
running on the main branch.
1428.21 -> If you want to, you can add
your own custom domain name.
1431.63 -> Just click, add domain.
1433.22 -> If you've got domains that are
already set up in Route 53,
1436.73 -> and I've got three examples here,
1438.77 -> you can choose one of those.
1440.87 -> It'll automatically be
configured to have www
1444.38 -> or a sub-domain of your choice
rooted to your Amplify app
1448.04 -> and it will manage the process
of deploying the SSL cert
1452.3 -> et cetera for you.
1454.04 -> So that's a really nice option.
1455.69 -> That's all just taken care of.
1456.92 -> You end up with SSL and
a custom domain name
1459.47 -> and all the DNS managed.
1462.56 -> There's some real deep dive build settings
1465.35 -> we can go into around how
we deal with the backend
1468.23 -> and the front end.
1469.55 -> For this demo app, what we say
is every time we do a deploy,
1473.18 -> we make sure that any
configuration we've changed
1476.09 -> in the backend is up to date.
1478.04 -> And for the front end we run
any continuous integration
1482.215 -> tests that we've got configured,
1485.6 -> we run a build, and we also
make a cache of the node modules
1491.33 -> so we're not having to
download those every time
1494.12 -> on subsequent builds,
which makes things faster.
1497.39 -> And there's some more
advanced settings in here,
1499.22 -> we'll save for another day.
1501.68 -> Now something that's really
nice is as well as having
1505.82 -> multiple branches, you can
have preview environments
1511.16 -> and you can set up a pull request.
1513.68 -> So every time a pull request is created,
1516.47 -> Amplify will actually
spin up a new branch.
1518.48 -> It's a complete copy of the
app and it will allow you
1521.12 -> to test out the pull request
1522.98 -> before you merge it into
any particular branch.
1527.51 -> We have notifications,
so as builds pass or fail
1531.83 -> you can build notifications
so that you know the status
1535.55 -> of your app and the build environments.
1538.52 -> We have secure environment variables,
1540.59 -> so there's configuration
that can go in here
1542.9 -> but this is also a great
place to manage secrets,
1546.26 -> things like database credentials
1548.12 -> that you wouldn't want to
commit to your code base.
1552.98 -> We also have access control.
1554.45 -> So today we're showing a demo of an app
1558.62 -> that has authentication
and is managed by Cognito
1562.88 -> but what's also possible to
do is put a global username
1566.39 -> and password over the top of a branch.
1568.79 -> Typically you would do this
with a develop or test branch.
1572.17 -> So if we had a a second
or third branch here,
1575.21 -> we would be able to click on the branch,
1577.97 -> choose manage access
1579.41 -> and make sure that that
wasn't publicly accessible,
1581.84 -> which is a great thing to
do when you are working
1584.399 -> in a test environment.
1586.76 -> Of course we've got
monitoring available to us.
1590.48 -> So we have metrics in terms of the traffic
1593.57 -> that's coming into your site.
1595.1 -> You can set up alarms, for
example if you want to be alerted
1598.61 -> if there's a surge of traffic
coming to the website.
1601.61 -> We have access logs, which can
be downloaded and analyzed.
1605.21 -> And we also have the compute logs,
1607.04 -> which are very, very similar
to what you were seeing
1609.41 -> when we were running the server locally.
1611.96 -> They're stored on CloudWatch.
1614.93 -> So again you can then run
searches against those,
1618.08 -> you can do alerting, deep dive searching,
1622.01 -> et cetera, et cetera.
1623.87 -> We also have rewrites and and redirects.
1626.66 -> So for example, if you wanted
your naked domain to redirect
1630.2 -> to www, or you had changed a
path from slash documentation
1636.29 -> to slash docs, you can set
up the the rules in here
1639.95 -> so that we can manage those for you.
1641.93 -> And then it's also possible
to set up custom headings
1645.89 -> for your application.
1647.3 -> So that's a quick tour of the dashboard.
1650.54 -> I'm gonna go back now to
the main part of the app
1653.81 -> and we can see we are moving
along the process here.
1656.21 -> So we did the provision,
we've done the build,
1658.79 -> and we are now on the deploy stage.
1661.1 -> If I click in the build
1662.42 -> you can see it was successfully completed.
1664.7 -> We cloned the GitHub repo,
1667.67 -> we ensured the backend environment,
1670.52 -> which is the authentication
is fully up to date,
1674.81 -> and then on the front end
we used CodeBuild to set up
1679.85 -> and configure the Next.js application.
1683.3 -> And you can see within the the
front end build environments
1687.08 -> you've got all of the things
that you would expect to see
1689.54 -> from a Next.js application,
1691.46 -> including which pages
were rendered statically,
1694.55 -> which pages are gonna be
rendered on the server,
1697.67 -> and we talked about the page
that we are interested in,
1700.04 -> which is the route page here,
1701.177 -> and you can see it has that
little lambda icon next to it
1705.08 -> and confirms down here
1706.403 -> that that is a server side rendered page.
1710.3 -> And now we are going through
the deployment stage.
1714.5 -> So the deployment stage is
pushing the code out to the edge
1718.25 -> so the app is available globally
in hundreds of locations.
1722.18 -> And we should see in a
moment that tick screen.
1725.03 -> In fact I'm actually
gonna go back to our demo
1727.577 -> and just try reloading here.
1732.08 -> And within a moment or so
we will see this come up
1737.36 -> with our app as soon as we see...
1740.93 -> As soon as we see that go green.
1743.12 -> Okay, we're green now.
1750.38 -> Just the first load of the application.
1756.02 -> Okay, so there we are.
1757.07 -> So now instead of running the app locally,
1759.98 -> it's been fully deployed to Amplify.
1762.38 -> So we are seeing it on the internet
1763.97 -> at mainbranch.myappid.amplifyapp.com
1769.07 -> and I'm presented with the
same page that we saw locally
1771.98 -> where I had the option to sign in
1773.51 -> or create an account.
1775.1 -> Now because the backend is being served
1777.92 -> by Amplify in the cloud I can
actually use my same login
1782.24 -> that I was using in the
development environment
1784.58 -> because when we configured
this app we said
1786.68 -> we would like to use the
same development environment.
1789.41 -> So I can take that same user
of Mike and type in my password
1797.48 -> and we'll see I'm logged in
as Mike and this has been
1802.1 -> server side rendered now
at seven minutes past four.
1807.2 -> If I refresh the screen,
1809.12 -> see it moves to eight minutes past
1812.15 -> and I can log back out again.
1814.01 -> So now my site's been fully
deployed on a global CDN,
1818.257 -> all of the authentication is
taken care of for me by Amplify
1823.01 -> and we're all up and running.
1824.57 -> So if I now want to make
another commit to my branch,
1828.74 -> or create a new branch,
or set up a pull request,
1832.43 -> then they will automatically be deployed
1835.01 -> to AWS's global infrastructure.
1838.82 -> So that is the end of
our technical demo today.
1843.08 -> The QR code here will
deploy a Next.js 13 app
1847.28 -> with authentication to AWS Amplify.
1850.25 -> The URL in that QR code
will go through the demo
1854.54 -> that we've been today, so you
can try it out for yourself.
1857.93 -> And if you have any
questions, or want to connect
1861.26 -> with the team or other users,
1863.3 -> then we have a Discord server
and you can scan the QR code
1866.51 -> for that to connect, ask questions,
1869.72 -> and find out about events.
1872.75 -> So that wraps up today's technical demo.
1876.29 -> Thank you very much for watching.
Source: https://www.youtube.com/watch?v=SMrYo55_QhU