La containerizzazione sta sempre più prendendo piede nel mondo informatico, basti pensare ai paradigmi come CI/CD (Continuous Integration e Continuous Delivery) e, più in generale, al modello DevOps che fa un largo uso di questa tecnologia. Quando si parla di containerizzazione, non può che venire in mente Docker. Potremmo, dunque, dover dockerizzare una applicazione Blazor WebAssembly, vediamo come fare.

Prima di iniziare è importante ricordare che quando pubblichiamo una applicazione Blazor WebAssembly stiamo pubblicando un insieme di file statici e non abbiamo alcun runtime a supporto. Abbiamo quindi bisogno di un web server che ci possa dare una mano. Una possibile soluzione è NGINX.

Che cos’è NGINX?

Come già anticipato, NGINX è un web server open source usato anche come reverse proxy. È, inoltre, molto veloce nella distribuzione di contenuti statici: esattamente ciò di cui abbiamo bisogno. NGINX dispone di tante altre funzioni, tra le quali load balancer e cache HTTP. Ulteriori informazioni le potete trovare nella documentazione ufficiale.

Docker, Dockerfile, Image e Container

Una volta individuato il web server, dobbiamo creare la nostra immagine Docker. Ma prima due parole su Docker e ciò che gli sta attorno.

Docker è un progetto open source nato con lo scopo di automatizzare la distribuzione di applicazioni portabili e autosufficienti che possono essere eseguite su cloud o in locale.

Una immagine Docker è un file immutabili di sola lettura, questa viene creata attraverso il dockerfile. Una volta creata l’immagine, utilizzeremo un container per eseguire l’immagine Docker.

Per tutte le informazioni rimando alla documentazione ufficiale.

Aggiunta del dockerfile

Rechiamoci nella root del progetto e creiamo un file di nome dockerfile con questo contenuto:

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
EXPOSE 80
EXPOSE 443
WORKDIR /app
COPY . .
RUN dotnet restore BlazorDevIta.Client.csproj
COPY . .
RUN dotnet build BlazorDevIta.Client.csproj -c Release -o /app/build

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

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

Nelle righe 1 – 8 si definisce l’immagine base e si copiano i file csproj nella cartella app, si effettua il ripristino delle dipendenze da NuGet, si copia il tutto sempre nella cartella app e, successivamente, si esegue la build del progetto.

Nelle righe 10 – 11 si effettua il publish del progetto.

Le righe 13 – 16 rappresentano lo step finale della creazione dell’immagine. Viene utilizzata come immagine base nginix:alpine e si va a copiare il risultato della pubblicazione di riga 11 nella cartella /app/publish/wwwroot. Ultimo passaggio, molto importante, è quello di sostituire il file nginx.conf con il nostro file di configurazione che dovrà essere inserito all’interno del progetto Blazor WebAssembly. Il file nginx.conf è così composto:

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

    server {
        listen 80;

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

Questa è una configurazione molto semplice in cui il web server resta in ascolto della porta 80 e i file statici sono presenti al percorso usr/share/nginx/html. Attraverso try_files, ogni volta che NGINX non riesce a trovare una risorsa, restituisce la pagina index.html.

Build della image

Una volta che abbiamo terminato il nostro dockerfile è possibile effettuare la build della immagine attraverso il comando:

docker build -t blazordevita-dockerclient:1.0 .

Il parametro -t permette di specificare il nome della immagine, ciò che invece è presente dopo i due punti corrisponde alla sua versione.

Avvio del container

Ultimo passaggio è quello di avviare il container con la immagine appena creata, per fare questo eseguiamo il comando:

docker run --name BlazorDevIta.DockerClient -p 8080:80 blazordevita-dockerclient:1.0

Il parametro -name serve a dare un nome al container mentre il parametro -p effettua il mapping alla porta 8080 della nostra macchina con la porta 80 del container.

Una volta che il container è stato avviato, recandoci all’indirizzo http://localhost:8080 potremo vedere la nostra applicazione Blazor pronta all’uso.

Conclusioni

In questo articolo abbiamo visto come effettuare la dockerizzazione di una applicazione Blazor WebAssembly utilizzando NGINX come web server di supporto. Adesso siete pronti a pubblicare la vostra immagine su un registro pubblico o privato e distribuire la vostra applicazione su qualsiasi servizio supporti la containerizzazione.

Qui potete trovare il repo con i sorgenti.

Questo è tutto, alla prossima e buon codice!