Check out a free preview of the full Full Stack for Front End Engineers course:
The "Changing server ports" Lesson is part of the full, Full Stack for Front End Engineers course featured in this preview video. Here's what you'd learn in this lesson:

By modifying Nginx, Jem sends external browsing requests to the server to port 3001. Then within the app directory, students check out a branch of the repository and customize the HTML.

Get Unlimited Access Now

Transcript from the "Changing server ports" Lesson

[00:00:00]
>> Jem: Now we're gonna set up nginx. So now instead of using less sudo vi /etc/nginx/sites-available/default.
>> Speaker 2: Do we have to make it stop listening to do all this stuff?
>> Jem: Yeah, Ctrl+C to kill your Node server.
>> Speaker 2: Yeah, that's what I was thinking.
>> Jem: Or you can open a new terminal and leave it running.

[00:00:14] But it's better just to kill the server. And then find that location block slash in the nginx config. Delete whatever's in there and change it to proxy_pass http://127.0.0.1. I believe you can also use localhost, should resolve correctly, or 0.0.0. But just do 127.0.0.1 port 3001.
>> Jem: So what we're doing here is we're now proxying all the traffic that comes into slash to our domain to port 3001 on our local machine.

[00:00:50] So I'm just gonna go ahead and do that now.
>> Jem: So I'm gonna stop my server.
>> Jem: sudo vi /etc/nginx/sites-available/default.
>> Jem: And let's find that location block.
>> Jem: Down here, and I'm just gonna delete this, delete you too. Go to insert mode.
>> Jem: Say proxy_pass http://127.0.0.1,
>> Jem: Port 3001, and a semicolon, slash.

[00:01:43] Make sure I typed that correctly. Yes, I did.
>> Jem: Okay,
>> Jem: Everybody with me so far, excellent.
>> Jem: Let me slow down, there's some questions. Lets see, Craig says, how did he get to port 3001? 3001 is just what I set the express server up to run on.

[00:02:10] You're free to edit that and change to whatever port you like. You could say port 4000. There are some reserved ports that you can't use, such as port 22 is for FTP. Things like that, no SSH. But, yeah, 3001 is just the port that I'm using in my nginx, or my express server.

[00:02:29] How do we get out of the app? Ctrl+C will kill the Node server so you can get back to the command line.
>> Speaker 2: So if you wanted to serve this on like slash app you would just make another location slash app?
>> Jem: Exactly, that's exactly right. And this is why we're using nginx instead of serving directly from our Node server, so that we can have multiple paths and easily handle.

[00:02:54] Or we can let the express server handle the routing for us. There's lots of ways to do things, but great question.
>> Jem: So for everybody here, let's go ahead and save and quit.
>> Jem: And let's go and try it without the port on there. No, it's the same page.

[00:03:21] We didn't restart nginx. So again, you can make all the changes you want. If you don't start nginx none of them will take place. So sudo service,
>> Jem: Can't spell, service nginx restart. Okay, oops, forgot to start my server again, duh. So let's start up our server.
>> Jem: And there we go.

[00:03:52] We have now linked a domain directly into a Node server.
>> Jem: Yeah, so let me go back to the slides for people in a bit of trouble. So, remember, we're editing our nginx configuration. We're proxying all traffic to slash, so just our default URL, to port 3001 on our local machine.

[00:04:24]
>> Jem: And then when we're done we're gonna go ahead and restart nginx.
>> Jem: You can use restart, reload.
>> Jem: And here is where we are right now. This is essentially how most basic websites work. Domain, IP, it's a server or a proxy. Goes to the real file server, which is Node in this instance.

[00:04:47] But it could be Apache going to PHP. It could be nginx going to a Python server. It could be a Java server, yes?
>> Speaker 2: So what's the point? Couldn't you just point nginx? Just have that point to whatever you want to return when they go to your domain?

[00:05:03] Like what's the point of having nginx on top of Node, I guess, is what I'm saying?
>> Jem: Yeah, you can absolutely serve files directly out of Node. It's just not recommended because it's not scalable. So let's say I wanted to add a different path. I'd have to do all my routing within my Node server rather than nginx.

[00:05:20]
>> Speaker 2: Okay.
>> Jem: It's confusing, cuz we're just doing a very, very basic thing. But let's say I also wanted to have a database server on this computer. But it's on a different port. Well, at that point I'd have to do that in my Node server. Which I don't wanna point MySQL in a Node server.

[00:05:34] So we do that nginx. We do it at the highest level possible so that requests come in and they just fork off entirely.
>> Speaker 2: Okay.
>> Jem: But that's a great question. Yes, always challenge if you don't know why I'm doing something.
>> Speaker 2: Yeah, I was just curious.
>> Jem: No, no, fantastic point.

[00:05:48]
>> Speaker 2: So I could just do location forward slash MySQL. And then I could have it to that specific port for the MySQL or PHP thing?
>> Jem: That's exactly right.
>> Speaker 2: Okay.
>> Jem: Yeah, so if for some reason you wanna expose a public MySQL interface, you'd do that in nginx.

[00:06:08] I'll go through this one more time just in case you missed the magic.
>> Jem: So we're editing our nginx configuration. So sudo vi /etc/nginx/sites-available/default. In our location block, so that's location slash our default block, we're changing those lines to say proxy_pass http://127.0.0.1 port 3001. So we're just proxying all traffic coming to slash our default URL.

[00:06:42] And just proxying that straight to our Node server.
>> Jem: And I think everybody's good. So, yes, this is the fun part. We have successfully hooked up everything. We've gone from DNS to nginx to Node. And now we're actually running a real application server. But again, swap out Node for anything you want, any sort of services you want.

[00:07:06] And change your nginx configuration to match. And it's really powerful. This is the basis of building anything you wanna build at all. That's the fun part about this. All right, so let's actually build a little bit of HTML so it's not just saying I'm a blank slate. So first, if you're not in your app director anymore let's move back into the app directory.

[00:07:36]
>> Jem: Let's go ahead and check out a new branch. This you don't actually have to do. But it's just a good habit not to work on the master branch of someone else's repo.
>> Jem: And go ahead and edit the index.html. You could change it to whatever you want.

[00:08:01] I'm gonna try to see if I can help out some of these people still having some issues. But go to change the HTML to do whatever you want. Get as fancy or as not fancy as you'd like.