인프런 커뮤니티 질문&답변

안녕하세요! 강의 수강해주시고, 의미있는 좋은 질문도 남겨주셔서 감사합니다.^^

인프런 AI 답변 퀄리티가.. 훌륭하네요.ㅎㅎ

제 방식대로 개념적인 부분을 추가로 설명드릴게요!

결론적으론 Ktor 뿐만 아니라 스프링에서도 같은 포트로 화면(html) 을 서빙할 수 있습니다.

짚어드리고 싶은 부분은,

리액트 서버라고 하셨는데 엄밀하게는 리액트는 자바스크립트 웹 프레임웤 에 불과합니다.

강의에서 보여드린 부분은 리액트로 만들었지만 최종 산출물인 index.html, js, css 파일을 ktor 서버가 응답할 수 있게끔 리소스 설정을 했던 것입니다~

reactjs 혹은 vuejs 같이 웹프레임웤으로 화면 개발을 할때는 live reloading 이나 여러가지 개발편의를 위해 대표적으로 3000포트로 개발서버가 띄워지게끔 되어있습니다~

강의에서는 이미 준비된 프론트 소스를 사용하기 때문에, 보여드린적이 없지만 강의 자료 준비할때는 저도 3000포트로 프론트 개발서버를 띄워놓고 개발을 했습니다.^^

이 또한 개발을 마친 후에 배포할때는 ec2와 같은 서버에 nginx 등 웹서버를 설치하고 웹서버가 index.html, javascript, css 를 서빙할 수 있게끔 경로 설정을 해 주어야 하지요. 

현재의 많은 서비스들은 화면을 서빙하는 웹서버(nginx)와 뒷단에서 json 등을 처리하는 백엔드 서버(springboot)로 아키텍쳐가 나뉘어 있는데

스프링에서 html 을 서빙하고자 한다면 springboot 가 html 및 json 모두 서빙하게끔 설정했다고 보시면 되고, 강의에서가 딱 그런 모습입니다~

저도 실무에서 일부 사내 시스템 같은 경우는 스프링에서 리액트 코드의 산출물인 index.html 을 서빙하는 구조로 만든 것 도 있습니다. (꼭 그렇게 해야할 이유가 있지않는 이상 권장하지는 않아요.^^)

안녕하세요, 인프런 AI 인턴입니다.

마틴파울러님의 질문에 대한 답변으로, Ktor와 리액트를 같은 포트에서 실행하는 설정 방법에 대한 설명이 포함된 질문이 있습니다. 이 설정을 통해 Ktor 서버를 실행할 때 리액트 애플리케이션도 함께 호스팅할 수 있어, 따로 개발 서버를 실행하지 않아도 되는 편리함을 제공합니다.

관련된 질문은 “jar 배포 시 frontend 페이지에 접속이 안되는 이슈”제목으로 토론된 바 있습니다. 질문자께서는 Ktor 서버에서 리액트 페이지에 접속이 안 되는 문제를 겪었으며, 이를 해결하기 위해 Ktor 서버 설정을 변경하여 리액트 프로젝트를 정상적으로 호스팅하는 방법을 찾았습니다.

본질적으로, Ktor 서버 설정에서 리액트 앱을 static resource로 제공함으로써 동일 포트에서의 접근이 가능해집니다. 이 과정에서 staticResources 설정을 사용하여 리액트 앱의 위치와 디폴트 파일(index.html)을 정의합니다.

이에 대한 자세한 내용은 jar 배포 시 frontend 페이지에 접속이 안되는 이슈 링크에서 다음과 같이 찾아보실 수 있습니다.

• 해결 방법 요약:
  Ktor 서버 설정에서 frontend 폴더를 staticResources로 지정함으로써 리액트 앱이 Ktor 서버와 같은 포트에서 실행되도록 설정할 수 있습니다. 이렇게 설정하면 Ktor 서버 실행 시 자동으로 리액트 앱도 함께 호스팅되어, 개발 과정이 보다 수월해집니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.