[Devops] SPA에서의 nginx세팅 (백엔드 서버와 같은 domain)

SPA 환경에서 백엔드 서버와 동일한 도메인을 사용할 때의 Nginx 설정 방법을 소개합니다.

(이전) 포트폴리오 페이지를 리뉴얼하면서, 일반적인 html / css / js 구조에서 Vue를 사용한 SPA로 구조가 바뀌었다.

다만 일부분의 url 에 대해서는 백엔드 서버와 통신하기 때문에, 항상 Application Layer 에서 /index.html 로 보내주면 에러가 발생한다.

이를 분기 처리한 nginx conf 파일은 다음과 같다.

server {

    listen 80;

    server_name www.kimheejae.com kimheejae.com;



    location / {

        root  /home/ubuntu/portfolio_ver2/client;

        try_files $uri $uri/ /index.html;

    }



    location /css{

        root /home/ubuntu/portfolio_ver2/client;



    }

    location /js{

        root /home/ubuntu/portfolio_ver2/client;

    }

    location /tinymce_assets{

        root /home/ubuntu/portfolio_ver2/api/current/public;

    }



    location /assets{

        root /home/ubuntu/portfolio_ver2/api/current/public;

    }



    location /admin{

        root /home/ubuntu/portfolio_ver2/api/current/public;

    }



    location /api{

        root /home/ubuntu/portfolio_ver2/api/current/public;

    }

    location /uploads{

        root /home/ubuntu/portfolio_ver2/api/current/public;

    }

    # Turn on Passenger

    passenger_enabled on;

    passenger_ruby /home/ubuntu/.rbenv/versions/2.4.2/bin/ruby;



    client_max_body_size 200M;

}

이것도 읽어보세요