[프론트엔드 데브코스 TIL] 2023.10.26 노션클로닝

📚금일 학습 내용

노션 클로닝의 마무리, 배포
nginx에서 spa 라우팅이 되도록 해주기

📄nginx에서 배포하기

노션 클로닝 http://158.180.82.1/ 배포 주소

약 1주일 하고도 절반을 쏟은 프로젝트가 끝이 났다.
마지막 날인 오늘 PR을 작성하려고 하는데 배포를 해야했고 내가 선택한 배포는 기존에 내가 쓰고 있는 서버에 올리는 것이였다.

❗️API

첫번째 난관은 API였다. 클론했던 리포지토리에서 API주소를 참조 할 수 없다는 문제가 있었다. 원인은 .gitignore로 API주소와 키를 담은 파일이 원격 레포지토리에 없었는데 그 내용을 그대로 clone해서 올리니 일어난 문제였다.
해당 파일을 수작업으로 추가해주니..

짠 나의 페이지가 잘 나온다!! 그리고 페이지 안에서 이동도 잘 됐다. 그런데 문제는...

⛓️nginx에서의 SPA 라우팅 처리

주소가 http://158.180.82.1/documents/114310 이렇게 된 경우에 새로고침하면 에러가 났다.

원인?

원인을 찾아보니 해당 페이지에서 새로고침을 누르면 서버는 /documents/114310 에 해당하는 index.html을 리턴하고자 하는데 SPA는 최상위 index.html에서 모든 걸 처리하므로 하위 index.html 파일이 없다. 따라서 JS함수에도 라우팅 처리를 해주는 것이지만. nginx에서는 /documents/114310 에 해당하는 폴더랑 파일을 찾아봤는데 해당 하는 파일이 없다! 라고 404 오류를 건네주는 것이다. 라고 이해했다.

해결 방법

나의 경우에는 sites-available에 있는 default파일에서 아래 파일에 설정을 추가해줘서 해결했다. 아래는 기존에 있는 처리 방식이다. 말로 표현하기 조금 어렵지만 풀어보면 해당 디렉토리로 접근했을 때 파일이 없으면 404 에러를 띄운다 이다. 하지만 나는 최상위 index.html과 JS파일로 따로 라우팅 처리를 해주었기에 최상위 index.html로 접근하게 해준다면 해결되었다.

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}

위처럼 작성되어 있던 부분을 주석처리하고

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

으로 작성해서 최상단의 index.html으로 가게 해주었다. 어차피 404처리는 내가 JS파일로 따로 처리하기도 해서 문제될 건 없었다.

그렇게 해결하니 새로고침도 정상동작하는 것을 확인할 수 있었다! 아쉽게도 벨로그에 영상파일이 안올라가네..

📖소회

따로 노션 소회를 남길 예정이지만...아쉬움도 많고 잘했던 점도 많았던 프로젝트였다.
잘 했다고 생각한 점은 다음과 같다.

• 기초 코드부터 모든 걸 내 손으로 구현했다.
  지난 과제들은 기초 코드를 강사님들이 작성하신 코드를 가져와서 추가적으로 기능을 구현했다면 이번에는 처음부터 끝까지 내가 작성했다. 물론 참조는 했지만 아무것도 없는 상태에서 처음으로 모든 걸 구현해 볼 수 있었다.

• 첫날부터 시작해서 많은 걸 했다. 나름 열심히 했지만...

아쉬운 점

• 너무 달려서 마지막에 약간 번아웃? 비슷한게 왔다. 피로해서 그런지 몰라도 이번 주 월화수는 정말 이전의 작업량의 반도 안되게 못했다. contentEditable...솔직히 할 수 있었는데 컨디션 조절의 실패로 하지 못했다.
• 너무 기능구현에만 몰두해서 달렸다. 그래도 큰 구조 정도는 생각을 하고 작성하긴 했지만 내부 구조가... 내가 봐도 너무 복잡하고 불편했다.