[클라우드][GCP] 로드밸런서로 리액트, 스프링 배포하기 (실패..)

이번에 쿠키 문제 때문에 도메인을 하나 사서 서브도메인을 나눠 사용하기로 했다. 예시로는 프론트는 a.com

백엔드는 api.a.com 이런식으로 구성할 예정이다.

스프링은 내장 톰캣이 있어서 따로 WAS를 구성하지 않아도 되지만 리액트는 따로 호스팅 서버를 두어야 하는데 나는 이를 GCP에서 제공하는 서버리스 서비스인 App Engine을 이용해서 배포하려고 한다.

 

---

 

리액트 배포하기

 

App Engine에 처음 접속하면 리전을 선택하고 이런 설정을 해야하는데 검색해보면 해당 설명이 많기 때문에 패스하겠다. 내용도 복잡한게 없어서 나는 그냥 리전 서울 선택하고, Nodejs를 선택해주었다.

 

https://javascript.plainenglish.io/quickly-deploy-your-react-app-on-googles-app-engine-6bb97480cc9c

Quickly Deploy Your React App On Google’s App Engine

 

해당 블로그에서 알기 쉽게 단계를 구성해주어서 어렵지 않게 서비스를 배포할 수 있었다. 다만 주의해야할 점은 app.yaml에서 노드 버전이 너무 낮다고 해서 20으로 설정해주었다.

 

그리고 앱 배포 중에 권한이 없다고 배포에 실패했는데 이때는 IAM을 검색해서 들어가보자.

 

 

그럼 아래에 권한 목록이 보일텐데 나는 이미 등록해놔서 역할이 두 개이지만 원래는 편집자 이 역할밖에 없을 것이다. 그래서 Cloud Shell에서 오류가 뜨는 주체를 찾아서 App Engine 배포자라는 역할을 추가해주고 다시 배포를 시도하면 이제 성공할 것이다.

 

 

이제 서비스에 들어가보면 서비스 하나가 생겨난 것을 볼 수 있다.

그냥 접속버튼 눌러서도 접속할 수 있지만 해당 서비스를 내가 구매한 도메인에 맞게 구성하여 로드밸런서에 연결해주면 나의 도메인명으로 접속할 수 있다.

 

---

 

스프링 배포하기 - 생략

 

 

스프링은 그냥 인스턴스를 하나 만들어서 docker로 구성했다. 실행하고 운영 환경에 맞춰 설정하기 편하게 docker-compose를 이용하였다.

인스턴스 관련해서는 구성이 크게 어렵지 않고 검색해도 정보가 많고 웬만한 경우는 방화벽 설정만 잘 해주어도 문제가 해결되는 경우가 많기 때문에 그냥 넘어가도록 하겠다.

중요한건 해당 서비스에서 제공하는 서비스의 포트 번호이다. 나는 Spring Cloud Gateway에서 각 서비스로 연결을 해주기 때문에 해당 서비스의 포트 8000을 로드밸런서에서 설정해줄 것이다.

 

 

---

 

로드밸런서 이용하기...

 

 

GCP에서 제공하는 로드밸런서를 이용하려고 했지만 프론트는 원하던대로 잘 동작하는데 백엔드 부분이 upstream connect error or disconnect/reset before headers. retried and the latest reset reason: connection timeout

이런 오류가 뜨면서 503 응답이 반환되어 다섯시간넘게 인터넷 찾아보고 어떻게든 해결하려 했지만 정보도 너무 없고 아무리해도 해결될 기미가 보이지 않아 그냥 다른 방법을 생각하기로 했다ㅠㅠ