diff --git a/Dockerfile b/Dockerfile index 65da15df0a16cd8f33eadab9ab21adf78306f032..7ee2190b56520edfd0b9ef168c17fc33a4afe37c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -24,7 +24,6 @@ RUN apk add --no-cache \ USER node ENV PATH=/home/node/.npm-global/bin:$PATH ENV NPM_CONFIG_PREFIX=/home/node/.npm-global -# build mumble-web RUN cd /home/node && \ npm install && \ npm run build && \ diff --git a/README.md b/README.md index 37961f893d5449fc3cbfae9cd8b7e012a7d0beb8..7676df400584340221800831b21a599527a97f0b 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,99 @@ -# Build Mumble Web +# Mumble-Web -You can use the `build_mumble_web.sh` script to build the mumble-web application, which -can be deployed with an webserver. The application -will be stored at `./dist`. +[Mumble-Web](https://github.com/Johni0702/mumble-web) ist ein Mumble-Client für den Webbrowser. +Hiermit ist es möglich Mumble zu verwenden, ohne einen nativen Client installieren zu müssen. + +Dieses Projekt ermöglicht es, die Javascript-Anwendung zu bauen, sodass sie mit einem +Webserver ausgeliefert werden kann. +Zum Bauen wird ein Docker-Container verwendet, sodass die benötigt Abhängigkeiten +nicht auf dem ausführenden Hostsystem installiert sein müssen. +Das Bauen kann, sowohl auf dem selben, als auch auf einem anderen Computer stattfinden. -The script will clone the [mumble-web](https://github.com/Johni0702/mumble-web) repository. -If the repository already was cloned it will pull the latest commits. -Afterwards the docker image, defined in the [Dockerfile](https://gitlab.cvh-server.de/aco/build-mumble-web/-/blob/master/Dockerfile), will be build. ## build -To build the mumble-web application: just run the script! +Mit dem bereitgestellten Script `build_mumble_web.sh` kann die Anwendung gebaut werden. +Dazu führt das Script vollgende Schritte aus: -```bash -./build_mumble_web.sh -``` +1. Clonen des Mumble-Web Repositories: Falls nicht schon vorher geschehen, wird die aktuelle Version des + Mumble-Web Repositories heruntergeladen. Wurde das Repository bereits heruntergeladen, wird es aktualisiert. +2. Anschließend wird das im Dockerfile definierte Image `mumble-web` gebaut. + Das Image ist Alpine basiert und installiert nur die notwendigsten Pakete, um + die Javascript-Anwendung zu bauen. +3. Um die Anwendung zu erhalten, die nach dem Erzeugen des Images sich in selbigem befindet, ist + es notwendig einen Container auf Basis diese Image zu erzeugen. +4. Aus dem erzeugten Container können anschließend die generierten Datein + zurück auf das Hostsystem kopiert werden. + Die kopierten Dateien liegen anschließend in dem Verzeichnis `./dist` +5. Zuletzt werden sowohl der erzeugte Container, als auch das Image wieder entfernt, + sodass bei einem wiederholten Bauen der Anwendung sichergestellt ist, + dass alle Bestandteile aktualisiert werden. + + +## Dockerfile + +In dem [Dockerfile](https://gitlab.cvh-server.de/aco/build-mumble-web/-/blob/master/Dockerfile) +befinden sich neben dem `mumble-web` Image noch zwei weitere Images. +Bei dem zweiten Image handelt es sich um ein Image, dessen Basis bereits einen +Nginx-Webserver enthält. +In das Image werden die generierten Dateien aus dem `mumble-web` Image kopiert, +das zweite Image ist somit von dem ersten Image abhängig, weshalb es sich hierbei um +ein Multistage-Dockerfile handelt. +Dieses zweite Image wird dazu verwendet die Anwendung als eine Testversion bereitzustellen. + +Das dritte Image, das in dem Dockerfile definiert ist basiert ebenfalls auf einem Alpine-Image. +Zusätzlich wird die Anwendung `Websockify` installiert, sie wird dazu benötigt +eine Verbindung zwischen einem Mumble-Server (Murmur) und der Webanwendung herzustellen. ## testing -If you want to test mumble web, you can deploy it together with mumble and websockify -via the provided 'docker-compose.yml' file. +Um die Mumble-Web Anwendung zu testen kann sie lokal ausgeführt werden. +Hierzu steht ein docker-compose script bereit, um alle notwendigen Services passend zu starten. + +Das Script stellt einen eigenen Mumble-Server <https://github.com/coppit/docker-mumble-server> +bereit, dieser läuft auf dem Port 64738 und hat den Hostnamen `murmur`. +Damit der Server erfolgreich statet, muss die Konfigurationsdatei, die im Verzeichnis murmur liegt +vohanden sein. Dies ist der Fall, wenn docker-compose einfach im obersten Verzeichnis dieses +Repositories aufgerufen wird. + +Damit der Web-Client sich mit Murmur verbinden wird ein Container mit Websockify benötigt, +hierzu wird das Image verwendet, dass in dem beiligenden Dockerfile definiert ist. +Das Image muss nicht selbständig gebaut werden, da dies docker-compose übernimmt. +Websockify hört auf dem Port 64737 und leitet die Verbindungen an den Port 64738 +zum Hostnamen murmur weiter. + +Als letztes wird der Webserver gestartet. +Die Konfiguration für den Webserver liegt im Verzeichnis `webserver` +und wird beim starten des Containers eingebunden, so können Änderungen am Webserver +vorgenommen werde, ohne das Image neu erzeugen zu müssen. +In der vorliegenden Form verwendet der Webserver ein selbstsigniertes Zeritifikat, dass sich +im Verzeichnis `webserver/certs` befindet. +Bei Bedarf kann dieses dort ausgestauscht werden. +Die Konfiguration für nginx befindet sich im Verzeichnis `webserver/conf`. + +Mit docker-compose können diese drei Container leicht ausgeführt werden: ``` -# to deploy run: -docker-compose up -d +# starten der Container +docker-compose up -d # baut die Images falls notwendig + # & startet die Container + +# Ausgaben der Container können mit +docker-compose logs -f # abgerufen werden + +# zum stoppen der Container reicht es +docker-compose down # auszuführen + ``` -This will build two containers. One with mumble-web and nginx as a webserver and the second container -just contains websockify. The imae for the third container will not be build localy but -pulled from DockerHub. The container will serve murmur (mumble server) -for this test deployment. -The web application will be accessible via: [https://localhost](https://localhost). -The certificate is self signed, so your browser will warn you when you try to access the site. + +Sind die Container gestartet kann Mumble-Web über +<https://localhost> +aufgerufen werden. + +Wurde die Konfiguraiton von nginx nicht verändert, +dann kann man sich mit der im Screenshot angezeigten Adresse +sich mit dem Mumble-Server verbinden. + + **verifying the mumble-web repository** diff --git a/docker-compose.yml b/docker-compose.yml index 27d750e589881bb1d8b375e5e0ac5a8c48520818..59d79f943314f2751528ee52cf3968f8d78973e2 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -12,6 +12,8 @@ services: - ./webserver:/data:ro restart: unless-stopped command: ["/data/entrypoint.sh"] + depends_on: + - websockify websockify: build: @@ -22,6 +24,8 @@ services: - 64737:64737 restart: unless-stopped command: websockify --ssl-target 64737 murmur:64738 + depends_on: + - murmur murmur: container_name: murmur diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..e5ebd01d153d473e89026026726b08a83d523f02 Binary files /dev/null and b/screenshot.png differ