로컬에서는 잘 작동되던 앱(프론트엔드 Angular/백엔드 Express.js)이 EC2에서는 작동이안되네요.

Question

안녕하십니까. 매번 로컬에서 작업만 해보다가 EC2에 올려보고 싶다는 생각이 들어서 만들어보고 있는데, 막혀서 질문 올려봅니다.프론트엔드는 앵귤러로 앱을 만들었습니다. 백엔드는 Express.js로 만들었습니다.로컬에서는 앵귤러 프로젝트에서 npm run start 구동하고, express 있는 폴더에서 npm run server 이렇게 작동하면, 웹브라우저에서 앱이 구동됩니다.앵귤러 port:2000 / express port: 2001localhost:2000로 브라우저에 접속하면, localhost:2001로 api를 호출해 받은 값을 화면에 표시해줍니다.EC2에 올려서 콘솔 두개 띄어 넣고 동일하게 테스트 해봤습니다. 근데 localhost:2001이라고 지정해 놓으면 같은 인스턴스 안에 있더라도 서버를 못 찾습니다. inbound 포트는 혹시 몰라서 2000/2001 둘다 열어놓은 상태입니다.그래서 public ip로 엔드포인트를 를 이용해서 사용하면 콜을 express에서 받지만, CORS 문제가 생겼는지 호출이 거절되네요. 이건 CORS 정하는 내부 로직이 있는데 그부분이 버그라 그럴수도 있을거같네요.ex)http://111.111.111.111:2000 / http://111.111.111.111:2001구글링 해보면 private ip를 이용해서 호출하라고 적혀 있었던 걸 본적이 있는데 그렇게 해도 작동을 안됩니다.아에 프론트앤드와 백앤드를 ec2를 분리시켜서 Elastic ip나 도메인으로 앤드포인트를 잡아서 한 적은 있는데요. 로컬 개발할때처럼 pm2 써서 두개 서버 동시에 구동하면 아주 쉬울거라 생각했는데, 생각처럼 잘 안되어서 좀 난감합니다.이런 경우 제가 어떻게 이것을 지정해야 할지 모르겠습니다. 조언 좀 부탁 드립니다.

kenu,전독시 · Accepted Answer

https://github.com/kenu/backfront이건 react가 프론트엔드인데, 참고해 보세요.https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-api-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8 에서 사용한 코드입니다.

Clickin · Answer

프론트에서 벡엔드로 가는 구조를 정확하게 알지 못하면 이런 일이 발생할 수 있습니다.로컬호스트에서 개발하는 경우 localhost 구문은 개발자의 pc 자체를 뜻하고 벡엔드도 프론트도 동일합니다하지만 ec2등 외부 서버에 배포한 상황에서 프론트의 localhost는 유저의 pc고 벡엔드에서는 서버 자신입니다.그러니 오류가 날 수밖에 없죠.

kenu,전독시 · Answer

ec2 하나라면 제가 권장했던 구성입니다.

로컬에서는 잘 작동되던 앱(프론트엔드 Angular/백엔드 Express.js)이 EC2에서는 작동이안되네요.

3개의 답변

기술 목록