Brian F Love
Learn from a Google Developer Expert focused on Angular, Web Technologies, and Node.js from Portland, OR.
Ad ·
Learn Angular the right way with Ultimate Courses

Learning Nginx on OS X

In this post I am going to take a quick dive into the Nginx web server.

I have long been a big fan of Apache's HTTP web server. It's powerful, versatile, and free. For the most part, the website that I have worked on are not mega websites, so I have never run into performance issues using Apache (or IIS for that matter). However, I still wanted to play with nginx. What is it? It's a web server, and much more:

Nginx (pronounced engine-x) is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server.

So, let's dive in...

Installing Nginx on OS X

在OS X上安装nginx的最简单方法是使用Homebrew。

$ brew update $ brew install nginx



This is also just as easy as the installation. Just run the nginx command (with no options) as root.

$ sudo nginx


$ sudo nginx -s stop $ sudo nginx -s reload


Here is a quick rundown of the default paths:

  • webroot: /usr/local/Cellar/nginx/[version]/html
  • configuration: /usr/local/etc/nginx/nginx.conf<

After starting nginx we can make sure it is working by loading the default page. The server listens on port 8080 by default, so browse tohttp://localhost:8080你应该看到下面的屏幕截图。

Screenshot showing Nginx welcome page

Change Webroot and Port

The first thing I wanted to do was to update the webroot and the listening port of nginx. To do this we need to modify the nginx.conf file and reload the server.

http {...服务器{侦听80;server_name localhost;位置/ {root / www;}

Here are the most important settings to understand first:

  • listen- the port on which the server is bound and will listen for requests.
  • server_name- this value matches the host header value sent to the server. This will be important in a minute when we get to setting up another server to listen to other domains. This is similar to the use of virtual hosts in the Apache web server.
  • root- 这是服务器Webroot的路径。

Restart nginx and then load uphttp://localhost在浏览器中。

Virtual Host

OK, now that we have localhost running, what about setting up multiple virtual hosts in nginx. Here is an example from theNginx primer written by Martin Fjordvald.

server { listen 80; server_name *; return 301 $scheme://$request_uri; } server { listen 80; server_name; index index.html; root /home/; }

Here, Martin is defining two servers:

  • The first server is bound to port 80 and listens to all requests for "" and all subdomains "*". This captures all those that type in "", and any subdomain, and redirects the user to the "" domain. The redirect is a 301 redirect, signifying that this is a permanent redirect. This is good practice for SEO so that your server is only responding to "", which can avoid possible duplicate content penalties.
  • 第二个服务器也绑定到端口80,但仅聆听“”的请求。nginx将使用最具体匹配主机标题值的服务器。因此,这与第一个服务器中使用通配符匹配“*”不会冲突。

Also we should note the two variables that Martin used:

  • $scheme- the scheme for the request, likely either "http" or "https".
  • $request_uri- the URI of the request. This is everything after the domain, including the arguments, or query string parameters.

You can查看nginx文档中的完整变量列表.

html > server > location

One important thing to understand is that all configuration is inherited in this way:html > server > location. This also means that any configuration value set at the location level will take precedence over the value set in the server or html block.

In general I think of the request cycle as follows.

  • 侦听请求,
  • then based on the URL of the request, it finds the appropriate server
  • then based on the URI of the request, it find the appropriate location
  • runs any directives in the location, in order
  • 查找符合请求位置的文件
  • if a file exists, it is server
  • if a file doesn't exist, and we are requesting a directory, then look for an index file

Directory Listing

When I first loaded up a directory without an index file (such as index.html) in my browser, I received a 403 Forbidden error.

Screenshot showing Nginx 403 Forbidden

The reason for the 403 error is that nginx doesn't have access to the fileindex.html, well, since it doesn't exist. Which, is a bit confusing.

Why doesn't nginx return a 404?Well, it's because the default server configuration doesn't specify to show a 404. We can simply uncomment the following line to do an internal proxy to the/404.html文件。

error_page 404 /404.html

In my case, to get started, I wanted to simply allow nginx to show a directory listing of the files in my webroot. To do this, I just added the autoindex on configuration to the root location.

location / { autoindex on }

Now when I fire uphttp://localhostI can see a listing of all my files.


嗯,届at's it for now. Next step will be to set up a revere proxy to server PHP files via fastcgi and setting up search engine friendly URLs.

Brian F Love