Serve statis websites with nginx

tags: blog

I tried to use nginx to serve my app on a VPS and it took me a while to figure out how to set up nginx. I couldn't figure out if the process was the same or not for my react app.

Turns out it wasn't as complicated as I thought. But if you've never used it before, it might be a bit hard to get it to work like it was for me, so I thought I'd write a post briefly going through the process so I can help some people and also reference this post myself later.

Install nginx

First of all you will need to install nginx. I won't go over the process here. Should be easy.

Config for Non-ubuntu Users

If you're using ubuntu, when you install nginx, the following steps should have been completed by default so you don't have to go through these steps.

1. open config file /etc/nginx/nginx.conf
2. Add in the http section include sites-enabled/*;.(This will tell nginx to load the config files we will create later) Should look like:

http{
    include sites-enabled/*;
    some default cofigs...
}

Create folders:
cd /etc/nginx
mkdir sites-available sites-enables

Config for Your Website

1. Create a folder in which you will put the websites you want to serve
   mkdir /var/www
2. Create a folder in it and name it the name of your website
   mkdir /var/www/my-website
3. Mount the actual foler containing your website html files to the folder your created. (We are mounting the website to /var/www because nginx needs to be able to access the files as the user you set in the nginx.conf file, or nobody in the event that no user is set. And if the files is under your users home directory, nginx won't be able to aceess them.) You will need to remount if you reboot the server
   mount --bind [path to folder containing index.html] /var/www/my-website
   Example: if you are serving a react app, you will have a build folder after running npm run build:
   mount --bind ~/Desktop/git-repos/my-website/build/ /var/www/my-website
4. Create and edit /etc/nginx/sites-available/my-website
   content should be (Edit the content according to your website name and ip):

server {
  listen 80;
  server_name [ip or domain name or localhost if running locally];
  root   /var/www/my-website.com;
  index index.html;
  
  access_log /var/log/nginx/my-website.access.log;
  error_log /var/log/nginx/my-website.error.log;
  location / {
    try_files $uri /index.html;
  }
}

5. Create a link in sites/enabled to sites/available (This allows you to enable/disable sites by creating/deleting links without actually deleting config files)
   cd /etc/nginx/sites-available
ln -s ../sites-available/my-website
   Make sure permissions of your website folder are set correctly. In my case the build folder. If not, run chmod -R 755 [website folder]

Start nginx: systemctl start nginx
Enable nginx: syatemctl enable nginx(Will automatically start every time you boot if you run this)

Check status systemctl status nginx

Everytime you change the config files, run syetemctl restart nginx

If everything went right, your website should be up and running!
Enter the ip of your server to view your website or localhost if you're running on your local device.

Trouble Shooting

If your website is not being served, check /var/log/nginx/my-website.error.log; to see if there are any errors

Permission denied error

1. stat() failed (13: permission denied)
   Fix: Nginx can't access the folder your website is in. Check if the permissions are set correctly.