Membungkus Blazor Web Assembly di dalam Docker Container

Langkah singkat membungkus Blazor Web Assembly

Persiapan

Siapkan dahulu alat-alat berikut ini:

Persiapan Proyek

Pastikan sudah memiliki proyek Blazor Web Assembly. Jika sudah memiliki proyek berbasis Blazor Web Assembly boleh skip ke bagian selanjutnya.

Membuka terminal dan pastikan sudah pada folder atau direktori yang diinginkan.
Membuat proyek dengan perintah berikut: dotnet new blazorwasm -o TestBlazorDocker
Pindah direktori ke TestBlazorDocker. Contoh perintah: cd TestBlazorDocker.
Pastikan bisa di-build. Perintah: dotnet build

Menulis Dockerfile

FROM mcr.microsoft.com/dotnet/sdk:6.0-alpine3.18 as build
WORKDIR /app
COPY . .
RUN dotnet publish -o wasm-published

FROM nginx:1.25-alpine
COPY --from=build /app/wasm-published/wwwroot /usr/share/nginx/html

Mari saya jelaskan satu per satu.

FROM mcr.microsoft.com/dotnet/sdk:6.0-alpine3.18 as build , nah jadi saya menggunakan multi-stages build. Ini memungkinkan saya untuk mem-build menggunakan Docker. Jadi, ada 2 alternatif untuk build: build pada lingkungan Docker atau di luarnya. Namun, jika di luar Docker, perintahnya cukup copy ke nginx.
Saya set working directory ke /app untuk memudahkan saya mengambil hasil build-nya.
Saya copy keseluruhan proyek untuk membuat data-data yang siap dipakai.
Saya menjalankan dotnet publish untuk membuat file-file yang sudah siap dipakai oleh server untuk menampilkan file-nya.
FROM nginx:1.25-alpine, nah saya menggunakan NGINX versi 1.25. Ingat, best-practice dalam penggunaan Docker Image adalah menggunakan versi yang sudah khusus atau tertentu, jadi saat build lagi tidak tiba-tiba menggunakan versi terbaru yang memungkinkan adanya major changes atau breaking changes.
Terakhir adalah saya cukup memasukkan file-filenya ke /usr/share/nginx/html. Simpel kan. :) Karena kita menggunakan nginx, jadi yang kita butuhkan hanya file di _wwwroot _saja.

Jika tertarik dengan Github Repositori yang digunakan, bisa kunjungi laman ini.

GitHub - berviantoleo/TestBlazorDocker: TestBlazorDocker

Coba Build & Run

Mari kita coba. :)

docker build . -t blazor-test. Karena ini hanya test, kita boleh menggunakan tag latest. Tapi, disarankan pakai tag tertentu biar mudah membedakannya.
docker run -p 8000:80 -rm blazor-test. Teman-teman bisa memodifikasi port-nya misalkan mau port 9000, jadi seperti ini -p 9000:80. Saya tambahkan -rm jadi setelah keluar dari command-nya otomatis akan dihapuskan containernya dan berhenti.
Coba buka localhost:8000 (sesuaikan tadi port berapa ya).

Tampilan Awal Blazor

Counter Blazor

Jika sudah muncul aplikasi Blazor Web Assembly Anda, maka sudah berhasil. :)

Photo by Samuel Regan-Asante on Unsplash

Referensi

Jadi, cukup mudah ya men-deploy aplikasi Blazor Web Assembly ke Docker. Sebagai referensi, sebenarnya bukan cuman ke Docker loh, ada banyak alternatif lainnya. Nah, bisa coba cek di sini, tapi berbahasa Inggris. Jika ada permintaan untuk media lainnya juga boleh kok. Namun, saya harap kita bisa fokus pada aplikasi-aplikasi yang mau di-deploy ke Docker ya.

Pastikan juga sudah mengecek bagian NGINX-ya, karena ada konfigurasi khusus terutama jika menggunakan SignalR.

Tambahan (Rewrite Rule)

Nah, kalau teman-teman eksplorasi lebih jauh, teman-teman tidak bisa langsung menuliskan /counter dan akan memberikan 404. Nah, ini kenapa? Karena pada dasarnya NGINX akan mencari file /counter ini, namun karena ini SPA (Single Page Application), kita hanya memiliki index.html. Loh, terus solusinya apa? Nah, ini solusinya akan sama dengan SPA lainnya, yaitu menuliskan rewrite rule. Loh, itu gimana? Coba simak bagian bawah ini.

user nginx;
worker_processes 1;
error_log stderr;
pid /var/run/nginx.pid;
events {
  worker_connections 1024;
}
http {
  include /etc/nginx/mime.types;
  server {
      listen 80;
      listen [::]:80;
      server_name localhost;

      location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html =404;
      }
  }
  default_type application/octet-stream;
  log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log /dev/stdout;
  server_tokens off; # Hide nginx version in Server header & page footers
  sendfile on;
  keepalive_timeout 65;

  include /etc/nginx/conf.d/*.conf;

}

Kamu cukup fokus ke bagian location / dan try_files, konfigurasi tersebut mencoba index.html sebelum mengeluarkan halaman 404.

Setelah konfigurasi siap, update Dockerfile.

FROM mcr.microsoft.com/dotnet/sdk:6.0-alpine3.18 as build
WORKDIR /app
COPY . .
RUN dotnet publish -o wasm-published

FROM nginx:1.25-alpine
COPY --from=build /app/wasm-published/wwwroot /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

Jangan lupa build lagi image-nya dan mari mencoba run lagi. Nanti kamu bisa coba langsung localhost:8000/counter. Langsung akan diarahkan ke halaman yang sesuai. :)

Terima Kasih

Terima kasih banyak sudah membaca artikel singkat ini. Semoga bermanfaat dan jika ada pertanyaan, jangan sungkan untuk bertanya! Mari bereksplorasi bersama.

Photo by Pete Pedroza on Unsplash

Bervianto Leo Pratama @berviantoleo