Build 이후 흰 화면만 나오는 이유 (로컬 index.html 안열리는 이유, react-router, 파일 프로토콜, http 프로토콜)

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

 

이유를 알기 위해서는 생각보다 조금 더 깊게 학습이 필요했다.

package.json에 homepage : "." 코드 한줄만 추가한다고 되는 게 아니었다. (사실, 이 건 필요가 없었다.)

 

cli에서 빌드를 마치고 serve를 설치한 이후에 다음 명령어를 실행을 했어야 했는데, serve -s build

그 이유는 build시에 server에 대한 패키지는 빼고 빌드되기 때문이었다.  (이렇게 static server를 안켜고 동작하기 위해서는 express 를 사용해야 한다)

$ yarn build
$ yarn global add serve
$ serve -s build

 

yarn start를 하면, 내부적으로 build한 이후에 이 build한 static 파일들 (index.html 외 css/js 파일들로 빌드된 파일들)을 서버 상에서 구동을 시켜준다.

node_modules > react_scripts 내부에 정의된 파일을 보면 알 수 있다. 

start.js 파일을 보면 좀 더 자세하게 알 수 있다.

 

왜 로컬 브라우저 환경에서 그대로 실행했을 때와, 로컬 서버에서 작동하는 것이 다른 동작결과를 하는지 정확한 이유는 아직 탐색 중이다.

확실한 답변은 찾아내지 못했다.

 

2021.09.16 추가

결국 찾아낸 원인은 CORS이슈다. 쉽게 설명하면, 다른 사람들이 자유롭게 resource 사용을 하지 못하도록 막는 기능이다. 그런데, file을 브라우저로 직접 열면, http 프로토콜로 작동을 안하기 때문에 HTTP header 에서 접근을 허용하지 않는다.  이게 본질적인 이슈다.

 

Cross-Origin Resource Sharing(CORS)은 추가적인 HTTP header를 사용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘을 말합니다. 하지만 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용된다.

 

그래서 따로 운영 중인 서버에 react로 빌드된 파일들을 넣어봤다. 그런데 여전히 안된다.

이유는 react-router 매칭 문제.

www.xxxx.com/  <--- 여기까지의 경로가 react router / <-- 요기가 매칭되는 경로다.  정확히 얘기하면 com 뒤에 붙는 / 가 리액트 라우터의 아래 부분이다.

    <Route
          exact
          path="/"

그런데 나는 www.com/xxx/index.html 을 연들.. 매칭되는 게 없어서 렌더링 되는 것이 실패된다.

결국 매칭되게끔 root 도메인에 설정을 하면 열리게 된다.

 

추가적인 생각

만약 CORS가 없다면 어떻게 되나?

-> 로컬에 index.html 다운로드 받아서 로컬에서도 마구잡이로 호출하면서 자유롭게 사용할거다. 이러면, 통제가 불가능한 상황이 연출된다. 로컬에 이동된다는 것은 조작에 대한 통제가 불가능하다는 것을 의미한다. 

 

결론 :

사실, 몇 일동안 계속 헤맸다.  덕분에 라우터의 기능도 좀 더 정확히 이해할 수 있게 되었고, CORS라는 것도 얕게라도 이해할 수 있게 된 것 같다.  그리고 동작하는 프로토콜의 차이로 인한 현상에 대해서도 좀 더 이해할 수 있었다.

 

참조 :

CORS 무엇? https://hannut91.github.io/blogs/infra/cors

http 프로토콜 & file 프로토콜 https://sanghaklee.tistory.com/66

내 컴퓨터를 서버로 https://brunch.co.kr/@writeraaa/122

[React] React 기본적인 구조  https://araikuma.tistory.com/486

create-react-app에서 react가 실행되는 기본 흐름 https://velog.io/@cjy9306/create-react-app%EC%97%90%EC%84%9C-react%EA%B0%80-%EC%8B%A4%ED%96%89%EB%90%98%EB%8A%94-%EA%B8%B0%EB%B3%B8-%EC%9B%90%EB%A6%AC-yjk56rqzlk

[serve] 간단한 웹서버 실행하기  https://cpdev.tistory.com/30

npm 명령어  https://www.zerocho.com/category/NodeJS/post/58285e4840a6d700184ebd87

 

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding