Blazor SPA 라우팅 문제

🌐 ASP.NET, Blazor, IIS, 웹 Q&A
1

API 컨테이너, Blazor WASM 컨테이너, Nginx 리버스 프록시 서버가 있습니다.
WASM은 nginx 웹 서버 위에서 실행됩니다.
wasm과 api 는 컨테이너간 http 통신을 하고 클라이언트와의 통신은 https로 프록시 서버가 하고 있습니다.

이때 웹 페이지의 특정경로로 직접 이동하게되면 404 페이지로 이동되고 있습니다.
SPA 특성상 실제 페이지가 존재하지 않기 때문으로 알고 있는데 프록시 서버의 nginx 설정파일은 건드리지 않고 wasm의 웹서버 nginx 설정파일만 수정할 수 있을까요?
웹서버의 nginx 설정파일에서 try_files 와 index 를 index.html 로 했지만 자꾸 nginx의 404파일로 연결됩니다…

2

404 페이지를 index.html로 설정하시면 됩니다.

1 Like
3

공식은 위에대로 하면 되는거같아요

그리고 아래는 제가 저번에 테스트로 구성해봤던 파일인데 한번 적용해보구 알려주세요
index.html의 <base> 도 수정해줘야해요

server {
    listen       8088;
    listen  [::]:8088;

    location /blazor {
      alias /path/to/build;
      index index.html;
      try_files $uri $uri/ /index.html =404;
    }
            
    location /api {
      proxy_pass http://192.168.0.123:8089;
    }
}
2 Likes
4

안녕하세요.
말씀해주신 코드를 프록시서버의 nginx설정, wasm의 nginx설정 둘 중 어디에 적용해야하나요?
그리고 wasm 프로젝트의 /wwwroot/index.html에는 현재 <base href="/" />로 되어 있습니다. 이것을 <base href="/index.html" />로 수정해주면 된다는 말씀이신가요?

아래의 코드가 현재 적용되어 있는 리버스 프록시 서버의 nginx 설정 파일입니다.

upstream web {
    server web:80;
}

upstream api {
    server api:8080;
}

server {
    listen 80;
    server_name mydomain.kr;

    location ~ /.well-known/challenge {
        allow all;
        root /usr/share/nginx/html;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name mydomain.kr;

    index index.html;
    try_files $uri $uri/ /index.html;

    ssl_certificate /etc/letsencrypt/live/mydomain.kr/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mydomain.kr/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://web;
        proxy_redirect off;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    error_page 404 /index.html;
}

server {
    listen 443 ssl;
    server_name api.mydomain.kr;

    ssl_certificate /etc/letsencrypt/live/api.mydomain.kr/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/api.mydomain.kr/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        proxy_pass http://api;
        proxy_redirect off;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

}
5

아 nginx가 두개군요… 컨테이너 하나에 정적배포되었다는 가정이니 wasm쪽에 적용해볼만한 설정이네요
루트디렉토리로 운영한다면 <base>얘기는 반영하지 않아도 되구요. 그냥 공식문서대로 =404 만 추가하면 되지않을까 싶네용.
갠적인 생각으로는 어차피 컨테이너들 가지고 운영되는데 blazor wasm쪽은 그냥 자체kestrel로 띄우고 연동하는게 더 간단하지않을까요

6

=404 만 추가했을 때는 502 게이트웨이 에러가 뜨고 있습니다…
wasm 서버의 nginx설정파일입니다.

server {
    listen 80;

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

    types {
        application/wasm wasm;
    }

    error_page 404 /index.html;
}
7

행간에 드러난 개념들이 제가 알고 있는 것과 많이 다른 것 같습니다.

wasm 은 서버에서 실행되지 않고, 브라우저 UI 스레드에서 실행됩니다.
따라서, 컨테이너 간 Http 통신이 일어날 일이 없겠죠.

아무래도, wasm(에 기반한 SPA) 앱을 정적 호스팅하는 서버 앱을 컨테이너에서 실행하고, Nginx 가 리버스 프록시로 동작하도록 설정하시는 것 같은데, 이 때에도 언급된 통신은 일어나지 않습니다.

와즘앱을 Nginx 에서 바로 정적 서빙하는 간편한 방법 대신, 굳이 복잡하게 하는 이유라도 있는지요?

참고로, Nginx 가 직접 정적 서빙하도록 설정하는 방법은 아래 글 참조하세요.

Hosting Blazor WebAssembly in Nginx

첨언하자면, 블레이저 웹어셈블리 앱 실행을 위해 다운로드되는 파일 용량이 보통 0~00 MB 에 달해서, 주소에 접속만 해도 소진되는 대역폭이 상당합니다.

뭔 놈의 크롤링이 그렇게 많은 지, 2MB 짜리 앱에 사용자도 없는데, 월 20GB 대역폭이 소진되더군요.

그런 이유로, 저는 와즘앱은 CDN 에 배포하는 것을 기본 원칙으로 하고 있습니다. 요즘 CDN 은 별 설정을 하지 않아도 404 에러는 나지 않아, 기계적으로 배포 빌드 => 업로드만 하고 있었네요. ^^

4 Likes