A GUI for Nginx


2 June, 2020

I recently rented a new server from OVH cloud, they are super cheap check them out.

NO, they do not sponsor me.

Getting your hand into nginx without any prior knowledge about servers and reverse proxies and all those fancy terms, can be difficult

Although it is important that to learn all of them, sometimes you just want it working and quickly.

Reverse proxy

First lets get the concept out of the way.

Reverse proxy server is used to hide all the mess the developer has made behind a single ip.

Lets start with a normal server, you take a domain name like "www.example.com" and point it to an ip, hopefully the ip of your server and whenever someone searches your domain name in a browser or by any other way that goes to the port 80 or 443 of your server based on http or https.

Things start to get out of hand when you use server name, like "other.example.com" and "somethingelse.example.com" or "whatever.example.com". these nameservers come when you rent the domainname, and you can aim them to other servers or the same server.

If you are anything like me you don't want to buy different servers for each and every project or nameserver. what you can do instead is serve your content on different ports on the same server and tell nginx to to set nameservers to ports on localhost of that machine.

and to set these thing up you need to ssh into the server and edit the unreadable nginx config. thats is why i made nrps, after setting up nrps you get a front-end webapp on which you can view or edit the nginx config with easy input menues and stuff.

pre-requisites

You should be on an unix based system, meaning a mac or some distribution of linux.

windows does not work yet.

You can find out how to install these on the internet.

Setting up NRPS

There are two parts to it the backend(flask) and the frontend(vue). because of all the passwords and lack of developers still to deal with them, you have to go in and put in a few things by hand, but don't worry i will share each and every step here so hang tight.

First lets get all the file we need on a local machine. there are 2 ways to do this. if you have git installed(which you should) just do
git clone https://github.com/abhishek-deshmukh/nrps/tree/v0.3.0
or if you don't have git, then you can download it form here

You will have a directory structure like this:

.
├── backend
│   ├── api.py
│   ├── main.conf
│   └── requirements.txt
├── dir.txt
├── frontend
│   ├── babel.config.js
│   ├── package.json
│   ├── package-lock.json
│   ├── public
│   │   ├── favicon.ico
│   │   └── index.html
│   ├── readme.md
│   ├── src
│   │   ├── app.vue
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   ├── helloworld.vue
│   │   │   ├── login.vue
│   │   │   └── proxy.vue
│   │   ├── main.ts
│   │   ├── plugins
│   │   │   └── bootstrap-vue.js
│   │   ├── router
│   │   │   └── index.ts
│   │   ├── shims-tsx.d.ts
│   │   ├── shims-vue.d.ts
│   │   ├── store
│   │   │   └── index.ts
│   │   └── views
│   │   ├── about.vue
│   │   └── home.vue
│   └── tsconfig.json
└── readme.md

Yes, it might look overwhelming but don't worry you only have do a few things to get this working.

Now open the filebackend/api.py in your favourite text-editor(vim). on lines 11 and 12 enter username and password inside the quotes like so.

10|# enter things here
11|username = "dunce"
12|password = "somethinglonganddifficult"
13|# enter things here

okay now the backend should has all the things inside it ready.

lets set up a few things inside the frontend now shall we? open the file frontend/src/store/index.ts again in your favorite text editor(vim) and look for rootURL and put in the domain name of your remote server in quotes provided and then just below that put in a name for the server in quotes

now go to the base directory, and run

$ ./build.sh

If you get a security issue, run chown +x build.sh and then try again.

The setup is complete, and in the build files are in the folder called build, if you know how to move them to the server do that and skip this part, and if you don't then read along, now lets move these things to your server.

Moving to the SERVER

Assuming you are a user on the server and you have the password for the user, we can `scp` the files into the server, `scp` is used to send files over ssh.

Now go to the base directory and run

$ scp -r build/ user@ipaddress:~

in the above command replace user with your username on the server and the ipaddress with the ipaddress of your server.

when you run it will prompt you for the password of the user on the remote server, i would recommend giving it that.

now that the build files have been moved to the server lets deploy it on the server on part at a time

now to connect to the server we will use ssh

$ ssh user@ipaddress

after which it will ask for the password of the user on the server, i would recommend you give it that.

pre-requisites part 2

These are things to be installed on the server.

Most servers run UBUNTU so, here is the installation command for ubuntu, if you are not on ubuntu don't worry all these packages should be in the package managers of your distribution.

$ sudo apt update && sudo apt upgrade && sudo apt install nginx supervisor python3 python3-pip software-properties-common && pip3 install virtualenv python3-certbot-nginx && sudo apt-add-repository universe && sudo apt-get update && sudo apt-get install certbot python3-certbot-nginx

these were installed on the server:

  • python3
  • python3-pip
  • virtualenv
  • certbot
  • python3-certbot-nginx

once these things are installed lets move on to deploying the backend.

Deploying

Lets begin by getting sudo access

$ sudo su

This will prompt you for a password of the user on the server, put that in and your prompt should change to something like:root@something #

now go into the build/ folder and run

# ./install.sh example.com ipaddress

Replace ip-address with the ip of your remote server and example.com with domain name you want nrps hosted at.

If you run into any permission issues run:

# chmod +x install.sh

the deployment is complete.

F.A.Q.

How to install node and npm?

you can visitnodejs.org for details on how to do that.

Not abel to login in at the webpage, what to do?

there are a lot of possible things that could have gone wrong but usually it is the firewall just run:

$ sudo ufw allow 8081/http

and everything should be working.

Can I use the reverse proxy for other servers as well?

yes, if the other server has https instead of http in its url, then put http in place of location, the browser will switch to https on its own.

How to change NRPS username and password?

edit the username and password in/etc/nginx/nrps/api.py and then you will have to restart supervisorctl for the new code to take action, to do that the run:

$ sudo supervisorctl restart nginx:nrps

if you run into any issuese-mail me, i would love to help you out.