nginx simple spa setup (no proxy setup)

nginx-simple-spa-setup

server {
  listen 80 default_server;
  
  server_name example.co.kr;
  if ($http_x_forwarded_proto = 'http') {
    return 301 https://example.co.kr$request_uri;
  }
  
  location / {
    root /home/ubuntu/project/public;
    tryfiles $uri $uri/ /index.html;
  }
  
  location ~$ /modules/ {
    #alias /home/ubuntu/project/modules/; <- DO NOT USE THIS OPTION
    root /home/ubuntu/project;
  }
  
  location /fonts {
    alias /home/ubuntu/project/public/lib/font-awesome/fonts;
  }
}

location / {
  tryfiles $uri $uri/ index.html
}

URI를 통한 모든 접근은 index.html을 전달해준다. 예를 들어, 404와 같은 페이지는 클라이언트 환경에서 처리한다.

location ~$ /modules/ {
  #alias /home/ubuntu/project/modules/; <- DO NOT USE THIS OPTION
  root /home/ubuntu/project;
}

/modules/으로 시작하는 static resource의 경우 public 폴더 내부가 아닌 상위 폴더의 modules에서 찾는다.
root가 아닌 alias를 사용할 경우 301 HTTP response가 오고 다시 브라우저에서 resource를 가져오려할 때 HTTP request URI의 끝에
/ (trailing slash)가 붙게되어 제대로 가져올 수 없게 되므로 root를 사용하자.
처음 폴더 구조를 잘못 잡았을 때만 임시적으로 사용하고 static assets의 경우 public 폴더 내부에 위치하는 것이 옳다.

location /fonts {
  alias /home/ubuntu/project/public/lib/font-awesome/fonts;
}

fonts의 경우 font-awesome에 의해 node_modules/font-awesome 폴더 내부에 존재하는 font를 가져오려할 때
해당 경로를 알맞게 지정해주는 역할을 한다.