인프런 커뮤니티 질문&답변
작성한 질문수
Spring boot + Vue 배포
작성
·
3.1K
0
당연히 구글링 해보셨져? 원하는 결과를 못찾으셨나요? 어떤 검색어를 입력했는지 알려주세요.
문제가 발생한 코드(프로젝트)를 Github에 올리시고 링크를 알려주세요.
안녕하세요! 강의 보면서 저만의 프로젝트를 열심히 만들어보고 있습니다.
다름이 아니라 호돌맨님 프로젝트와 비슷하게 프로젝트 폴더 아래 front와 src (Springboot)가 따로 있는 상황이어서 인터넷을 찾아보며 vue build 결과물 (dist 폴더)를 src/main/resources/static/ 에 넣고 배포하는 식으로 진행해보았습니다.
위 처럼 했을 때는 5173 => 8080 이 서로 통신하는게 아닌게 되버린 것인지 Vue에서 작성했던 코드들이 정상적으로 작동하지 않아 문제를 겪고있습니다.
그 외에도 다른 글들을 참고하면서 build를 해보면 build 과정에서 오류가 발생하는 상황입니다.
제대로 동작하게 배포를 하고 싶은데,
vue 부분을 따로 배포하는 것 말고는 방법이 없을까요?
좀 오랫동안 삽질하게 되어 질문드립니다...
방향이나 참고할만한 내용이 있을까요...?
git - https://github.com/ppusda/NyangMunity
답변 2
4
안녕하세요. 호돌맨입니다.
저는 운영에서 빌드시
npm run build 를 통해 spring의 static 폴더로 vue 결과물을 이동 시키고
./gradlew build 를 하여 jar로 만듭니다.
그리고나서 최종적으로 jar를 실행하면 당연히 스프링서버 포트인 8080에서 모든 페이지가 작동하게됩니다.
그러므로 로컬에서 개발할때 vue 포트였던 5173은 필요없어지게 됩니다.
감사합니다.
안녕하세요
댓글 달았던 것 처럼 url 문제인 것 같은데 제자리 걸음이네요,,,ㅠㅠ
vue 안의 vite.config.ts 에서 proxy 부분에서 제대로 처리를 못하는 느낌입니다.
http://localhost:8080/boards?page=1&size=5 위와 같이 서버로 보내는 요청은 정상적으로 받는 것 같은데, 실제로 axios에서 요청을 보낼 때는 /nm/boards?page=1&size=5 로 보내게 되서 기능이 정상적으로 작동하지 않는 것으로 추측되는데... proxy 설정을 아무리 건드려봐도 해결이 잘안됩니다...ㅠㅠ
그외에도 http://localhost:8080/boards 처럼 route된 버튼을 통해가 아닌 url로 직접 접속하는 경우에도 404로 넘어간다던가,
front 폴더 내에 있는 이미지가 정상적으로 불러와지지 않는 현상, 이미지 클릭 시 복사 기능도 작동이 안되고... 배포가 너무 어렵습니다ㅠ
답변 감사드립니다.
답변 주신대로 방법은 틀리지 않은 것 같아서 살펴볼 방향을 찾을 수 있을 것 같습니다.
아마 백엔드와 통신하는 url을 localhost에서 aws 접속 IP 로 안바꿔서 그런건지... 그 부분을 살펴봐야할 것 같습니다.
테스트 해보고 좋은 소식으로 다시 답글 달아드리겠습니다!