[nginx] 기초적인 proxying 방법

nginx에 대해서는 https://drspace.tistory.com/249 이 글에서 간략히 개념을 배워본 적이 있다. 수업을 듣다가 웹 서버라는 단어가 나와서 정리한 거다.
싸피에서 프로젝트를 할 때는 nginx 설정은 백엔드 팀원들이 거의 해서 다뤄 볼 기회가 없었는데, 직접 nginx 설정을 해 볼 기회가 생겨서 그 과정을 정리해본다.

 

1. 사용 목적

 

마이그레이션이 필요한 워드프레스 웹사이트가 404 에러를 뱉어낼 경우 원래는 워드프레스 상에 위치한 404.html 파일을 유저에게 보여줬었다. 이 설정은 nginx.conf 파일에 되어 있었다. 404 에러를 만날 경우 폴백 함수로 보낸 후, 일관된 URL 처리를 위해 불필요한 slash를 제거하고 대문자는 소문자로 모두 바꾼 후 /404.html을 보여주는 식이었다.

 

그런데 이 웹사이트를 Next.js - StoryBlok 기반 웹사이트로 마이그레이션 하면서 404.html 파일은 제거되고 Next.js 프로젝트에 새로운 404 페이지가 만들어지게 되었다. 그리고 유저가 404 에러를 만나면 새 404 페이지로 사용자로 인도해야 했다.

 

이런 proxying 작업이 필요했던 이유는 아직 워드프레스가 서빙하는 페이지들도 있기 때문에 유저들의 요청을 두 곳 모두에서 탐색해야 했기 때문이다.

 

2. 'location': URL을 조작할 때 사용하는 블록

 

nginx는 어떤 언어도 아닌 고유한 명령어들을 가지고 설정을 구성한다.

    location @fallback {
    	...
    }

 

location은 어떤 URL을 이 안에서 조작하고 싶을 때 사용한다.

 

location 뒤에는 URL, 정규식 형태의 URL, @ 등이 올 수 있다.

 

골뱅이 뒤의 단어는 URL과 관련이 없는 로직에서 마치 연결고리처럼 활용된다. 예를 들어 '404 에러를 만났을 때 @fallback으로 이동하라'고 지시할 수 있다.

 

3. 'proxy_set_header [헤더이름] [헤더내용]:  

 

    location @fallback {
		proxy_set_header Host [타겟 호스트];	
        ...
    }

 

 

proxy_set_header는 말 그대로 proxying 과정에서 필요할 헤더를 설정하는 명령어다. 내 목적은 원 URL(워드프레스)를 타겟 URL(Next.js 사이트)로 proxying하는 것이기 때문에, Next.js 사이트의 호스트 주소를 적어주면 된다.

 

당연히 Host 헤더 외에도 내 시스템에서 필요한 여러 헤더들을 설정해주면 된다.

 

4. 'rewrite ^ [타겟 경로]': 모든 요청을 타겟 경로로 재작성한다.

 

    location @fallback {
		proxy_set_header Host [타겟 호스트];	
        rewrite ^ /404 break;
        ...
    }

 

 

이제 사용자가 입력한 경로를 /404 페이지로 바꿔치기 할 차례다.

 

rewrite 명령어를 사용해 모든 경로(^)를 /404로 재작성한 후, break 명령어를 사용해 추가적인 재작성은 없도록 한다.

 

모든 경로를 재작성하는 이유는 이 location 블록에 들어오는 모든 요청들은 이미 404 판정을 받은 것들이기 때문이다.

 

5. 'proxy_pass [타겟 Host]' 사용자를 '[타겟 host]/404'로 보낸다.

 

    location @fallback {
        proxy_set_header Host [타겟 호스트];	
        rewrite ^ /404 break;
        
        proxy_pass [타겟 호스트];
    }

 

 

마지막으로 proxy_pass를 통해 유저를 [타겟 호스트]/404 페이지로 보내주면 proxying 작업이 끝난다.

 

사진: Unsplash 의 Nikolay Vorobyev