지인의 의뢰로 웹사이트를 제작했는데..
새로고침이 안되는 웹사이트?
리액트 빌드 이후 시놀로지 나스로 배포했다. 전에 바닐라 js로 만든 사이트도 배포한 경험이 있어 어렵지 않을줄 알았는데, 루트 ('/') 페이지 이외의 페이지에서 새로고침을 하면 404오류가 떴다.
간단한 원인
머릿속에 이런 상황은 react-router 때문이라는 기억이 캐싱 되어있었나보다. 관련 내용을 빠르게 구글링했다.
모든 요청에 대해 nginx(엔진 X라고 읽음) 서버가 index.html 파일을 보내주도록 하면 되는 문제였다. 일단 index.html을 보내고 뒷일은 react-router에게 맡기면 된다.
그럼 nginx 서버에서 무조건 index.html을 보내주려면 어떻게 해야할까?
해결방안-비추천
nginx의 경우 해결 방법
nginx.conf 의 sites-available에서 default 로 설정된 server block 내에 location / 블록을 추가해주면 됩니다.
자세한 설명은 nginx 에서 다루고 있습니다.
location / { try_files $uri $uri/ /index.html; }
nginx.conf 라는 설정 파일을 수정하면 된다고 하는데.. 해본결과 시놀로지 나스는 서버 재시작, 펌웨어 업데이트 등등 설정 nginx.conf가 종종 초기화 되버린다고 한다. 그래서 user.conf라는 파일을 새로 만들어서 include 해주는 작업등이 필요한데 이게 DSM 펌웨어 버전마다 다른지 정말 어려움이 많았다. 예를 들자면 명령어라던가 폴더 경로라던가. 그래서 conf 파일을 수정하는 방법은 비추천한다. 만약 이 방법도 잘 된다면 쓰지 않을 이유는 없긴하다.
해결방안-추천
위의 비추천 방법이 잘 되지 않아서 나스의 Web Station 패키지 설정을 이것저것 만지다 보니 오류 페이지 설정 이라는 메뉴를 보게 되었다.
이것을 본 나는 한가지 생각을 해냈다. 어차피 모든 세부 페이지에서 새로고침을 하면 404 오류가 뜨기 때문에, 오류시 뜨는 페이지를 index.html로 고정하면 될 것 같았다.
그래서 실제로 그렇게 설정했고 동작했다..!
느낀 점
이번 프로젝트를 하며 이번 글에서 다룬 404 에러 말고도 배포단계에서만 만날 수 있는 각종 문제들이 많았다. 예를 들자면 브라우저 캐시로 인해 업데이트가 안된다던가, 리눅스는 윈도우와 다르게 대소문자 구별을 해서 파일 인식을 못했다던가.
좋은 개발자가 되려면 코드의 품질도 중요하겠지만 이러한 종류의 기술적인 문제(기술적인 문제라고 부르는게 맞는지는 모르겠다)도 해결하는 능력도 중요하겠구나 라는걸 느꼈다. 그 문제 해결 능력은 경험으로부터 온다고 생각하고 있기 때문에 다양한 경험을 편식하지 않고 온몸으로 맞아야겠다!
