AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) Setting Up a Travis Configuration File

Transcript from the "Setting Up a Travis Configuration File" Lesson

[00:00:00]
>> Steve Kinney: So what I'm going to do is,
>> Steve Kinney: I am going to go to the Travis CI page.
>> Steve Kinney: Yours might look a little emptier, I notice that apparently, yikes. I thought I signed up for a Travis CI account when I was preparing for this. But it looks like any repository that somebody else is user Travis CI that I have access to was already on that list.

[00:00:39] So you could see nothing, you might see lots of stuff. Both are totally fine, but I don't know what you'll see in this case, you register by logging in with your GitHub. So this tiny little plus sign right there, that is how we add a new repository. And in here, you can search through all of your various different repos, whether they be forked or otherwise.

[00:01:08]
>> Steve Kinney: If you just pushed it up recently and you don't see it there, right, you can hit sync account. Cuz it fetches your GitHub repos every so often, you're like, I have never pushed up and I doesn't have a repo, and then I do and it's not there.

[00:01:21] It's okay, just push it up and then hit sync account. Right, and then also, you have to clear and do the such again. You might even treat yourself to a page refresh, cuz distributed systems are hard. But here's the one that I have been working on, and so I will go ahead and I will just switch it on.

[00:01:44] Cool, and then from there, we can go into settings. Now, in the setup instructions, I put together a YAML file that's gonna be our build process. So let's look at it together, and then we will add it in. Here it is, and this is a YAML file that we'll give Travis in order to figure out all the things that it needs.

[00:02:07] So we'll say that this is a Node app, it'll use Node 8 to build it. That is, I think 10 is now LTS, but 8 is also an LTS version, which is long-term support. So it's usually good, but 8 is pretty stable at this point. We'll say cache the yarn dependency, so this way, it won't download all your dependencies on every build if they haven't changed.

[00:02:33] And the Node modules directory, again, ideally, we don't wanna have to wait to do a entire mpm install, a yarn install, every single time we deploy. If the tendencies haven't changed, cache those folders. Go ahead and run the test suite before you do anything. So if the test suite fails, then the build will fail, which is good, it's a little safety thing.

[00:02:55] At SendGrid, we actually even have our integration tests run. Where I'll go spin up the app, use a headless browser, hit at it a bunch of ways. So we'll know before we deploy bad code, most of the time. All right, so then before you deploy, we wanna add this mpm library, which its name should do an okay job explaining what it does, travis-ci-cloudfront-invalidation.

[00:03:20] Anyone wanna venture a wild guess what this tool does?
>> Steve Kinney: Not all at once, creates CloudFront invalidations from Travis CI. All right, so we're just adding that as a global command, and then we'll also build the app. All right, finally, what is deploying, we're gonna deploy to S3.

[00:03:44] These are environment variables that you're gonna need to set. All right, we'll set them together in a moment, well, I'll set mine, you will set yours. And then it takes effectively four environment variables, the AWS access key, the AWS secret access key, what the name of the bucket you want to deploy to is.

[00:04:06] And then finally, when we create the CloudFront invalidation, it will need what CloudFront distribution to create the invalidation on. So we will have to provide these to Travis CI, I'm not gonna hard code them in here. You can set environment variables, and it'll just read from those as well.

[00:04:23] Cool, the local-dir will be dist, which is the one we picked earlier. And also, I'm not really cleaning up the bucket cuz I don't need to remove old versions. I will wait until that becomes a cost that I need to deal with, before I start deleting files in my bucket, personally.

[00:04:40] And we will only deploy when the branch is master. Right, so we'll still run the tests and stuff no mater what, but we will deploy exclusively when this commit is on master. And then after deploy, we will use our new Travis CI CloudFront invalidation tool to give it the access ID, the secret key, the CloudFront ID.

[00:05:11] I told you, I just invalidate everything,
>> Steve Kinney: And then the branch and the port request. These are actually provided by Travis, we don't need to set them. But those are options that the tool actually takes as things it wants. Cool, so we'll take this, cuz I don't think anyone wants to watch me type this and the inevitable typos that will follow.

[00:05:35] I'm very good at typing unless people are watching me, and then I can't type. So we'll grab, this and what we'll do is go in here and,
>> Steve Kinney: I'm gonna create a new file, and this file is going to be called .travis.yml
>> Steve Kinney: And I get this cute little icon, cuz one time, Mike North made me install cute little icons into Visual Studio Code.

[00:06:07] So now I get a little Travis head sitting there, if you don't have that, that's totally fine, all right, so we've got that in place.
>> Steve Kinney: So the two things I'm changing, I have this deploy script in here, which doesn't really matter cuz we're not actually using it at this point.

[00:06:26] Travis knows how to deploy to S3, it actually already has the AWS tools installed as well, so that's pretty great. And then we have this Travis file right here.
>> Steve Kinney: And I'm gonna commit this to master, it's gonna fail the build, this isn't gonna work. It's not gonna work because we never set those environment variables.

[00:06:51] So it legit can't work just yet, so the build will fail, you will get emo about it. What we're gonna do right now is, we're going to set up those environment variables so it actually does in fact work. So I'm gonna show you where to set them up, and then we'll take a few minutes and we'll do it together.

[00:07:15] So here it goes, so you can see that I'm building, like I said, this isn't going to end well.
>> Steve Kinney: And click this, and go ahead and actually watch it happen if you like. I believe personally that watching a build makes it go faster, my co-workers explain to me that it's not actually the case.

[00:07:33] But you can watch everything happen, but again, I've told you already, this is gonna fail. So we go to more options, and go to settings, and here we have environment variables, seems like a good place. You have the key and then the value, there's also this switch right here.

[00:07:52] And the switch is whether or not you want to encrypt them. Here's my policy, right, cuz we're gonna break for a second as I put my keys in and you put your keys in, cuz I don't need to broadcast my keys to the world. Definitely encrypt your AWS access key, absolutely, no matter what, definitely, definitely, definitely encrypt the secret key.

[00:08:15] Right, and then we are going to, I don't encrypt the S3 bucket name or the CloudFront, why? Cuz I've messed them up and I need to see them in case I'm trying to troubleshoot.