TIL - nginx 라우팅에 대하여 알아보자

PINOT·2020년 2월 3일
7

개발 이야기

목록 보기
2/4

nginx의 /etc/nginx/sites-available/default라는 파일로 들어오는 도메인에 따라 자동적으로 라우팅을 할 수 있게 만드는 방법을 알게 되어, 이렇게 정리하고자 합니다.

웹서버의 라우팅이란?

더욱 직관적으로 웹서버 라우팅에 대해 알기 위해, 간단한 상황극을 예시로 들어보도록 합시다.

예시 1

이용자 A : https://blog.kimwol.me로 저를 보내주세요!
서버 : https://blog.kimwol.mehttps://velog.io/@pinot로 이동시켜야 하는 규칙이 있네! 리다이렉트를 사용하여 velog로 이동시키자!

예시 2

이용자 B : 저는 http://kimwol.me 로 가고 싶어요!
서버 : http 메소드로 시작하네? 먼저 규칙에 따라 https로 리다이렉트 시키고, http://localhost:3000 으로 프록시를 사용하여 이동시키자!

이와 같이 웹서버 포트포워딩은, 사용자가 요청한 링크에 대하여 웹서버가 사전에 정의된 내용에 따라 유저를 이동시키는 것을 뜻합니다.

nginx에서는 어떻게 라우팅을 하는가?

nginx에서는 /etc/nginx/sites-available/ 폴더 내에 있는 default 파일을 기준으로 라우팅을 하게 됩니다.

물론, default 파일만 적용되는 것은 아니고, 다른 파일을 만들어 sites-enabled에 심볼릭 링크1)를 만들어 적용할 수도 있습니다.

스크린샷 2020-02-04 오전 2.51.32.png
/sites-enabled 폴더 내에 default 심볼릭 링크가 지정된 모습

라우팅 코드를 작성해 보자

이번 TIL에서는, 심볼릭 링크 파일을 따로 만들지 않고, default 파일만을 사용하여 라우팅을 구현해 보겠습니다.

# static.kimwol.me (정적 파일 호스팅)
server {
	listen 443;
	server_name https://static.kimwol.me;
    
    # SSL 인증서 내용
    
    root /var/www/html/static/;
    index index.html;

	location / {
    	try_files $uri $uri/ =404;
	}
}

위 코드는 곧 제 홈페이지에 적용될 라우터 코드중 일부인데요, 이 코드를 기준으로 한번 찬찬히 분석해 보도록 하겠습니다.

코드 블럭 작성

  • server {} : 도메인 단위의 1차 라우팅 (https://kimwol.me이 이에 해당합니다.)
  • location {} : 도메인 내부의 2차 라우팅 (https://kimwol.me/domain이 location 라우팅에 해당합니다.)

server 블럭 내 구문들

  • server_name : server 블록에서 어떤 도메인을 라우팅 할 것인가가 이에 해당합니다.
  • access_log / error_log : 서버에 대한 로그를 남깁니다.
  • root : server_name에 해당하는 도메인이 있을 때, root 폴더를 지정할 수 있습니다. reverse forwading의 경우 생략됩니다.
  • index : 어떤 파일을 index 파일로 지정할 것인가를 설정합니다. reverse forwading의 경우 생략됩니다.

location 블럭 내 구문들

  • try_files $uri $uri/ =404; : nginx는 정적 파일 호스팅을 기본적으로 지원하지 않기에, root 폴더 내에 uri 에 따른 폴더가 있는지 찾아보고, 만약 없다면 404 에러를 보여줍니다.
  • return : 위 코드에는 적용되어 있지 않지만, http 메소드로 리턴해주는 기능입니다. return 301 https://google.com 의 형식으로 작성한다면, google.com으로 리다이렉트 되겠죠?

기타 내용들

  • # : 주석

기본 라우팅 설정

nginx 라우팅에서 ip에 연결은 되어 있지만, 정체를 알 수 없는 도메인이 들어왔을 때, 기본적으로 포워딩 하는 기능입니다. (switch 문의 default를 생각하면 편해요.)

앞서 보여드린 코드에서 한줄만 더 추가하시면 됩니다.

# default_server (정적 파일 호스팅)
server {
	listen 443;
	server_name default_server;
    
    # SSL 인증서 내용
    
    root /var/www/html/default/;
    index index.html;

	location / {
    	try_files $uri $uri/ =404;
	}
}

무엇이 달라졌는지 눈치 채셨나요?
바로 server_name 부분의 내용이 default_server로 변경된 것인데요. 이 코드를 추가 함으로써 우리는 예외적인 처리도 가능하게끔 만들었습니다.

이상 오늘의 TIL - nginx 라우팅에 대하여 알아보자를 마치도록 하겠습니다.

== 2020. 02. 07 ==
React-Router-Dom 라이브러리를 사용하는 경우, index를 제외한 모든 페이지를 찾을 수 없는 오류가 발생합니다.
이때 참고 하시라고 React 전용 코드를 남겨드립니다 :)

# react.kimwol.me (React 호스팅)
server {
	listen 443;
	server_name https://react.kimwol.me;
    
    # SSL 인증서 내용
    
    root /var/www/html/static/;
    index index.html;

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

참고한 글


1) : 특정 파일이나 디렉토리에 대하여 참조를 하는 방식입니다. In -s 명령어를 사용하여 심볼릭 링크 파일을 만들 수 있습니다.

profile
프론트엔드 개발자

4개의 댓글

comment-user-thumbnail
2020년 8월 3일

좋은 글 잘 읽었습니다

답글 달기
comment-user-thumbnail
2021년 1월 6일

안녕하세요 React-Router-Dom을 사용했을때의 다른 페이지를 찾을수 없는 오류에대해선 올려주신 코드를 사용해서 해결했습니다.
하지만 특정 페이지( http://domain.com/test1/test2 ) 로 이동후 새로고침을 하게되면 500 Internal Server Error 가 발생하게되는데 어떤 부분을 고쳐야할까요..?

1개의 답글
comment-user-thumbnail
2021년 4월 28일

"nginx는 정적 파일 호스팅을 기본적으로 지원하지 않기에, root 폴더 내에 uri 에 따른 폴더가 있는지 찾아보고, 만약 없다면 404 에러를 보여줍니다." 라는 내용이 있는데, 동적 파일 호스팅을 지원하지 않는 것 아닌가요??

답글 달기