Nginx 를 이용한 http url 별 routing 처리

https://nginx.org/en/download.html

nginx: download

Nginx plus 라는 유료 제품도 존재 한다. 

 

일단 우리는 OpenSource 버전을 이용하겠다. 

제한 사항이 많아서 만약 어느 수준 이상의 loadbalancing 이나 service mesh 가 필요하다면

Envoy 를 추천한다. 

간단한 routing 정도는 Nginx 가 상당히 편리 하다. 

 

압축을 풀고 nginx.exe 를 실행하자

nginx -s stop ( 빠른 종료 )
nginx -s quit ( 일반 종료 )
nginx -s reload ( 재기동 )
nginx -s reopen ( 로그파일 다시쓰기 시작 )

** 한글이 들어간 folder 를 사용하면 error 가 발생하니 영문으로만 이루어진 folder 를 이용하도록 하자 **

 

web brower  에서 http://localhost 를 실행해보자

성공하면 아래와 같은 page 가 뜬다. !!

아주 간단하다.

이제 이 nginx 를 이용해서 특정 url 을 판단해서 원하는 site 로 routing 하도록 할것이다. 

 

일단 기본적인 web api 를 작성하자

여기서는 aspnet net core 의 web api 를 이용해서 작성했다.

api 를 호출 하면 현재 url 을 표시하도록 만들었다. 

app.MapGet("/", (IServer server) => 
{
    var addresses = server?.Features?.Get<IServerAddressesFeature>()?.Addresses;
    return addresses;
});

 

이제 build 한 후 빌드한 folder 로 이동해서

port 를 변경해서 2 개의 api 를  Listen 하도록 실행해 보자

다음과 같이 하나의 web api 를 port 5004 번과 port 5005 번에 각각 Listen 시켰다. 

dotnet BaseWebApi.dll --urls https://localhost:5004

dotnet BaseWebApi.dll --urls https://localhost:5005

 

이제 Nginx 의 설정을 수정하여 routing 이 되는지 확인하자

지금 우리는 다음과 같이 api 가 구성되어 있다. 

 

1. https://localhost:5004

2. https://localhost:5005

 

그리고 Nginx 는 그 앞에서 port 80 을 이용하여 두개의  Port 로 data 를 routing 할 것이다.

우리는 특정 주소 체계를 이용하여 first 는 5004 로 second 는 5005 로 가도록  routing 처리할 생각이다. 

 

1. http://localhost/first ==> https://localhost:5004 

2. http://localhost/second ==> https://localhost:5005

 

이제 Nginx 가 설치된 folder 로 이동한다. 

conf/nginx.conf 를 다음과 같이 수정하자

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location /first/ {
          rewrite ^/first/(.*)$ /$1 break;
          proxy_pass https://first;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header Host $host;
    }
    location /second/ {
          rewrite ^/second/(.*)$ /$1 break;
          proxy_pass https://second;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header Host $host;
    }

    ...
}

upstream first {
        server 127.0.0.1:5004;
}
upstream second{
        server 127.0.0.1:5005;
}

자 이제 아래 명령을 통해 재기동 하자

nginx -s reload ( 재기동 )

 

web brower 에서 우리가 위에서 정의했던 시나리오 대로 동작하는지 확인해보자

1. http://localhost/first ==> https://localhost:5004

2. http://localhost/second ==> https://localhost:5005

 

localhost first 는 5004 로 이동

localhost second 는 5005 로 이동

 

우리가 원하는 데로 정확히 동작 한다.

Nginx 를 이용하면 sub domain 이나 switch  없이도 우리가 원하는 routing 을 할 수 있다. !!

 

SPA 같은 경우는 try_files 를 이용해야 한다. 

try_files 를 이용하는 경우 rewrite 가 약간 다르게 동작할 수도 있다. 

vue 에서 아주 간단한 file 을 만들고 test 를 해보면 rewrite 가 생각한 것과 다르게 동작한다. 

 

아래와 같이 rewrite 에 직접 주소를 넣어서 routing 처리 하였다. 

location / {
    try_files $uri $uri/ /index.html;
}

location /first {
 rewrite ^/first http://127.0.0.1:8081 break;
}

location /second {
  rewrite ^/second http://127.0.0.1:8080 break;
}

 

 

 

관련영상