Redirection can be easy enough on Nginx. Let’s see how we can utilise that for our single page applications coded in Vue, React, etc.

Nginx and Redirection

Nginx configuration is simple but powerful. All we need is a couple of lines to setup our server.

Add the below lines to the Nginx configuration files (e.g. in /etc/nginx/sites-enabled/domain.com.conf in Ubuntu).

server {
    listen        80;
    server_name   domain.com;
}

Start the Nginx server, and lo and behold - our web server is ready to serve magic at port 80. Go to domain.com in browser and see your beautiful app.

We can add redirection in the mix with a single line.

server {
    listen        80;
    server_name   domain.com;
    return        301 http://other_domain.com$request_uri;
}

This is a simple 301 redirection that informs requester (i.e., browser) that the web page at domain.com is redirected to other_domain.com permanently. Any suffix included with the original domain (e.g. https://domain.com/awesome-page/1) is sent to the redirected domain by using $request_uri. You can redirect any page to any other page within or outside the domain. We have previously seen this applied to manage 404 error in Vue in Nginx.

Replace 301 in the return statement to 302, and you have a temporary redirect. I don’t quite find a use case for temporary redirections, and can’t claim to know how Google or other search engines respond to them, but.. they exist.

Alternatively, you could use a rewrite -

server {
    listen      80;

    location / {
      rewrite     ^(.*)   https://other_domain.com permanent;
    }
}

This statement indicates that all requests to the domain that server is listening to have to be redirected to some other domain.

rewrite allows us to use regex and handle complex scenarios for redirection within or outside the domain.

For example -

server {
    # ...
    rewrite ^(/download/.*).?.*$ files.domain.com/downloads/$2;

    #...
}

I don’t quite use Nginx to its full capacity and have rather naive considerations on when to use rewrite vs redirect-

• Simple use cases can be addressed by redirect
• rewrite handles only 301 and 302 redirects (more on this in a bit)
• Redirects based on conditions (e.g. */download/* should be directed to files.domain.com URL) are possible only using rewrite

While complex conditions are candidates for rewrite, I typically manage “all things” in the SPA or using server routes. But, there’s more.

Nginx Redirection in SPAs

Single page applications handle all routing on the client (well, typically). You can have something like a vue-router installed, throw in the routes in a route.js file and the application happily does all the redirections without help from server.

All we need from server is -

server {
    server_name domain.com;
    listen 80;
    root /usr/www/domain;
    index index.html index.htm;

    location / {
            try_files $uri $uri/ /index.html;
    }
    location /api/ {
            proxy_pass http://localhost:5000;
            proxy_set_header Host $host;
    }
}

In Ubuntu -

• you can enter this configuration in /etc/nginx/sites-available/domain.com.conf and
• setup a link in /etc/nginx/sites-enabled/domain.com.conf

We are achieving quite a bit with these few lines -

• use yet another redirection directive called try_files to redirect any request (exceptions - see below) to $uri to a corresponding file with the same name accessible on web server. Point the request to /index.html if there is no file at $uri. The request is then handled by the SPA router
• redirect any requests with domain.com/api/ to another port on the server. This sets up reverse proxy and opens up the backend server (at port 5000) to the world through our domain

See this rewrite rules post for a more detailed comparison of what each of those directives can do.

The above configuration sets up a full-fledged web server for your SPA, but there’s one thing missing. That is for http to https redirection.. which is as easily done.

server {
    server_name domain.com;
    listen 80;
    return 301 https://$host$request_uri;
}

server {
    server_name domain.com;
    listen 443 ssl;
    root /usr/www/domain;
    index index.html index.htm;

    location / {
            try_files $uri $uri/ /index.html;
    }
    location /api/ {
            proxy_pass http://localhost:5000;
            proxy_set_header Host $host;
    }
}

This is all you need to setup a simple web server serving your SPA with Nginx.