This course has been updated! We now recommend you take the Full Stack for Front-End Engineers, v3 course.

Check out a free preview of the full Full Stack for Front-End Engineers, v2 course:
The "Proxy Passing Traffic" 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 explains that Nginx needs to be connected to the Express framework installed earlier, and demonstrates how to point Nginx to the correct port by using a proxy pass.

Get Unlimited Access Now

Transcript from the "Proxy Passing Traffic" Lesson

>> Jem Young: We just got our Express app written. There was a missing parentheses which I have subtly added in there via text edit, threw it in there. But now, let's go ahead and run that, run that app. So I'm going to switch over and I can say node app.js.

[00:00:19] Hey, it's running, cool. Now what? Let's go to the website. And, refresh that, wait a second. Not doing anything, but the app is running. What's going on now?
>> Speaker 2: You need to run it on the correct port?
>> Jem Young: Yes, we do, but the default port is port 80.

[00:00:44] But I wonder if we can do port 3000. Now it's working. But that's not convenient. We cann't build an app and say, hey, go to jemis.thebest or jemisthebest, but you gotta go to port 3000. Cuz my mom's gonna be like, what's a port? And that doesn't work. So we need to somehow direct that traffic to port 80.

[00:01:08] Cuz we got the domain, we got the IP, we've got Nginx running, but we still need to connect Nginx to Express. So this what we're gonna do next, we're gonna tune Nginx so that it points to the correct port. To that we're gonna use directives, that weird word I used earlier.

[00:01:22] We're gonna use the proxy_pass directive. And all that means is we're gonna proxy pass, we're going to proxy all the traffic from that's going to / which is the general root domain to the actual Node server on a different port. So let's go and do that. And this change is fairly short.

[00:01:44] We're going to edit that Nginx configuration again. So sudo vi /etc/nginx/sites-available/default. And then we're going to scroll down to that location directive, delete out everything in there, and then proxy_pass into it.
>> Speaker 2: You put the private key here, or the private key? Do you put in, for the password, is it the one that you, for the user?

>> Jem Young: It's whatever you set when you created that user, that sudo user.
>> Speaker 3: Sorry, under what section?
>> Jem Young: In the location directive. So scroll down and it'll have something like, actually, let me. I'll just-
>> Speaker 3: Files?
>> Jem Young: Yeah, just undo. So Undo, so scroll down to here. And then just delete these files.

[00:02:33] So I'm going to use double d to delete, then switch to insert mode and tab in. I'm going to say proxy_pass. So with this proxy_pass directive, all we're telling it is, hey, any request that comes in to / or, well, we only have one right now. So any request that comes in, let's just forward that request and let our Node application handle it, and on a different port.

[00:02:59] And this way, we don't have to change ports. We don't have to run it on port 80 or anything like that. We can run on infinite ports on, well, not infinite ports, not infinite ports, and the Nginx knows exactly where they're handled. And the benefit of doing something like this is I can run six different applications and they all run on a different port they're all running at the same time.

[00:03:17] And I can take one application down, bring another one up, I can route to a database. Most of what we're doing is gonna be with the proxy_pass directive, at least for today.
>> Jem Young: All right.
>> Jem Young: Oops, and I forgot to restart the server. So, let's write quit out of here.

[00:03:37] And we'll say, sudo service nginx reload, or restart, I don't think it matters, cool. If you have an error, the good thing about Nginx is if you have an error in your configuration, it will throw an error before it lets you restart. So that way your web server keeps up and running, it's pretty nice.

[00:03:56] And let's test to make sure I did that correctly. Oops, forgot to start my app back up.
>> Jem Young: Nice. So now I have my domain connected to my Express application running on port 80. Not bad. If you're running into troubles, don't forget to restart Nginx. Don't forget to start your Node application backup.

[00:04:27] And that's a pain, so we're gonna figure out how to get around restarting your application.
>> Speaker 3: Did you mention what service is? Like the service command, what does that do?
>> Jem Young: No, I didn't. And thanks for asking. Service is the highest-level command for any sort of daemon running in the background.

[00:04:45] Not everything runs on a service. Tomorrow we're gonna use something called systemctl, which is a way of managing your services, but at a lower layer. But services is a nice wrapper, it's much cleaner. The interface we'll see tomorrow is more advanced. And generally, I try to pick the simplest thing possible.

[00:05:04] But that's what services is. You can do lots of things with services. I can register my Node application as a service that's running in the background. It's probably not the best way to manage it. But something like Nginx that you always want running, we just use a services command.

[00:05:18] But, good question. I'm surprised this is the first one we've gotten on any sort of commands I've been running. It's okay. Yes?
>> Speaker 3: In the nginx folder, there is a folder called sites enabled as well. What's the difference between enabled and available sites?
>> Jem Young: Actually, one sym links to the other.

[00:05:35] I want to say, I think sites available sym links to sites enabled. You can manage different configurations that way. So you can change Nginx configurations without changing what's actually running. And then whenever you want it to be available, you can just copy it over. And that's one way of doing it.

[00:05:51] There's a, I'm gonna say it, I'm gonna try this. nginx -t, yeah. So you can run the nginx -t, and that runs over your configuration and validates that everything makes sense. In fact, we even have some things in here that don't make sense, which is weird because it's the default configuration.

[00:06:13] But that's what the sites enabled versus sites available is. And another thing is you generally don't modify your default. You make it per site. So I'd say, configuration, and then have an Nginx configuration for that. And then I merge them all together into one. But because we're only doing one web server, and it's the simplest example, that's the best practice.

[00:06:34] Good question, though. Surprised that didn't come up either. You all are sharp. Okay, everybody's website up and running, we get node back up and running. You're connected. All right, so now we've successfully made a web application. Nice job, everyone. It was a journey to get here, but we did it together.

[00:06:54] That's what's important.