This course has been updated! We now recommend you take the AWS For Front-End Engineers, v2 course.
Transcript from the "Deploying to S3 through the CLI" Lesson
[00:00:00]
>> Steve Kinney: Interesting thing is the Amazon CLI is incredibly powerful. Anything you can do from the UI, you can do from the command line. So you can even do stuff like setting headers or an S3 bucket or any of those options. Those are all things that you can pass through.
[00:00:18] That said, if you thought about how overwhelming that drop-down was, then the amount of options available for the CLI is an art form to learn. Cool, and so you can do a lot of stuff, you can get the contents of your S3 bucket. And so if you type in AWS, the AWS is the command line tool.
[00:00:40] Then it's what service you want. So in this case I want S3. And then, okay, what do I wanna do with S3? Well I want to list the contents of a bucket, and then which bucket, right? So if you on the other hand wanted to configure CloudFront from the command line, it would be AWS CloudFront, so on and so forth, right?
[00:01:01] We're just gonna be working with S3 right now on the command line. Cuz we wanna basically build it so that we can have a command go ahead and deploy the app. But if we did AWS S3 ls and then the name of our bucket, you would see the contents.
[00:01:16] If I did it live right now, you'd just see that index.html that I uploaded earlier. This is one with the React app that we're about to deploy in it. So this is going to be the one that we use. So let's just talk about it real quick. All right, AWS, wusing AWS command line tool, cool.
[00:01:36] We wanna work with S3, and then we want to copy. And so we wanna copy directory from our local machine. So it's gonna be the dist directory. Now, for your app you might have a build directory, or whatever your application gets built into. This is gonna be like take the built assets and copy them to S3 bucket, right?
[00:01:59] I just registered superimportantwebsite.com, but this one is mysuperfunwebsite.com. And then the dash dash recursive, we'll ahead and get all the sub-directories as well. I don't really have any sub-directories, but this would go and get all of the contents of that folder. And it would go ahead and upload it to S3.
[00:02:20]
>> Steve Kinney: So let's go ahead and deploy our application for the first time.
>> Steve Kinney: So I have a version of the noted project that's in the setup instructions. There is both a base one that you can go ahead and clone. And then there's a live one that I'm gonna be pushing updates to as well.
[00:02:46] So we could, if we go ahead, open it up in Visual Studio.
>> Steve Kinney: And we look in our package.json. We have a start for starting the development server. We've got a build command that will go ahead and build the application, and we have the ability to test it.
[00:03:04] So first thing we wanna do is likely actually build the application, so yarn run build.
>> Steve Kinney: Fun, fun, fun.
>> Steve Kinney: All right, let me take a second and I'm gonna fix this issue. Cuz I copied a directory and hoped for the best. So we'll find out what it is in a second.
[00:03:37]
>> Speaker 2: Should we be using npm? [INAUDIBLE] it's through. Or this is a [INAUDIBLE]
>> Steve Kinney: Either one, not really doing anything special with them.
>> Speaker 2: Yeah I'm just saying that people that have npm it's a not given that they'll have yarn installed.
>> Steve Kinney: I can totally do that.
>> Speaker 2: He does.
[00:04:00] Okay in your instructions, you have to install Yarn.
>> Steve Kinney: I can use npm, that doesn't matter. I'm not using it-
>> Speaker 2: It's in your instructions [INAUDIBLE]
>> Steve Kinney: All right.
>> Steve Kinney: All right looks like the directory I copied right before we started doesn't work. So I'm just gonna use,
[00:04:32]
>> Steve Kinney: This one.
>> Steve Kinney: All right, ready?
>> Speaker 2: Are we gonna use Yarn to install or NPM?
>> Steve Kinney: You wanna do Yarn or NPM?
>> Speaker 2: Well you said-
>> Steve Kinney: All right.
>> Speaker 2: [INAUDIBLE]
>> Steve Kinney: All right yep.
>> Speaker 2: [INAUDIBLE]
>> Steve Kinney: Cool. All right so I'll go ahead, I'll do a yarn run build.
[00:05:03] And this will build the application. Again, this is a relatively small app. But it will go ahead and-
>> Speaker 2: Do Yarn install just for video sake or is that already set up?
>> Steve Kinney: Probably not.
>> Speaker 2: Let's start.
>> Steve Kinney: All right, ignore everything I just said. [LAUGH] All right, so I have this project.
[00:05:26] We'll just go ahead and make sure we have all the dependencies. And so I have them installed, but if you've just gone on to repo, it's gonna pull down React and React Router and everything along those lines. Once we have all of the dependencies, we're ready to build the app.
[00:05:40] I can do a yarn run build.
>> Steve Kinney: And it will go through and it will take all of my assets and build the final project. So now I have this dist directory that is brand new. This is the built version of the application, so I do ls dist.
[00:05:57] You can see there are my code split bundles. I've got two pictures of Prince, cuz honestly what application is complete without at least two pictures of Prince. And we've got the favicon, which is a little picture of Link, and then that index.html. So what we wanna do is now we could get in the process of taking all these files and dragging them into the UI.
[00:06:24] And that's three every single time. But what if we didn't, cuz that is, again, it's no way to live. So we'll say s3, aws s3, and we'll say copy. And we'll take that dist directory that we just generated and we'll do s3://superimportantwebsite.com. Now for you, it's gonna be the name of your bucket.
[00:06:56]
>> Steve Kinney: Go ahead, and you can see that I have uploaded all of those files. And they went from dist index.html to replacing the html in the bucket. And then adding these additional files.
>> Steve Kinney: So I refresh the page. My application from React from the command line is up and on the Internet.
[00:07:21] So I don't want to remember to type this ever again. So what I might consider doing is just grabbing it.
>> Steve Kinney: And going to package.json, and let's make one more,
>> Steve Kinney: We'll say deploy.
>> Steve Kinney: And that will build the app,
>> Steve Kinney: And then it will go ahead and deploy the app.
[00:07:49] So now, instead of ever remembering that, we just need to remember yarn run deploy, and our application will be deployed. We can get better at this eventually by going ahead and making sure that we don't have to do that by having our CI/CD process. But hey if this is a merge and master and all the tests pass, go, right?
[00:08:11] And there's different flows, we'll talk about that when we get to it. So just to test this out, do a yarn run deploy.
>> Steve Kinney: And I switched projects, so I gotta grab this line.
>> Steve Kinney: Cool.
>> Steve Kinney: So it'll build it and then immediately deploy it, right? So now we've got a shortcut for doing this.
[00:08:56] Now, I can go refresh it, but it's gonna be effectively the same site. But we did generate a new bundle. All right, cool