Nginx 에 vue 배포 설정하기

오늘은 Amazon 서버에 nginx를 인스톨하고 vue project 를 포팅해보았습니다.
생각보다 좀 좌충우돌했어요.
linux 의 일반 폴더 위치에 dist 폴더를 올려놓았는데 인식을 안 하더라구요.

기본적으로 nginx를 인스톨하면 화면에 이런 문구가 나옵니다.

This is the default index.html page that is distributed with nginx on Red Hat Enterprise Linux. It is located in /usr/share/nginx/html.

You should now put your content in a location of your choice and edit the root configuration directive in the nginx configuration file /etc/nginx/nginx.conf.

아무리해도 계속 500 error가 나서 vuejs 프로젝트 자체가 static 속성을 가지고 있기에 위의 문구에 있는 폴더경로에 파일을 이동해서 
인식을 시켜주니 화면이 나오더라구요. 이건 제가 좀 더 찾아봐야할것 같습니다.

반응형

그리고 nginx conf에 설정하는 방법입니다.

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

HTML5 History Mode | Vue Router

공식사이트에 있는 내용을 참고해보시면 되시구요.
Ngnix  

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

위와같이 설정을 하니 정상적으로 되더군요. ^^

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html/dist; 
        index index.html
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

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

제가 서버에 설정한 내용입니다.
참고해서 설정하시면 될것같습니다. 
연휴지만 오늘도 하나 배웁니다.
아마도 이 부분은 아마존 서버의 기본 계정과 root계정때문에 생겨난 문제 같습니다.
혹시라도 더 좋은 의견있으시면 댓글 부탁드립니다.