Blazor Web Assembly App Docker Container

In diesem Tutorial zeige ich wie man die Blazor Web Assembly App in einen Docker Container deployed. Das geht aktuell nicht ganz so einfach wie für eine Blazor Server App.

Blazor Web Assembly App Docker Container

Worum geht es in diesem Artikel? Ich arbeite aktuell an einem Projekt, bei dem alle Komponenten als Docker Container deployed werden. Für das Frontend wurde zuerst eine Blazor Server App mit Visual Studio erstellt. Wenn man die Erstellung eines Projekts durchklickt stellt man fest, dass man dort den Punkt Enable Docker findet:

Einmal angeklickt wird mit dem Projekt ein passendes Dockerfile erstellt. Die App kann damit auf Knopfdruck als Container deployed werden.

Blazor Server -> Blazor Web Assembly

Man kann nun darüber streiten was besser geeignet ist für das Frontend. Blazor Server oder Blazor Web Assembly. Ich habe zuerst auf die Server Variante gesetzt, da ich kritische Informationen am Server belassen wollte. Nachdem ich aber das Backend komplett hinter eine API gestellt hatte war dieser Grund plötzlich nicht mehr relevant, weshalb die Umstellung auf Blazor Web Assembly der logische Schritt war. Setzt man ein neues Blazor Web Assembly Projekt mit Visual Studio 2022 auf, dann wird man den bekannten Punkt zu Docker vermissen:

Warum fehlt der Punkt? Anders als bei der Server Version benötigt die App keine .NET Runtime und deshalb auch keinen eigenen Container. Die App baut statische Dateien, die auf den Client kopiert werden. Ausgeführt werden diese im Browser beim Client. Wie kommen diese Daten zum Client? Richtig: von einem Webserver. Ich gehe davon aus, dass man keinen Webserver hat und man einen Docker Container mit einem solchen automatisch bauen will. Ein mögliches Szenario wäre die Verwendung eines NGINX. Der Vorteil gegenüber der Blazor Server Variante: der erstellte Container ist im Vergleich winzig, nur einige MB groß.

NGINX Konfiguration

Damit die Blazor App mit einem Nginx Webserver als Docker Container ausgeliefert wird benötigt man 2 Dinge:

• nginx Konfiguration
• Dockerfile

In meinem Beispiel verwende ich das über Visual Studio 2022 erstellte Blazor Web Assembly Template. Im Root füge ich eine nginx.conf Datei mit folgendem Inhalt hinzu:

events { }
http {
    include mime.types;
    types {
        application/wasm wasm;
    }

    server {
        listen 80;

        location / {
            root /usr/share/nginx/html;
            try_files $uri $uri/ /index.html =404;
        }
    }
}

Ausgeliefert wird eine WASM Applikation. Der Server hört auf Port 80 und liefert den Inhalt der index.html Datei im default NGINX root Ordner (/usr/share/nginx/html) aus.

Wichtig: die Konfigurationsdatei muss mit veröffentlicht werden, ansonsten kann diese nicht an die korrekte Stelle im Docker Container kopiert werden. Diese Property bei Visual Studio unbedingt setzen!

Für den Docker Container brauchen wir zusätzlich noch dessen Bauplan, das entsprechende Dockerfile. Im Projektverzeichnis habe ich deshalb ein Dockerfile (ohne Dateiendung) mit folgendem Inhalt erstellt:

# build app
FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY Client.csproj .
RUN dotnet restore "Client.csproj"
COPY . .
RUN dotnet build "Client.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "Client.csproj" -c Release -o /app/publish

# build runtime image
FROM nginx:alpine AS final
WORKDIR /usr/share/nginx/html
COPY --from=publish /app/publish/wwwroot/ .
COPY nginx.conf /etc/nginx/nginx.conf

Jetzt muss man den Container nur noch bauen, ausführen und testen. Über die Konsole führt man folgende beiden Kommandos aus:

docker build -t client .
docker run -p 8080:80 client

Danach ist die Blazor Web Assembly App über localhost und dem angegebenen Port 8080 verfügbar:

Fazit

Ich habe gezeigt wie man für eine Blazor Web Assembly App in Visual Studio einen Docker Container mit Nginx als Webserver hinzufügt. Diesen Container kann ich bei meinem Projekt nun über docker-compose gemeinsam mit den anderen Komponenten der Applikation am Zielsystem automatisch bauen und deployen.