Check out a free preview of the full AWS For Front-End Engineers, v2 course
The "Deploy App with the AWS CLI" Lesson is part of the full, AWS For Front-End Engineers, v2 course featured in this preview video. Here's what you'd learn in this lesson:
Steve uses the AWS CLI to deploy the static files from the local project to the S3 bucket. The AWS CLI takes in the local directory to be deployed along with the name of the destination bucket. Once the files are deployed, the files are immediately accessible through the bucket's URL.
Transcript from the "Deploy App with the AWS CLI" Lesson
[00:00:00]
>> One thing that we discovered as a group is that if you do have two profiles, you can do a dash dash profile equals whatever the other one is. In this case, I'm just going to use the default one. But if you do happen to have two running just make sure using that flag if you're using that on.
[00:00:15]
>> Does it actually have the equals in it?
>> It doesn't have equals, it's just dash dash profile sleep. I on the other hand just blew my old accounts away for the purposes of this so I won't need to cuz I live fast and dangerously. So, like I said, I, if you count on the repo we have a repo it's great, you can use it, that's wonderful.
[00:00:34]
If you have any other application that you would like to deploy, you can use that, this course is agnostic to what you wanna deploy, and more about how you actually go about deploying it. But I have effectively a create react app with just enough react router in it to cause some problems with not having static files for everything.
[00:00:57]
And other than that, some Lorem Ipsum, there's not a lot going on. So, we've got that in place. Now you have this aws command on your command line. It'll work with almost all the services, in this case, you want for s3. There's actually ls like there is in bash or what have you.
[00:01:18]
Which point I could say, okay, show me the contents of s3:// was superawesome.click. And you can see the one file from today is in there, that index.html that I had uploaded, right? Sleep, now, we could want to put some other stuff in there as well. There's a bunch of different commands that you can play around with, but we're gonna go with we're in an app, we're ready to rock and roll, and so we'll do an npm run build And that's again, this is just create reactive.
[00:02:04]
In my case, if there's another application you wanna build, your npm script might be slightly different. This is the one that builds this file and it will go ahead and spit it out. And it says look, the build folder is ready to be deployed. Well, that's incredibly convenient for I, I'm ready to deploy it.
[00:02:24]
And so from the command line, we can do aws s3 and we'll copy that build directory to s3://superawesome.click. In my case but whatever your bucket name is you do not have permission to deploy my bucket. Because my policy, you don't you get stuff on my bucket. Now put stuff in my bucket.
[00:02:53]
I'm gonna do -- recursive in this case. I don't think there are sub directories in a build file, but that will iterate down all of the different folders. I'm gonna just for the people in the room, move that up slightly. So that's what we have. And then I'm gonna hit the button.
[00:03:11]
And you can see that it is going through and uploading all of my various assets that are in that directory up to s3.
>> What node version are you on?
>> Probably, the current LTS, 16. That shouldn't matter, so don't think that it's changed effectively, yeah, I guess for building the application it might actually matter.
[00:03:37]
But for the actual aws cli, we've got that in place and now we can go back over to our bucket. Go to s3 bucket here as well back over objects, give that page a refresh, And you can see that I have all of the files that I uploaded.
[00:04:03]
In this case, you can also see that the index.html is from the same time as all the rest of the files, which means it overrode that when we generate when we upload it by hand and it is also twice the size. So now I should be able to go back down and revisit the site.
[00:04:21]
Here it is. It's got a bunch of different Lorem Ipsums, you can choose your favorite later as well as a very large picture of the Beatles that took a few seconds to load or a few milliseconds as well. Has some problems. You'll notice that very angry not secure up there.
[00:04:39]
It's not HTTPS. My URL leaves something to be desired, right? There's some piece of this, it's superawesome.click.s3-website-uses-one.Amazonaws.com. Also if I go to one of these there is client side writing notes zombie. If I actually hit that, that file doesn't exist, the client side routing took care of it with history API.
[00:05:09]
If I go to that file, it fundamentally breaks the web, right? And we talked a little bit before how s3 was a key value store. You'd be like, there's no such key called whatever that is /notes/zombie in this case. So we should fix that at some point because our URL should probably work.
[00:05:28]
At the very least that's not the greatest error but they should also just work in this case. So we should have some of that in place as well. So, there's a lot to be desired here, is also currently hosted out of uses one. So, if you are pulling this particular URL up from a place that is not close to Virginia, it will get progressively longer to load depending on how far away you are from that location.
[00:05:59]
So, we have the ability now to build an application, deploy it on Amazon but you rest of our focus now is one operationalizing. So we're not doing it by hand, two, fix a bunch of problems around the HTTPS, the routing, the URL itself, the location of those pieces as well.
[00:06:23]
That's the next piece of this is to get all those parts in place.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops