We've come a long way in setting up our AWS environment, but now it's time to start building and deploying applications. Instead of manually creating resources through the AWS console, we'll be using a concept called infrastructure as code.
As a web developer, you may not have had to think much about infrastructure. You've likely built applications or features and handed off your code to a service provider like Vercel for deployment. However, this tutorial aims to empower you to take ownership of infrastructure and build complex systems without much effort by understanding the underlying infrastructure requirements for your application.
We're lifting the veil on how these third-party services work under the hood, allowing you to build richer applications.
What is Infrastructure as Code?
Infrastructure as code is the practice of codifying your infrastructure requirements alongside your application code. Instead of manually creating resources like databases, queues, buckets, and CDNs, you explicitly declare them in your codebase.
To implement infrastructure as code, we need frameworks like Terraform, Pulumi, AWS CDK, AWS SAM, and CloudFormation. In this tutorial, we'll be using SST (Serverless Stack Toolkit), a newer framework that works well with modern web frameworks like Next.js, Astro, SolidStart, and SvelteKit.
Transcript
Loading...
We've come so far. We've got our CLI configured to connect to our AWS accounts. We set up our AWS organization and identity center for access. Now it's time to start showing you how you'll actually work on a day-to-day basis building applications and deploying them into your AWS account. One approach would be to just click around on the console and create resources as needed.
You could create a database instance in the console. You could create a Lambda function and upload your code as a zip file. But that's extremely inefficient. That's not how we want to operate. We want to operate in our code editor, just like we would building our web application.
But now we're going to turn to a concept called infrastructure as code. So you maybe at this point in your web developer journey, you haven't had to think about infrastructure too much. Maybe you've just built applications or built features even on a team, and you've handed off your code to somebody else or to some service provider like Purcell, and they deploy the infrastructure. But the whole point of this tutorial and ultimately the workshops that we'll release here at ProAWS.dev. It's all about empowering you to take ownership of infrastructure and to build wildly complex systems without a whole lot of effort because you're going to understand the underlying infrastructure requirements for your application.
So we're lifting the veil. You know, these third parties like Vercel, they've sort of created this abstraction where you don't know much about what's going on under the hood. And we're gonna peek under the hood and we're gonna start building richer applications because of it. So we know what infrastructure is. It's the resources we need in production for our app to function.
Databases, queues, buckets, CDNs. So infrastructure as code is simply taking those infrastructure requirements and codifying them in our code base. So explicitly declaring the infrastructure we need alongside our application code. To do that, we need frameworks. And these frameworks, there's a dozen of them that are extremely popular.
Infrastructure as code frameworks. You've got the likes of Terraform, Pulumi, you've got the CDK, which is an AWS specific infrastructure as code framework. You've got SAM, CloudFront or Cloud Formation. The list just really goes on, we're going to look at SST, which is kind of a newer up and coming framework that's extremely friendly with modern web frameworks. So It's really great for deploying the latest web technologies like Next.js, Astro, Solid Starts, Felt Kit, all of these wonderful web frameworks.
It's really good at working with those to deploy them optimally into your AWS account. So the latest version of SST is just hot off the press. It's called Ion. And we're going to take a look at that and what it might look like day to day as you're building applications with infrastructure in mind. So we're not going to, the point of this is not to build an example app.
The point is just to get familiar with the concept of infrastructure as code. So this is the ion.sst.dev site. In the docs, we've got a get started with Next, Remix, Astro, or just a standalone API. We're going to start with Next.js, and we're just going to go through this guide and just kind of get an idea of what this would look like. So before you get started you need to configure your AWS credentials and install the SST CLI.
We've already configured our credentials, that's what we've been doing to this point in the tutorial. Installing the SST CLI is really just a simple curl into a bash. I know this is some people don't like to do this. It does look like it's the only way to install the SST CLI at this point. It's a Go console application or Go application.
So yeah, this is, you're going to have to do this. And I've already done it. So we can just see that SST is installed. So go ahead and install the SST CLI. And then we're going to move on to step one.
And step one, we're just going to create a Next.js app. This course this tutorial isn't trying to teach web development. We're really trying to teach going beyond the basics with web development on AWS. I'm going to go ahead and use create next app and install this just blank. Next app there it is with the my app again, I'm gonna call it next JS app.
Like to use TypeScript? Yes. Yes, let no kill ensure. I'm just going with the defaults here. We'll use the app router.
No. Okay, so it's gonna install dependencies. And we should now have a directory called next JS app okay, so let's let's do this let's I'm already in t-mix Let's open up our editor here and then we've got a terminal here. The next step we're going to do sstinit. So you've installed the sst CLI.
Now we're going to do sstinit. Looks like it detected Next.js. We're going to continue. It's going to create a couple of files, the sst.config.ts and install some dependencies. So let's look at that sst.config.
And this is really the point of this lesson here. We're just trying to kind of go over the concept of infrastructure as code, what it provides to us and why it's useful. So maybe you're used to just deploying your Next.js app to Vercel, and you don't have to think about these things so much. You just click a button on Vercel and you're off to the races or you use the Vercel CLI. But what if you didn't have Vercel?
What if Vercel didn't exist? Let's say Vercel runs out of money, and they don't exist, but you still got your Next.js app. Well, if you need to deploy it on your own, this is where infrastructure as code comes into play. I'm really hammering that home, but that's kind of the point. I don't want you to get lost in this example, this particular project, deploying it this particular way with this particular framework.
It's really more just the idea of infrastructure as this part of your app that maybe you've not been paying attention to. So we've got some config here, we're not going to go over all this right now, again, not that important. But this line right here, we've got new SST dot AWS dot next JS, and it's titled my web. Can't get past all the my things. This is like one line of code that is ultimately creating a whole lot of infrastructure.
So the Next.js component, That's what this is, an SST parlance. This Next.js component is standing up a CDN, it's uploading your code to S3, it's setting up SSR with Lambda functions. So there's a whole bunch of resources that are created all within the free tier that are going to deploy your application into your own AWS account that we just set up. So it's that simple. That single line is accomplishing a whole lot.
Let's go down and it says to go ahead and just do npm run devs. So let's do that. Oh, it does look like we got to get our credentials set up. So we're going to go in here, and we're going to make a change. Let's, I think we need to configure providers, AWS, and then let's do profile.
And in this case, we're gonna conditionally set the profile based on whether we're in production or not. If it's production, it'll be the prod profile. Remember, we just set these up earlier. Otherwise, the dev profile. Okay, and then also, I'm gonna go into package.json.
I kind of told you this is how I like to do it earlier. We're gonna create an SSO command, and it's just going to be AWS SSO login, and we'll do profile dev. So now we can just run this at any time, I'm going to do it right now actually, pmp m SSO, I guess npm run sso. It's going to open up a terminal prompt. We got to log in as we did earlier to give this shell access into our AWS account.
And Now we're going to try npm run dev. So now it should use the correct profile. It's created a new stage called atom. That's just the name of the user on my machine. And it's going to deploy the Next.js app.
It's already creating a bunch of infrastructure to support that Next.js app. And this tutorial is gonna go through and show you a bunch of other concepts, and other, just more types of resources that you might codify in your infrastructure as code. So here they create another bucket, a public bucket, and they're gonna link it to your Next.js site so that your Next.js site, the function handler, has access to it. And then they're gonna actually create an upload form, and they're gonna show you how you could upload files directly into that bucket. They're styling it, generating a pre-signed URL.
The important thing to take away from this lesson is that all of those things that support your app, that infrastructure, can be codified, and there's lots of modern tools that allow you to do that. It says that our app should be running now. So let's just do this. This is the local dev server. And then we're going to just try deploying this into our AWS account.
So it does look like it's running locally. Let's do this. Let's kill that session. And now I'm gonna go up here and create a command. So another thing I like to do, deploy, yeah, sst deploy.
So we're gonna do npm run deploy. And it'll just default to the current stage. It's going to deploy a new Atom stage. You can imagine if you had multiple developers on your team, each of them would have their own stage. But we're all sharing that dev account.
It's shared access to that account. All right, so that's finished up. It took a few minutes. Mostly it takes a while for the CloudFront distribution to be set up. It's kind of amazing when you think about it, what just happened with that simple command we just ran and a couple of lines of code.
We just deployed our code all over the world in edge locations all over the globe. And it's all going to be fine within the free tier. It's pretty amazing. But it gives us a URL here that we can open up in our browser. And there it is.
Our Next.js app is deployed in our own AWS account. Just like we would deploy to Vercel, but with a lot more flexibility. Now we can continue to expand our app's capabilities by adding databases and queues and cron jobs and anything you can imagine that you could deploy on AWS.
We've come so far. We've got our CLI configured to connect to our AWS accounts. We set up our AWS organization and identity center for access. Now it's time to start showing you how you'll actually work on a day-to-day basis building applications and deploying them into your AWS account. One approach would be to just click around on the console and create resources as needed.
You could create a database instance in the console. You could create a Lambda function and upload your code as a zip file. But that's extremely inefficient. That's not how we want to operate. We want to operate in our code editor, just like we would building our web application.
But now we're going to turn to a concept called infrastructure as code. So you maybe at this point in your web developer journey, you haven't had to think about infrastructure too much. Maybe you've just built applications or built features even on a team, and you've handed off your code to somebody else or to some service provider like Purcell, and they deploy the infrastructure. But the whole point of this tutorial and ultimately the workshops that we'll release here at ProAWS.dev. It's all about empowering you to take ownership of infrastructure and to build wildly complex systems without a whole lot of effort because you're going to understand the underlying infrastructure requirements for your application.
So we're lifting the veil. You know, these third parties like Vercel, they've sort of created this abstraction where you don't know much about what's going on under the hood. And we're gonna peek under the hood and we're gonna start building richer applications because of it. So we know what infrastructure is. It's the resources we need in production for our app to function.
Databases, queues, buckets, CDNs. So infrastructure as code is simply taking those infrastructure requirements and codifying them in our code base. So explicitly declaring the infrastructure we need alongside our application code. To do that, we need frameworks. And these frameworks, there's a dozen of them that are extremely popular.
Infrastructure as code frameworks. You've got the likes of Terraform, Pulumi, you've got the CDK, which is an AWS specific infrastructure as code framework. You've got SAM, CloudFront or Cloud Formation. The list just really goes on, we're going to look at SST, which is kind of a newer up and coming framework that's extremely friendly with modern web frameworks. So It's really great for deploying the latest web technologies like Next.js, Astro, Solid Starts, Felt Kit, all of these wonderful web frameworks.
It's really good at working with those to deploy them optimally into your AWS account. So the latest version of SST is just hot off the press. It's called Ion. And we're going to take a look at that and what it might look like day to day as you're building applications with infrastructure in mind. So we're not going to, the point of this is not to build an example app.
The point is just to get familiar with the concept of infrastructure as code. So this is the ion.sst.dev site. In the docs, we've got a get started with Next, Remix, Astro, or just a standalone API. We're going to start with Next.js, and we're just going to go through this guide and just kind of get an idea of what this would look like. So before you get started you need to configure your AWS credentials and install the SST CLI.
We've already configured our credentials, that's what we've been doing to this point in the tutorial. Installing the SST CLI is really just a simple curl into a bash. I know this is some people don't like to do this. It does look like it's the only way to install the SST CLI at this point. It's a Go console application or Go application.
So yeah, this is, you're going to have to do this. And I've already done it. So we can just see that SST is installed. So go ahead and install the SST CLI. And then we're going to move on to step one.
And step one, we're just going to create a Next.js app. This course this tutorial isn't trying to teach web development. We're really trying to teach going beyond the basics with web development on AWS. I'm going to go ahead and use create next app and install this just blank. Next app there it is with the my app again, I'm gonna call it next JS app.
Like to use TypeScript? Yes. Yes, let no kill ensure. I'm just going with the defaults here. We'll use the app router.
No. Okay, so it's gonna install dependencies. And we should now have a directory called next JS app okay, so let's let's do this let's I'm already in t-mix Let's open up our editor here and then we've got a terminal here. The next step we're going to do sstinit. So you've installed the sst CLI.
Now we're going to do sstinit. Looks like it detected Next.js. We're going to continue. It's going to create a couple of files, the sst.config.ts and install some dependencies. So let's look at that sst.config.
And this is really the point of this lesson here. We're just trying to kind of go over the concept of infrastructure as code, what it provides to us and why it's useful. So maybe you're used to just deploying your Next.js app to Vercel, and you don't have to think about these things so much. You just click a button on Vercel and you're off to the races or you use the Vercel CLI. But what if you didn't have Vercel?
What if Vercel didn't exist? Let's say Vercel runs out of money, and they don't exist, but you still got your Next.js app. Well, if you need to deploy it on your own, this is where infrastructure as code comes into play. I'm really hammering that home, but that's kind of the point. I don't want you to get lost in this example, this particular project, deploying it this particular way with this particular framework.
It's really more just the idea of infrastructure as this part of your app that maybe you've not been paying attention to. So we've got some config here, we're not going to go over all this right now, again, not that important. But this line right here, we've got new SST dot AWS dot next JS, and it's titled my web. Can't get past all the my things. This is like one line of code that is ultimately creating a whole lot of infrastructure.
So the Next.js component, That's what this is, an SST parlance. This Next.js component is standing up a CDN, it's uploading your code to S3, it's setting up SSR with Lambda functions. So there's a whole bunch of resources that are created all within the free tier that are going to deploy your application into your own AWS account that we just set up. So it's that simple. That single line is accomplishing a whole lot.
Let's go down and it says to go ahead and just do npm run devs. So let's do that. Oh, it does look like we got to get our credentials set up. So we're going to go in here, and we're going to make a change. Let's, I think we need to configure providers, AWS, and then let's do profile.
And in this case, we're gonna conditionally set the profile based on whether we're in production or not. If it's production, it'll be the prod profile. Remember, we just set these up earlier. Otherwise, the dev profile. Okay, and then also, I'm gonna go into package.json.
I kind of told you this is how I like to do it earlier. We're gonna create an SSO command, and it's just going to be AWS SSO login, and we'll do profile dev. So now we can just run this at any time, I'm going to do it right now actually, pmp m SSO, I guess npm run sso. It's going to open up a terminal prompt. We got to log in as we did earlier to give this shell access into our AWS account.
And Now we're going to try npm run dev. So now it should use the correct profile. It's created a new stage called atom. That's just the name of the user on my machine. And it's going to deploy the Next.js app.
It's already creating a bunch of infrastructure to support that Next.js app. And this tutorial is gonna go through and show you a bunch of other concepts, and other, just more types of resources that you might codify in your infrastructure as code. So here they create another bucket, a public bucket, and they're gonna link it to your Next.js site so that your Next.js site, the function handler, has access to it. And then they're gonna actually create an upload form, and they're gonna show you how you could upload files directly into that bucket. They're styling it, generating a pre-signed URL.
The important thing to take away from this lesson is that all of those things that support your app, that infrastructure, can be codified, and there's lots of modern tools that allow you to do that. It says that our app should be running now. So let's just do this. This is the local dev server. And then we're going to just try deploying this into our AWS account.
So it does look like it's running locally. Let's do this. Let's kill that session. And now I'm gonna go up here and create a command. So another thing I like to do, deploy, yeah, sst deploy.
So we're gonna do npm run deploy. And it'll just default to the current stage. It's going to deploy a new Atom stage. You can imagine if you had multiple developers on your team, each of them would have their own stage. But we're all sharing that dev account.
It's shared access to that account. All right, so that's finished up. It took a few minutes. Mostly it takes a while for the CloudFront distribution to be set up. It's kind of amazing when you think about it, what just happened with that simple command we just ran and a couple of lines of code.
We just deployed our code all over the world in edge locations all over the globe. And it's all going to be fine within the free tier. It's pretty amazing. But it gives us a URL here that we can open up in our browser. And there it is.
Our Next.js app is deployed in our own AWS account. Just like we would deploy to Vercel, but with a lot more flexibility. Now we can continue to expand our app's capabilities by adding databases and queues and cron jobs and anything you can imagine that you could deploy on AWS.
Level up with Basic Elements of AWS
I respect your privacy. Unsubscribe at any time.
This is a free tutorial
In exchange for your email address, you'll get full access to this and other free ProAWS tutorials.
Why? First and foremost, your inbox allows us to directly communicate about the latest ProAWS material. This includes free tutorials, AWS Tips, and periodic update about trends, tools, and AWS happenings that I'm excited about.
In addition to the piles of free AWS content, you'll get the earliest access and best discounts to the paid courses when they launch.
There won't be any spam, and every email you get will have an unsubscribe link.
Adam Elmore
Level up with Basic Elements of AWS