nginx에 웹서버 띄우기(spa)

자바스크립트로 개발하는 분들이라면 보통 서버는 express를 사용한다. express는 어차피 http모듈로 만들어 진것이고 koa나 다른 프레임워크등도 비슷하다. 즉 서버를 띄우는데 아무런 문제가 없다. 그런데 프론트는 조금 얘기가 다르다. 아파치나 nginx같은 서버를 따로 만들어야 한다. 세부적인 설정까지 하면 어렵겠지만 사용법자체는 어렵지 않다.

 일단은 설치를 한다. mac이라면 brew install nginx를 이용하고 윈도우라면 공식 홈페이지에서 설치하면 된다.

(ubuntu sudo apt install nginx) 그리고 원하는 프론트 파일들을 /var/www/html 폴더에 넣으면 끝이다. 웹팩으로 빌드를 했다면 sudo cp -r dist/* /var/www/html/ 이런 명령어로 복사하면 된다. nginx로 간단히 서버를 킬 수 있고 nginx restart로 재시작할 수 있다. vi /etc/nginx/sites-available/default 를 입력하고 location에

        location ~ ^/* {
                index  index.html;
                try_files $uri /index.html;
        }

 이 코드를 입력하면 모든 엔트리포인트를 index로 보내준다. 필요한 경로에따라 특정 파일을 보여줄 수도 있다. 나는 404처리를 프론트에서 했기 때문에 모든 경로를 index로 보내줬다.

 

지금은 아래 설정을 사용중

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

 

root /var/ww/html경로를 바꾸면 더 편하다.(참고)