모바일, PC 화면 Nginx로 분기 처리하는 방법

PC화면, 모바일 화면 이렇게 다르게 redirect 하기

위의 네이버 화면 처럼, 접속하는 디바이스에 따라 모바일, PC 화면으로 분기 처리를 해야함!

Proxy로 사용되는 Nginx로 해보자!

어떻게? 

• error page
• named location 
• header에 있는 user-agent 를 기반으로 분기 처리

error page 란? 

• 에러가 발생한 요청을 지정한 uri로 redirect 하는 nginx module 
• 400대 에러나 500대 에러의 redirect 설정을 하기 위해 보통 사용!
• →  하지만! 이미 사용하고있는 에러코드를 덮어쓸수는 없으니, error code 418을 사용해서 PC,mobile 분기 처리를 하도록 하겠다! 
  • 418 에러코드가 뭐지?? 
    
    • client error 응답 코드로 서버가 커피 내리기를 거부한다는 의미를 가진다 - 왜냐면 서버는 찻주전자(teapot) 니까! 
    • 딱히 의미없는 에러코드임...😂
    • 1998년과 2014년 만우절에 인용됨 
    • `딱히 의미없는 에러 코드니까 분기 처리 하는 용도로 딱!`

error_page 404       /not_found.html; 
error_page 500      /50x.html;

named location 이란? 

• `@location` = named location 
• named location은 해당 `location` 에 진입하기 전까지의 $uri 값을 보존함 
• error_page, post_action 그리고 try_files로만 사용 가능
• → 여기서는 error_page 를 지정한 location block으로 요청이 가게끔 해주는 역할을 함! 

user-agent 란? 

• request header 값으로 서버에게 현재 접속하는 개체의 정보를 표현한다. 주로 application, operating system, vendor 등의 정보를 표시!
• →  이 값을 기준으로 nginx 에서 분기 처리를 할 것!

nginx 설정: mobile, pc 분기 처리 

set $rewrite_rule MOBILEWEB;
if ($http_user_agent ~* 구분값) {
    set $rewrite_rule WEBVIEW;
}
if ($rewrite_rule = MOBILEWEB) {
    return 418;
}

• rewrite_rule 이라는 nginx 변수를 설정한다
  • default 값은 MOBILEWEB 으로 redirect 되도록 설정  
• user_agent에 mobile과 pc를 구분할 수 있는 값을 condition으로 설정한다  `구분값` 
  • ex) iPhone, Mac OS 등

이제 mobile, pc 를 위한 분기처리 설정은 되었다!

nginx 설정: error page + named location!

error_page 418 = @mobileweb;
recursive_error_pages on;

location @mobileweb {
    access_log 로그경로;
    root target_디렉토리;
    try_files $uri /index.html;
}

• error_page에서 설정한 named location ( @으로 정의한 값) 로 해당 request를 전달하도록 설정
• 위에서 설정한 error code 418이 떨어지는 경우에, 정의한 @mobileweb location block으로 request가 실행되도록 함!

종합해보면..

# eror_page, 에러코드, nginx variable 설정 
error_page 418 = @mobileweb;
recursive_error_pages on;
set $rewrite_rule MOBILEWEB;

# 분기처리 
if ($http_user_agent ~* 구분값) {
    set $rewrite_rule WEBVIEW;
}
if ($rewrite_rule = MOBILEWEB) {
    return 418;
}

# 요청을 원하는 곳으로! 
location @mobileweb {
    access_log 로그경로;
    root target_디렉토리;
    try_files $uri /index.html;
}

참고

• 418 error code: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418
• nginx erorr page: http://nginx.org/en/docs/http/ngx_http_core_module.html#error_page
• nginx named location: https://serverfault.com/questions/509327/can-we-jump-to-another-location-from-a-location-in-nginx