3611. Installing Nginx on macOSNginx and macOS
Tutorial for how to install and use Nginx.
1. Nginx
Nginx is a free, open-source and high-performance HTTP server.
2. Installing Nginx on macOS
Use brew to install nginx.
$ brew install nginx
Start nginx after installation.
$ sudo nginx
Access ‘http://localhost:8080’ in web browser.
Use the following command to stop nginx.
$ sudo nginx -s stop
3. Configuration
The default place of nginx.conf
on Mac after installing with brew is:
/usr/local/etc/nginx/nginx.conf
3.1 Changing the Default Port(8080)
Edit the configuration file and change the port to 9096
.
server {
listen 9096;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
Stop and restart nginx. Access ‘http://localhost:9096’ in web browser.
3.2 Changing the Path of Default Web Location
Change the ‘root’ to ‘/nginx/www’.
server {
listen 9096;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /nginx/www;
index index.html index.htm;
}
In you local Mac machine, create a new folder /nginx/www. And create a static html file named index.html
with following content.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Testing custom folder for nginx</h1>
<p>This is a test page. If you see this page, the nginx web server is successfully installed and working.</p>
<p>You are using custom folder now!</p>
</body>
</html>
Stop and restart nginx, then refresh the web browser. Nginx is now serving pages from the custom folder.
3.3 Supporting Client Side Routing
Many front-end libraries like React and Angular are using client side routing(CSR). Instead of making a GET request to server, CSR is using a browser API called history.pushState to manually change the URL and then it renders the view for that specific route - all without causing a page refresh.
One limitation of CSR is, it assumes user always accesses the index page first. If user directly access the routing page, for example, http://localhost:3000/productlist, “Cannot GET /URL Error” will appear. Notice, after we deploy the Single Page Application, there is only one index.html file and several assets file in the server folder. This is no file named productlist.html. To solve this issue, we can force web browser access the index file.
For nginx, add following line to the configuration file /usr/local/etc/nginx/nginx.conf.
try_files $uri /index.html;
This lets nginx serve static asset files and serves your index.html file when any file isn’t found on the server.
server {
listen 9096;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
try_files $uri /index.html;
root /nginx/www;
index index.html index.htm;
}