Ports
A request from the browser hits a computer, where the server software does its magic and sends back a response.
What if we wanted two server software running on the same computer?
This is where ports come it. A request can specify a port number, with different server software listening on different ports. This allows for routing of requests to multiple server software within a single computer.
HTTP and HTTPS Ports
There is a convention in modern computer networking that all secure connections (HTTPS) are only made on port 443, while the little handshake (HTTP) required to set up the secure connection is performed on port 80. This is secure, but brings back the problem of wanting multiple software on a single computer.
Reverse Proxy
A reverse proxy is a server software that listens to ports 80 and 443, looks at the address name mentioned in the request, and selects which port to forward that request to. Technically they can forward the request to a different computer as well, but let's not bother with that right now.
There are a few reverse proxies that we can use, like NGINX, Apache, and HaProxy. NGINX comes bundled with Ubuntu by default, so I am using it and I will be talking about it. Most of the information should apply to the other reverse proxies as well.
Static Content
Some actions on the internet require the server to process some information. For example, clicking on someone's profile to see their latest posts. The server has to look up the data in the database and return it to you.
Other actions need no such processing. Getting the logo of a website is such an example. Serving up static content is made easy with NGINX and alternatives - just place all the static files in a folder and organise them in the same way that they would be referred to in URLs. For example, logos could go in static/logos, fonts could go in static/fonts, and so on.
Then, just tell NGINX (or alternative) to serve this folder on a certain address. When you do this, NGINX does not forward the request to another server - it just reads the file at the requested location and sends it back.
It is often recommended to keep as much of a website's content in static content because static content is a lot harder to hack than dynamic content.
SSL Termination
SSL is the algorithm with which network connections are encrypted. The way it works is that the client and the server both have a pair of public and private keys. A message encrypted with a public key can only be decrypted with its corresponding private key, and vice versa. Every request is signed with the sender's private key (so that decryption with the public key verifies identity) as well as with the receiver's public key (so that only the receiver can decrypt it with their private key).
Some hostable server software, like Nextcloud, allow you to specify two different ports for HTTP and HTTPS. However, they also allow you to set an option that says "a different server is handling the security of this connection, so please just work with unencrypted data and don't worry about encryption". That different server is NGINX.
If NGINX is simply forwarding a request to another port in the same physical device, there is no security risk to letting unencrypted data flow within the device. Allowing NGINX to handle SSL gives you a common place to keep an eye on your keys and update them periodically. You can even give different servers the same keys if you want, especially if you're paying for your keys.