Install the simplest webserver for static html

golfox2 · June 9, 2024, 9:30pm

Hi all, I would like to install the simplest webserver on my NAS at home, to be able to put a few html pages. My NAS runs TrueNAS CORE 13.0-U6.1.

-I read this thread about danb35 script to install Caddy, and the information given on the related github page, but I just want static html pages, that are exposed on the internet that I can access through my already owned domain. The caddy description sounds like it does too many things and I feel lost (I am not fully comfortable with all the steps and manipulations to be honest).

-I’ve checked forwebdav and shared folders in the truenas services but it’s a file hosting service that doesn’t actually show the html pages (if I understood correctly).

-In the end, I’ve tried to install nginx in a freshmade jail (through this video), then do a SMB share of the iocage/jail/site folder (with default SMB share parameters). From my windows 10 PC, I could access S:\root\usr\local\www\nginx-dist and see the default index.html page but apparently it is not advised to change/edit anything in this folder?
Also I can’t save anything because it’s protected.

→ So how do I add my own .html files and how could I access them via a shared folder on windows ?

Ideally, one of the html page (or folder where the html page is) should be protected by username and password. The idea is to have something like that in the end :

Structure of the files in the webserver :

The “auth” folder needs a username/password to access the html via a web browser :

I would like to access these files and edit html files in a shared folder over my local network (only, no need for public access) on my windows 10 PC (like I did with an SMB share on one of my datasets in a pool – files here are not ready only, they are fully editable) :

And then I would like to access that website from anywhere on something looking like : https: //mydomain:port_number/index.html (for example)

The idea is that, I could repeat the operation with another port number for a different page (weather info, photography library, online résumé, …)

Additionnal info : I already have a certified nextcloud instance that I access via https: //mydomain and it goes straight to nextcloud (I used danb35 script for the automated install). I don’t know if that could be a problem for this webserver question, because ports 80 and 443 are already forwarded to the nextcloud local IP.

Is there a way to configure something simple in my truenas that would fill these needs ? If yes, I’d be grateful for a bit of help please.

Thanks a lot !

dan · June 10, 2024, 12:32am

It can do a lot of things, but it doesn’t have to. For what you describe as your needs, install Caddy using the script, use the Caddyfile described here:

…and put your HTML files in /usr/local/www/html/ inside the jail. That’s all you need to do. Can you make it fancier? Sure, but you don’t have to.

Caddy is by far the simplest webserver to configure.

victor · June 10, 2024, 4:11am

+1

I am hosting some html files in just this way.

John · June 11, 2024, 1:25pm

Interesting! I’ve never heard of Caddy.

By far the simplest webserver I’ve run was with Althttpd which makes set up trivial at best. I’m not sure if I ran it stand-alone or with something like inetd but the basics are: it’s just a TCP daemon you start with a one-liner (either out-right or with a service).

Like:
althttpd -root ~/www -port 8080

dan · June 11, 2024, 2:39pm

If you have any interest in web serving in general, I think it’s worth paying some attention to. It can accept at least some configuration via command-line arguments, but normally uses a config file (which IMO is easier to deal with, but YMMV). But the complete config file to serve a set of static HTML files would look like this:

:80 {
    root * /path/to/pages
    file_server
}

No further configuration is needed. You can add bells and whistles if you want–OP mentioned authentication, which is easy enough to add as described here: basic_auth (Caddyfile directive) — Caddy Documentation. But for most purposes, it’s very simple to configure.

John · June 11, 2024, 2:53pm

I’ll have to look it over. I like the chroot ability of OpenBSD’s httpd, so recently, I tried to set up a simple git repo server using ob httpd but failed (but I think that was because of Fast/Slow CGI) so I just mocked up my own TCP client/server thing in C (haven’t gotten to take that very far past the alpha stage though).

I’ll check it out.

oxyde · June 12, 2024, 1:45pm

Im using caddy for hosting an HTML static site and It work like a charm: install is very easy with the script mentioned, the setup for this kind of use is pretty easy too… Can’t ask more

sos_nz · June 13, 2024, 4:57am

I don’t know how docker containers work in CORE, but in SCALE, in a jailmaker jail, this docker compose gives you a full LEMP stack. I use this to run my static webpage:

version: "3.8"
services:
  nginx:
    image: nginx:latest
    restart: unless-stopped
    ports:
      - 8080:80
    volumes:
      - ./www:/var/www/html
      - ./default.conf:/etc/nginx/conf.d/default.conf
      - ./.htpasswd:/etc/nginx/.htpasswd
    links:
      - php-fpm
    depends_on:
      - php-fpm
  php-fpm:
    image: chialab/php:8.3-fpm
    volumes:
      - ./www:/var/www/html
      - ./php.ini:/usr/local/etc/php/php.ini
    depends_on:
      - mariadb
    restart: unless-stopped
  # MariaDB Service
  mariadb:
    image: mariadb:10.9
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: mypassword
    volumes:
      - ./mysqldata:/var/lib/mysql
  # phpMyAdmin Service
  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    restart: unless-stopped
    ports:
      - 8084:80
    environment:
      PMA_HOST: mariadb
    depends_on:
      - mariadb
networks: {}

Of course adjust the details, passwords, paths, ports and config files as needed to suit your set up

dan · June 13, 2024, 5:40am

They don’t.

Doesn’t that seem like a bit of overkill?

sos_nz · June 13, 2024, 6:06am

It is, since I’m not using the M or PhpAdmin parts of the stack. That was just a bit of homelab fun :).

I do need php and sockets for one of my webpages though, so it’s not complete overkill.

Of course the OP could just run the nginx portion of the stack if that’s all they need, then put their index.html in /var/www/html and hit ‘start’.

Oh

golfox2 · June 13, 2024, 3:54pm

Hey dan, thanks I’ll use caddy then, I like your script which make things easy.
I’ve got a question though, I already forward ports 80 and 443 to the nextcloud jail on my TrueNAS (which I installed through your script too). Should I create another domain name and open 80 and 443 for this on the caddy webserver jail’s IP ? Or can I use other ports ?
thanks

victor · June 13, 2024, 3:59pm

You can use other ports, but the best would actually be to use your caddy instance as a reverse proxy. This can be achieved by adding a second site block to your Caddyfile.

:80 {
    root * /path/to/pages
    file_server
}

nextcloud.domain.com {
    reverse_proxy 192.168.x.x
}

Then forward the ports to your caddy jail. (and of course have whichever domain is needed configured so your DNS goes to your public IP)

golfox2 · June 13, 2024, 5:07pm

Supposing i’d do the reverse proxy, the idea would be that i have :

main.domain.com (where nextcloud on 192.168.1.1, plex on 192.168.1.2, homeassistant on 192.168.1.3 are, on different ports this is already working fine)
weather.domain.com (where it is forwarded to the TrueNAS webserver i am trying to setup)

how would the reverse proxy know to forward to plex or nextcloud or home assistant ?

And if I don’t do the reverse proxy but just a different port, can I still use " TLS with HTTP validation" that comes with the caddy install script ? How can I change ports in the caddy installation for the webserver ?

thanks a lot !

victor · June 13, 2024, 5:58pm

You would forward ports 80 and 443 only to caddy. Caddy differentiates what to route to where based on the domain name. In the example I gave, it would forward nextcloud.domain.com to whichever IP you tell it to. Same goes for every other domain and IP.

golfox2 · June 13, 2024, 6:25pm

Hi Victor, thanks for your quick reply.
I’ve installed caddy and tried to follow the github install indications as precisely as I could.
Now, I need to edit the Caddyfile (where only :2020 - hello world is written) and add this code hereunder, if i understood correctly ?:

Before I forward :80 and :443 to caddy’s jail instead of my nextcloud jail (which i installed through danb35 script and requires :80 and :443). Is it gonna mess things up ? (see picture for ports fwd) I would need to delete my existing forwardings

{
	acme_ca https://acme-staging-v02.api.letsencrypt.org/directory
	email golfox2@email.com
}

:80 {
	root * /usr/local/www/html
	file_server

}

main.domain.com {
	reverse_proxy /nextcloud* 192.168.1.36
	reverse_proxy /plex* 192.168.1.35:32400 (am i supposed to put the ports here or not?)
	reverse_proxy /homeassistant* 192.168.1.71:8123
	reverse_proxy /weather 192.168.1.40 
}

so a few more questions to verify before i break everything :

instead of writing in the URL : main. domain. com:32400 (i.e. for plex) i should write main. domain. com/plex ?
the webserver html file is going to be accessed via …/weather/index.html ?
am i supposed to write the ports after the local ip in the reverse_proxy /192…:“port” ?
what about :443 for TLS ?

tell me if you need more info and thanks a lot for the help I really appreciate

screenshot port forwarding

victor · June 13, 2024, 7:00pm

Correct but see 5
Correct but see 5
You should input the ports in the Caddyfile
Caddy does TLS automatically
Web servers do not always play well with having apps on sub-paths so I would recommend having the services on subdomains instead of sub paths ie /plex

golfox2 · June 17, 2024, 3:49pm

Thanks for your answer.
Assuming I’m not yet making a subdomain for each service (I want to try
this before)

For question 3 i’m not sure I get it, but I feel like it doesn’t make sense to put the local ip 192. … with a port :32400. So in the end is it supposed to look like :

{
	acme_ca https://acme-staging-v02.api.letsencrypt.org/directory
	email golfox2@email.com
}

:80 {
	root * /usr/local/www/html
	file_server
}

main.domain.com { 
	reverse_proxy /nextcloud* 192.168.1.36
	reverse_proxy /weather* 192.168.1.40 
}

:32400 {
	reverse_proxy /plex* 192.168.1.35
}

:8123 {
	reverse_proxy /homeassistant* 192.168.1.71
}

There’s deliberately no port for nextcloud as I access it directly from main. domain. com.
And of course my router’s public IP is setup with a DNS with my main. domain. com address.
Sorry for my ignorance, I don’t think I got the maths behind the thing yet, but I feel i’m not too far … ?

why is there a star * after the /…* on each reverse proxy ?
thank you !

victor · June 17, 2024, 4:01pm

Sorry for the confusion. The port and IP are inserted together. So essentially your are saying “forward this domain to this IP and this port”

Like this

{
	acme_ca https://acme-staging-v02.api.letsencrypt.org/directory
	email golfox2@email.com
}

:80 {
	root * /usr/local/www/html
	file_server
}

main.domain.com { 
	reverse_proxy /nextcloud* 192.168.1.36
	reverse_proxy /weather* 192.168.1.40 
}

nextcloud.domain.com {
        reverse_proxy 192.168.1.136
}

plex.domain.com {
	reverse_proxy 192.168.1.35:32400
}

homeassistant.domain.com {
	reverse_proxy 192.168.1.71:8123
}

The above should work but this next piece is what I was talking about when I mentioned proxying to sub paths. Web servers don’t play nice with those. Best is to use a sub domain like above


main.domain.com { 
	reverse_proxy /nextcloud* 192.168.1.36
	reverse_proxy /weather* 192.168.1.40 
}

golfox2 · June 17, 2024, 4:36pm

Okay, then if I understood correctly, ideally i’d create another subdomain also for the weather website, so :

{
   acme_ca https://acme-staging-v02.api.letsencrypt.org/directory
   email golfox2@email.com
}

:80 {
	root * /usr/local/www/html
	file_server
}

nextcloud.domain.com {
    reverse_proxy 192.168.1.36
}

plex.domain.com {
	reverse_proxy 192.168.1.35:32400
}

homeassistant.domain.com {
	reverse_proxy 192.168.1.71:8123
}

weather.domain.com {
	reverse_proxy 192.168.1.40 
}

So if I go to nextcloud.domain.com it goes directly to my nextcloud instance,
if I type weather.domain.com it will show my static html pages which are located in :80 …/html, file_server without having to write any port number in the URL bar.

And this, I know, not recommended because doesn’t play nice, but in a perfect world would work?:

main.domain.com {
	reverse_proxy /nextcloud* 192.168.1.36
	reverse_proxy /plex* 192.168.1.35:32400 
	reverse_proxy /homeassistant* 192.168.1.71:8123
	reverse_proxy /weather* 192.168.1.40 
}

dan · June 17, 2024, 6:30pm

Is the Caddy server itself running on 192.168.1.40? In that case, no, what you’d want to do is get rid of the :80 block entirely, and then do:

weather.domain.com {
    root * /usr/local/www/html
    file_server
}