Check out a free preview of the full Full Stack for Front-End Engineers, v2 course:
The "Adding HTTPS to NGINX" Lesson is part of the full, Full Stack for Front-End Engineers, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Jem demonstrates how to enable https on a server using Certbot.

Get Unlimited Access Now

Transcript from the "Adding HTTPS to NGINX" Lesson

[00:00:00]
>> Jem Young: We are going to add HTTPS to our website. And not that long ago, say two, three years ago, maybe four, maybe five, no, two, three years ago, it was hard to add HTTP encryption to your website. Because you had to have the key, you had to have the right cipher, you had to have the right algorithm, you had to have random number generation, you have to serve out the certificate and all that.

[00:00:22] Fortunately, the Internet's built on trust and there are good people out there. Just like there are bad people out there right now trying to break into your server, there are people trying to help you out. And we're gonna use Certbot today. And I didn't put any instructions in there because Certbot has perfect instructions on exactly how to do it.

[00:00:37] So let's walk through step by step, and it makes it really easy to add HTTPS to your website. It'll even modify Nginx for you. And I'll warn you now that it's gonna automatically touch your Nginx configuration, and it's gonna get a little messy looking, but don't worry, it's okay.

[00:00:52] But just so you know, it'll come out a little different at the end. So to go to Certbot go to certbot.eff. EFF is the Electronic Frontier Foundation. They're the ones that fight for encryption on the web, privacy. They're the good people that really are trying to do well against the corporations and things like that that are just trying to steal your data as much as possible.

[00:01:15] They file lawsuits. So I don't wanna get political, but we're software engineers, and this is what we do. They're a good organization. So one of the things they did was they created Certbot, which is a wrapper around Let's Encrypt. And Let's Encrypt is a free certificate authority. So it used to cost money.

[00:01:34] If I say, I want HTTPS, something like GoDaddy would be like, okay, that'll be $50 a year because they have to verify who you were. Honestly, it was kind of like the old days when cell phone companies used to charge you for text messages. Even though text messages use very little data, they used to charge you per text message.

[00:01:51] I'm just dating myself. No one really knows what I'm talking about. Back in the day, [LAUGH] cell phone companies used to charge you per text message. They don't do that anymore. But with Certbot and Let's Encrypt, it's a free certificate authority. So it's free. And it's just for the sake of doing the right thing for the Internet because HTTPS should be everywhere.

[00:02:09] So let's go ahead and set up Certbot. I'm going to say my site is running Nginx. And we're running Ubuntu. Again, this is why we're on the LTS version because if we're on Ubuntu 19, they don't support that yet because that's gonna be out of date with Ubuntu 20, 21, things like that.

[00:02:28] And let's just follow these instructions. So the first thing you want to do is sudo-apt get update. That get is just a bit deprecated. You can use apt-get if you want. It's the same in this instance as apt. So sudo-apt-update and I'm just gonna copy and paste these.

[00:02:47]
>> Jem Young: So we're on our server, CD- sudo apt-get updates, password.
>> Speaker 2: Does it matter what directory you're in?
>> Jem Young: No, but generally I would go to my home directory just in case there's temporary files added, I can clear those out. Versus being in, say, /var wwwapt, you don't want some random files in there just in case.

[00:03:09] And then I'm gonna solve the software-properties-common which is just a set of common libraries that they need to build more software down the road. And it's actually already installed by default. But just in case in future versions of Ubuntu it's a good step to follow.
>> Jem Young: Then I'm gonna add a repository, which is just gonna tell the apts where to get.

[00:03:32] And so when you when you sell the software next time, it's gonna point to a different version, rather than something that doesn't exist in the apt root repository.
>> Jem Young: And next step, I'm gonna add another repository for Certbot.
>> Jem Young: And let me know if I'm going too fast or anything.

[00:03:49] I can slow it down.
>> Jem Young: All right, and let's just run update, so it'll pull the latest repos from the places we just added.
>> Jem Young: And we should be good now.
>> Jem Young: Right, now let's install Certbot and Certbot Nginx.
>> Jem Young: Okay, depending on how fast your Internet is, you should be about this step.

[00:04:20] And now let's go ahead and run Certbot and we use --nginx, so it'll configure our Nginx for us. We could do it manually, but trust me, when you see it, it's not fun. Let's just use the software for us. And I'll enter in my email so I'll say jem@netflix.com.

[00:04:40]
>> Jem Young: And I agree. Would I be willing to share my email? Yeah, sure, why not? I do like the EFF.
>> Jem Young: No names were found in your configuration. That's right, I totally forgot we totally skipped a step. We never added the server name into our Nginx configuration. So let's just kill this for now cuz I want to make sure this is done right.

[00:05:07]
>> Jem Young: And we're going to modify our Nginx configurations and add our server name in there. We never did it cuz we only had one server running. So by default, it always goes to the same place. But if we're gonna run the Certbot, we need to have the actual server name.

[00:05:18] So you know when you land on Jem is.the best or Jem is the best, it's the actual domain name. So we'll say sudo vi /etc/nginx/sites-available and the defaults. And we're gonna add the server name in here. So add in your own server name, obviously, so I'm gonna say jemisthe.best and www.jemisthebest.

[00:05:51]
>> Speaker 2: So nginx/ that's available, slash, what's the last one?
>> Jem Young: sites-available/default.
>> Speaker 2: Default, thank you.
>> Jem Young: Sorry, it's like habit now that I just go to the same place every time, but thank you.
>> Speaker 2: What was that?
>> Speaker 2: /.
>> Jem Young: Yeah, sudo vi /etc/nginx/sites-available/default, yes?
>> Speaker 2: Can we do this with a domain, I mean, without the domain name if we want to HTTPS or the IP?

[00:06:25]
>> Jem Young: No, that's a good question. Because HTTPS it's about validating who you are, an IP address is not good enough to represent who you are as a person. Because the IP address has changed, versus the domain name which they don't change ownership. But let's say I want to port this server to AWS or something like that, my IP address is gonna change, but my domain name will be the same.

[00:06:47] And my certificates will still be the same, roughly, as long as I renew them properly. But yes, unfortunately, you need a domain name for this step, good question. And I believe we can add what's known as a wildcard certificate. So anything under this domain or subdomain will work.

[00:07:01] But I didn't want to do that for this particular course. I think we can get off the rails a little bit. Everybody, this far, we added our server name in? Okay.
>> Jem Young: And go down, make sure you write quit.
>> Jem Young: Give everybody a second to catch up. We're gonna rerun Certbot.

[00:07:40]
>> Jem Young: Okay, everybody good? All right, so let's rerun Certbot again. And let's just set all of them, so we're not gonna put any particular one, hit Enter.
>> Jem Young: And this is totally up to you if you want to make the redirect or not. I'm gonna chose to let it automatically redirect.

[00:08:10] So that means all requests coming into port 80 will be redirected to port 443. You don't have to do this, but it's generally better, unless your website's brand new and people never been there. In that case, they'll probably go to the HTTPS by default. I think Chrome tries that first and all the browsers do.

[00:08:26] But since we already had our site and there's probably already some sort of cache of it, it's best to probably redirect. So I'm gonna say yes I want it to redirect to https.
>> Jem Young: Awesome.
>> Jem Young: And let's test if that works. We may have to restart Nginx. I don't remember if I did it for us.

[00:08:51]
>> Jem Young: Spinning, spinning, spinning.
>> Jem Young: Did we forget a step? What do you think we forgot?
>> Speaker 3: The firewall.
>> Jem Young: Yes, we didn't open port 443. And Certbot is good, but it won't do that for us. So let's say sudo ufw allow https.
>> Jem Young: And I'll just check the status just to be sure sudo ufw status.

[00:09:25] We should be good now.
>> Jem Young: And yep, port is open and now I have https. Everybody get this far?
>> Jem Young: Nice, trust me in the old days, in my previous course, this was a much more involved. But thanks to Certbot, they do so much work for us. One thing it's good to know because you all are intelligent full stack engineers, when I said there's a challenge, what do you think that means?

[00:09:58] Put it this way, if you were a certificate authority, how would you verify that somebody owns the domain that they say they're trying to register? Throw some guesses out.
>> Speaker 3: The named servers and your DNS providers?
>> Jem Young: Yeah, but name servers, I can put any name server I want to redirect anywhere I want.

[00:10:19] You still need to prove somehow that you are in control of the server that the domain points to. What would be a way of doing that?
>> Speaker 2: Put a file on your server and then try to retrieve it?
>> Jem Young: Exactly, and that's exactly what the challenge does. It temporarily creates a file that says, hey, if you're really jemyoung.com, prove it.

[00:10:39] So what Certbot does is it creates a temporary file, a temporary path of some hash. It sends that hash to Let's Encrypt and says, hey, when you hit jemyoung.com/thisweirdhash, it should return this key. And if it does, we know that this is, in fact, the person who is who they say they are.

[00:10:57] And then once it's done, it cleans all that up and then it takes it off your system. And then periodically it does that. When they renew the certificate, it does the same thing just to verify that you are still in control the server you say you have. That is what keeps me from registering Google.com as my own.

[00:11:11] Because I couldn't prove when you hit google.com/ some random hash for some file, that it's not gonna return anymore. And that's what it's doing. Probably not as important but it's kind of good to know what's going on under the hood and how these things work. And if you wanna see some some wildness, check out your nginx config now.

[00:11:32] And we're just gonna scroll down a bit, scroll down. And we see it added all of these options here added 4434 SSL, remember the two colons surround by brackets or IPv6. It adds a certificate. The pem is a type of certificate file similar to an SSH key, just different format.

[00:11:53] It adds the SSL configuration to nginx.conf, and there should be a rewrite in here somewhere, yeah. And down here it even added another server block that rewrites if you're trying to go to regular www.jemis.thebest, it's gonna redirect you with a 301 permanently. So that means next time you go to jemisthebest.com or something like that or jemis.thebest, it will automatically get HTTPS for you.

[00:12:20] That was that two option we selected instead of one.
>> Jem Young: Nice, any questions about this? Not too bad, right? That was pretty painless, honestly. Of all the really complex things we can do, that was maybe one of the least painful things we can do. Nice work, everyone. So now you can load service workers, you can use all that cool features on your website.

[00:12:47] I wouldn't suggest accepting credit cards or something. I mean, you could, but that's not something you wanna do unless you know what you're doing cuz there's still additional security. But now you're in a good state. So now, we're locked. They don't do that green lock icon anymore. I'm really disappointed because it's like a nice little badge like, look how advanced I am.

[00:13:05] But now it's just like a regular boring lock. But here's a lock for you.