Check out a free preview of the full Full Stack for Front-End Engineers, v3 course

The "Supporting HTTP/2" Lesson is part of the full, Full Stack for Front-End Engineers, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Jem discusses the different types of connections with HTTP/1.1 and HTTP/2. How to update the nginx server to HTTP2 is also covered in this segment.

Preview
Close

Transcript from the "Supporting HTTP/2" Lesson

[00:00:00]
>> So next, let's talk a little bit about HTTP/2. If you ran into any problems with your HTTPS setup, just clear it all out and run Certbot again, it should fix the problems for you. But because we're on this really standard path, it should have all worked together.

[00:00:14]
So, HTTP/1, the golden standard, 1.1, is what a lot of the Internet uses. That just essentially boils down to, for every file we need, it makes an independent connection. So if I need an app.js file, there's a request and response. If I need my index.html file, it opens another request and response, and that's fine, it works.

[00:00:36]
But HTTP/2, it does something called multiplexing, which just means I can do multiple things on one connection, and that's much more efficient. So, HTTP/2, depending on what you're doing, is much faster than HTTP/1. Why don't more people use it? HTTP/2 can take up a bit more CPU processing because it has to multiplex all these connections.

[00:00:56]
So it's not always the right choice to go with. But for a simple website, we can go and set it up, or we can go ahead and enable HTTP/2. And the good news is, this will be the easiest change you make all day. It's not even one line, it is one word in our NGINX configuration.

[00:01:18]
So we say sudo vi /etc/nginx/sites-enabled. You find that listen block under 443, and you just say, I want to use http2, that's it. This is as easy as it gets all day. So I'm gonna do that now. Actually, first, I wanna see what's going on in my original website.

[00:01:50]
502, and that was weird, let me check on that. Let me jump over to all. And if you don't have these columns available, you just right-click in your Network Inspector, add the Protocol header, which tells you what's connecting. So you see here, there's an http/1 connection, and there's a websock connection.

[00:02:22]
Remember we talked about status codes, 101 is switching, it just means it's an upgrade request. And that the scheme is https, the websocket is wss, so that's secure web socket connection. But I want http2, so let's go to modify that, nginx off. So we'll say sudo vi /etc/nginx/, and that's sites-enabled/fsfe.

[00:02:54]
And all we're gonna do is find the port 443, we're gonna add http2 to that. I will just add it here too. And that's it, one word, two lines, if you want to do ipv6 as well, so we'll write quit. Whenever we modify nginx, we wanna make sure it works, sudo nginx -t.

[00:03:25]
So then we restart nginx. Sudo service, There we go. I need to dive into my server during the break, cuz it's sometimes 502s, but PM2 is bringing it back online if it errors out. So I'm gonna look at the logs and see what's going on there. Probably during the break, though, cuz it could be a variety of things, I don't wanna bore you.

[00:04:08]
But now, when we open our website, so I'm on jamstack.lol, we see the protocol's now h2, pretty easy. Not bad, so now we have a multiplex connection instead of these bunch of other connections on h1. Everybody there? And another thing to point out is, when you're modifying, now you keep modifying your nginx configuration using vi, you got so much faster, right?

[00:04:35]
That :wq, it's so fast, you just don't think about it anymore. That's what's great about vi is, when you're really fast at it, you just no mouse anymore, just all commands. And then it just becomes muscle memory at that point. We made it, our final topic of the day, question.

[00:05:01]
>> So every time we create another subdomain, do we have to run that command to generate the cert for the command at Cerbot?
>> Yeah, I don't think it will pick it up automatically. But I think if you run the command, it will look through and say, hey, this is missing the certificate, we'll just add it in for you.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now