Koncept:
Meshtastic Web Client nie umożliwia zablokowania dostępu do panelu za pomocą danych do logowania. Aby uniknąć przeróbek, grzebania w kodzie i konieczności utrzymywania zgodności z nowymi wersjami, najprostszym rozwiązaniem wydaje się następujący schemat:
Meshtastic Web Client Server <--akceptuje tylko ruch od/do--> Reverse proxy <--zapewnia uwierzytelnienie--> Przeglądarka
Nie pokryje to niestety kwestii klienta hostowanego bezpośrednio z urządzenia ESP32 – ten scenariusz będzie niestety wymagał przeróbek. Opiszę to jako osobny scenariusz na końcu posta.
Uwaga:
Żaden z wymienionych scenariuszy nie zakłada zabezpieczenia tego interfejsu przed „hackerem” bądź kimś po prostu bardziej obeznanym… zawsze można podsłuchać hasło, przejąć ruch lub uderzyć bezpośrednio do API urządzenia znajdującego się w sieci. Chodzi tu tylko o zabezpieczenie interfejsu przed ciekawskimi.
Instalacja Docker:
Najprostszym sposobem na rozpoczęcie pracy z dockerem jest instalacja Docker Desktop https://www.docker.com/products/docker-desktop/. Ci, którzy korzystają z Linuxa i mieli już zainstalowany Docker Engine – poradzą sobie bez tego.
Instalacja z użyciem Dockera:
Idea pracy z dockerem polega na odpalaniu aplikacji oraz wszystkich jej zależności (wraz z systemem operacyjnym) w odizolowanych środowiskach. Dzięki temu w zamian za narzut zużywanych zasobów unikamy problemów z ewentualnym „namieszaniem” czegoś w swoim głównym systemie.
Podejście to zakłada, że wszelakie artefakty (produkty aplikacji) i konfiguracja zapisana jest poza samym kontenerem. Stąd też warto utworzyć sobie jakiś folder na przechowywanie konfiguracji/baz/etc. produkowanych przez aplikacje działające w kontenerach. W dalszej części tego posta ścieżkę do tego folderu nazwę po prostu <folder>. Po założeniu takiego folderu należy upewnić się, że Docker ma do niego dostęp:


Punkty 4-5 należy wykonać tylko, gdy folder nie znajduje się na powyższej liście.
Utworzenie sieci:
Aby uniknąć zmian w adresach kontenerów w ramach wewnętrznej sieci dockera należy utworzyć statyczną sieć, z której następnie będziemy przydzielali adresy poszczególnym kontenerom.
Kod: Zaznacz cały
docker network create --driver=bridge --subnet=172.69.69.0/24 --gateway=172.69.69.1 static_networkDocker nawet w wersji Desktop nigdy nie był mocny w jakiekolwiek GUI. Cała idea operacji zorientowana jest na klepanie, często bardzo długich poleceń. Na szczęście możemy zmniejszyć sobie próg wejścia i skorzystać z kontenera, który będzie nam serwował takowe GUI. Niestety samo jego postawienie wymaga wykonania polecenia (po uwcześniejszym utworzeniu pod<folderu> portainer na przechowywanie konfiguracji:
Kod: Zaznacz cały
docker run -d --network=static_network --ip=172.69.69.2 -p 8000:8000 -p 9443:9443 --name portainer --restart=always -v /var/run.docker.sock -v <folder>/portainer:/data portainer/portainer-ce:latestInstalacja Nginx proxy manager:
Po wejściu na stronę Portainera należy wybrać środowisko:

Następnie przejść do zakładki Containers i kliknąć przycisk +Add container:

Jako że nginx będzie przechowywał konfigurację oraz w przypadku HTTPS/wystawienia usług na świat – również certyfikaty SSL – potrzebujemy utworzyć sobie odpowiednie pod<foldery>, czyli:
<folder>/nginx-proxy-manager/data
<folder>/nginx-proxy-manager/letsencrypt
Po czym możemy przystąpić do samego dodawania kontenera.
Uwaga! Porty 80 oraz 443 mogą być już zajęte przez inne usługi znajdujące się na serwerze. W takim wypadku trzeba wybrać (oraz zapamiętać) inne porty dla transmisji nieszyfrowanej (80) oraz szyfrowanej (443) – zmieniamy tylko po stronie host. To samo można zrobić w przypadku zajętego portu 81, który jest portem panelu zarządzania proxy -> jednak to też zmieniamy tylko po stronie host ustawień.
Wypełniamy formularz dodawania kontenera:
- Name: nginx-proxy-manager
Image: jc21/nginx-proxy-manager:latest
Porty:
80-81
443

Nieco niżej w ustawieniach zaawansowanych klikamy w zakładkę Volumes, ustawiamy „bind” i wypełniamy wszystko odpowiednimi ścieżkami (po stronie contenera są to stałe /data oraz /etc/letsencrypt, a po stronie hosta są to ścieżki poprzedzone <folderem>.
Upewniamy się, że obydwie lokalizacie ustawione są jako zapisywalne (writeable)

Przechodzimy do zakładki network, wybieramy naszą wcześniej utworzoną sieć i wprowadzamy któryś z wolnych adresów IP – np. ten z końcówką 7 tj. 172.69.69.7

Na koniec przechodzimy do zakładki Restart policy i aby kontener wstawał sam po uruchomieniu komputera (i dockera) zaznaczamy „Unless stopped” (czyli póki nie zatrzymamy kontenera ręcznie – będzie on uruchamiany wraz ze startem dockera). Mając to wszystko możemy zatwierdzić dodawanie kontenera. Będzie trwało to chwilę, a w tym czasie możemy skupić się na dodawaniu kontenera Meshtastic Web Client.

Domyślne dane logowania do proxy:
email: admin@example.com
hasło: changeme
Użytkownik zostanie poproszony o ustawienie danych administracyjnych przy pierwszym logowaniu.
Instalacja Meshtastic Web Client:
Meshtastic Web niestety przechowuje ustawienia wyłącznie w przeglądarce użytkownika – stąd też nie musimy konfigurować żadnych dodatkowych folderów.
Znów wchodzimy w Containers -> +Add container, przełączamy źródło obrazu dockera z Simple na Advanced mode i wypełniamy:
name: Meshtastic-Web
image: ghcr.io/meshtastic/web

W sekcji Advanced, w zakładce network wybieramy naszą statyczną sieć i ustawiamy IP:

Na koniec przechodzimy do zakładki Restart policy, ustawiamy Unless Stopped i potwierdzamy dodanie kontenera:

Konfiguracja proxy:
Przez adres IP naszego serwera nadany przez router (lub inny serwer DNS/ustawiony ręcznie) oraz port „Host” panelu administracyjnego, który został ustawiony podczas dodawania kontenera Nginx proxy manager – za pomocą przeglądarki wchodzimy do panelu konfiguracyjnego proxy:
Po zalogowaniu należy utworzyć listę dostępu (użytkownik/hasło do Meshtastica), w tym celu trzeba wybrać opcję Access Lists, kliknąć przycisk Add Access List i w zakładce Details wyskakującego okienka trzeba podać jakąś nazwę naszej listy np. Meshtastic-Web:

Następnie przechodzimy do zakładki Authorization, wpisujemy dane, którymi chcemy logować się do Meshastic Web Client:

Następnie przechodzimy na kartę Access i dajemy dostęp dla danych sieci/adresów IP… jeśli chcemy aby sama kombinacja użytkownik/hasło stanowiła o dostępie – w polu allow wpisujemy all (allow jest nad deny w tym wypadku także allow all, deny all sprawia, że wszystkie adresy są dozwolone). Po wprowadzeniu danych można zapisać ustawienia poprzez kliknięcie przycisku Save:

Dalej musimy utworzyć samą konfigurację proxy dla Meshtastic Web Client. Z menu wybieramy Hosts -> Proxy Hosts oraz klikamy przycisk Add Proxy Host:

Następnie wprowadzamy nazwę domeny, pod którą chcemy podpiąć Meshtastic Web Client (może być to domena lokalna – jak wymusić odpowiendnie ustawienie pokażę dalej w poście), adres IP, ale ten wewnętrzny z sieci dockerowej static_network oraz port 8080.
Dalej należy wybrać utworzoną wcześniej listę dostępu z wybieraka Access List).
Przydatne może być też zaznaczenie opcji Websocket support (nie sprawdzałem, czy WebClient w któtymkolwiek momencie z tego korzysta, ale nie mogę tego wykluczyć):

Po ustawieniu wszystkiego należy kliknąć przycisk Save.
Wszystko powinno się zgadzać – teraz należy powiedzieć naszemu komputerowi, gdzie powinien szukać domeny ustawionej powyżej.
Idealnym scenariuszem jest, gdy mamy własną domenę lub chociażby własny serwer DNS – wtedy możemy ustawić to globalnie dla wszystkich urządzeń w sieci. W przeciwnym wypadku musimy dokonać edycji wpisu w pliku:
Linux/MacOS ->
Kod: Zaznacz cały
/etc/hostsKod: Zaznacz cały
C:\Windows\System32\drivers\etc (dysk może być inny niż C)Kod: Zaznacz cały
192.168.1.2 meshtastic.localDalej z przeglądarki możemy wejść pod adres http://meshtastic.local i pojawi nam się monit logowania:

Po zalogowaniu otrzymamy natomiast znany już interface Meshtastic Web Client.
Pozostaje jeszcze problem tego, iż urządzenia z ESP32 same hostują taki sam interface, który nie będzie już podlegał zabezpieczeniom – jak taki i-face usunąć lub dodać w kodzie jego zabezpieczenie – opiszę w następnej części poradnika.
Na marginesie:
Przydałby się taki interfejs, ale czerpiący serial nie z przeglądarki ale z serwera -> dzięki temu można by było sobie wpiąć radio do serwera i zarządzać radiem, które nie znajduje się w sieci Wifi. Ale to jest temat na inny projekt, który owinąłby CLI w jakieś webowe GUI (rodzi mi się nawet zalążek czegoś takiego w PHP).
Część druga w przygotowaniu...