Skip to content

Host using an Nginx Server

Video Lecture

Host using an Nginx server Host using an Nginx server

Description

In this video we will set up a simple Nginx configuration that can serve static web content.

I will use a publicly accessible server on the internet so that I can share my example Three.js project with the public and my friends.

I will use a Linux server with the Ubuntu 20.04 LTS operating system, and It will be set up using Digital Ocean (FREE $50 - 30 Day Credit) as the cloud provider.

Alternatively, I also have a Hetzner Cloud coupon where you will receive €20 in FREE credits for new registrations.


$50 - 30 Day FREE Credit
€20 FREE credits

You can also use other internet connected servers from many different cloud providers, such as GCP, Azure, AWS, Vultr and many more.

On Digital Ocean, I will use choose the $5 a month Standard Ubuntu 20.04 64 bit LTS.

Install Nginx

Now connect to your brand-new server using an SSH client. On Windows we can use Putty as our SSH client. SSH means 'Secure Shell'.

First thing to do, is to run apt update to ensure that your server has an up-to-date list of all the latest packages available.

sudo apt update

Check if Nginx is already installed

nginx -v

If not, then install it with

sudo apt install nginx

Now check its version

nginx -v

Now check it's status

sudo service nginx status

Visit http://[your ip address]

Copy the files to the server.

Now to copy the files using Secure File Transfer Protocol (SFTP).

On Windows, you can use WinSCP

Download it from https://winscp.net/eng/index.php and install it.

Add your servers configuration and then connect.

Using the WinSCP explorer interface, navigate to the /var/www/ folder on your server.

Create a new directory/folder, inside this /var/www/ called my-project, for example.

Copy the contents of your projects ./dist/client/ folder to your new web servers folder that you just created for your project.

Configure Nginx to serve your static files.

Delete the file /etc/nginx/sites-enabled/default

cd /etc/nginx/sites-enabled/
rm default

Create a new file called my-project.conf in the /etc/nginx/sites-enabled/ folder

sudo nano my-project.conf

and paste into it this script

server {
        listen 80;
        listen [::]:80;

        root /var/www/my-project;
        index index.html;

        location / {
                try_files $uri $uri/ =404;
        }
}

Check that the nginx configuration is ok,

nginx -t

If no errors are reported, then restart the Nginx service

sudo service nginx restart

and verify its status is ok

sudo service nginx status

Test it by visiting again http://[your IP address]

Comments