Use NGINX to Serve .NET Core, Nodejs or Static contents

Introduction

NGINX is a high-performance HTTP server as well as a reverse proxy. Unlike traditional servers, NGINX follows an event-driven, asynchronous architecture. As a result, the memory footprint is low and performance is high. If you’re running a Node.js-based web app, or .NET Core Web Application, you should seriously consider using NGINX as a reverse proxy.

NGINX can be very efficient in serving static assets as well. For all other requests, it will talk to your Node.js back end or .NET Core Web Application and send the response to the client.

I have setup an ubuntu VM on azure and you can read about the setup on this link. I will be using this VM for the demos in this post.

The post can be broken down in following sections:

Installing Node and NGINX on Ubuntu.
Serving static website content from NGINX.
Nginx as Reverse Proxy for NodeJS application.
Nginx as Reverse Proxy for .NET Core Web Application

Some basic bash command knowledge is also required. If you are new to bash or Linux, please check my articles on those topics for background information.

Installing Node on Ubuntu

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install nodejs-legacy
sudo apt-get install npm

We can check the installation as shown belo:

Installing nginx on Ubuntu

Based on your requirement, you can check the official website for installation instructions. Here, I will be installing it on Ubuntu:

sudo apt-get update
sudo apt-get install nginx

We can query the version to confirm that installation went through:

On Ubuntu, NGINX will start automatically once it’s installed.

Serving Static Contents

Let’s start simple and first, we will use NGINX to server a static website in our first demo.

Configuring NGINX

Configuration files can be found on /etc/nginx/. NGINX comes with a default site config file and we can open it using nano:

sudo nano /etc/nginx/sites-available/default

As you scroll down, you’ll find a server block. It looks something like following server block:

we leave it as it is and scroll a little bit down (note, structure of configuration file can be different for different versions).

root: the root is set to /var/www/html, but you can choose a different directory if you like.

server_name: _ allows to use any domain name (other option is localhost).

location /: this is indication the route and in this case it is the very root level route.

As a result, whenever there’s a request on the default url http://localhost/somepath/file.html, NGINX will serve the file from /var/www/html/somepath/file.html directly.

We will not change anything in this file yet but if we do, we have to restart the nginx server afterwards to take these changes effect.

sudo service nginx restart

Also, we can check that there is some default html file on the root path:

for this demo, this file will be served. So there is a default configuration of nginx which is pointing to default html file. This is ok for our first test.

As you can learn from my previous post that I created this ubuntu VM on azure cloud and it has a public IP address. I also created an inbound rule to allow traffic on port 80:

Now, if I enter the public ip address in browser, the default website shows up confirming that nginx is serving the HTML:

Off course, in reality we want to server our own contents, but this is just to show you how to start and next we will upload our own contents using this learning.

SSH and SCP

Ok, I have another website, which I want to serve instead of default nginx html page. The ubuntu server with nginx installed is on cloud and I now need to transfer my website contents files from my windows development machine to that particular html directory on ubuntu server. We can use git or ftp or something else, but for now I will use scp for this.

For simply transferring files from one machine to another, Ubuntu comes with the scp command which uses the SSH protocol to copy files between computers. We can use this tool to send our website configuration files and also website content files.

First, lets grant permissions to write to html directory:

Next, open a bash shell on my development machine and copy the files from source computer to target ubuntu machine:

scp -r ~/Documents/GitHubProjects/Public/c3jsdemo jawadhasan80@13.80.248.51:/var/www/html

Next, I cd to the c3jsdemo directory run npm install:

I also updated the config file of nginx for the following root:

because the config file is updated, we need to restart nginx.

and now we can access the website via public ip address:

Once again, this is a very simple website but it has a little bit more contents than default one we saw earlier. You can read more about charting library used in this website on this link.

Setting Up a Node.js Server

For our next demo, I will be using an existing simple Node.js application. Application uses in-memory array to store data and provide a basic API to perform CRUD operations. You can read about this application on this post.

Once again, I used scp tool to copy the source-code to ubuntu VM as discussed earlier (May be I should setup git client on VM to simplify this process).

I also run npm install to install packages.

I can now run node application as follows:

Next, I updated the config file by adding a location block for node-express application:

(Please note that end of the location URL and the proxy_pass URL must be a forward slash when referring to directories rather than pages , if you don’t have those, you will get page-not-found error).

So, server is listening on port 3000 and location is setup for this server. Now, if I browse to this path I can see the response from Node application:

Using ASP.NET Core with a reverse proxy (nginx)

A reverse proxy server is a web server that accepts requests and sends them to another web server which actually creates the responses for those requests. The responses are sent back to the proxy server who forwards them to the clients who issued the corresponding requests.

Nginx is a web server that can act as a reverse proxy for ASP.NET Core applications and which is also very good at serving static content.

With Nginx acting as a reverse proxy it would look something like this:

Browser <----> Nginx <----> Kestrel

We can breakdown the process in following three steps:

Build and Publish .NET Core Web Application.
Copy published application to Ubuntu machine.
Serve published application using nginx.

Building and Publishing .NET Core Application

I have a very simple .NET Core application which is build using default visual studio template and it has a simple WeatherController.

Now, a .NET Core Web application is capable of serving static content as well (e.g. you can serve an angular application from within your .NET Core web application) but to keep things simple, our application only expose REST endpoints for web-api calls.

.NET Core is cross platform and I published the web-application using following command:

dotnet publish "Web.csproj" -c Release -r ubuntu.16.04-x64

This will generate a published folder on our machine and now we can copy this published folder to our ubuntu machine as follows:

Copy Published application to Ubuntu

I copied published folder on a different directory on my windows machine, so it is easier to transfer it to ubuntu machine on cloud.

scp -r /c/workspace/netcoreapp jawadhasan80@13.80.248.51:/var/www/netcoreapp/

Now Open the Ubuntu machine terminal (CLI) and go to the project directory. Provide execute permissions and run the application as follows:

chmod 777 ./Web
./Web

Cool, our .NET Core web application is running in ubuntu.

Nginx Configurations

This process is similar to what we have already done for Node.js application. Open open the ngnix config file using nano and add a location entry for .NET Core Web api as shown below:

sudo nano /etc/nginx/sites-available/default

sudo service nginx restart

Now, if we browse to weatherforecast endpoint, we see the our .NET Core application is returning the JSON data as expected.

Summary

In this post, we saw how to serve static, NodeJS and .NET Core web applications using nginx. If you like you can read more about bash commands, linux and .net core web applications deployments in my other articles or if you are interested in learning real world application techniques, you can check my books for the same. Let me know if you have some questions. Till next time, Happy Coding.