백/프론트 연결 2

김태성·2024년 9월 7일

개인 프로젝트-1

목록 보기

36/53

이제 프론트와 백엔드를 연결할 차례다.
대략적인 계획을 말하자면

백엔드, 프론트엔드에 Domain을 연결하여 주소로 통신한다.
무슨말인고 하니

프론트 엔드 개발을 할때 Localhost에 의존하지 않고
배포된 백엔드 프로젝트에 요청을 한다는 것이다
이전에 프로젝트를 진행할때 매번 로컬호스트로 실행시킨 후 배포할때 따로 주소를 변경하는것이 너무 귀찮았는데, 혼자 개발하는데 굳이 그럴필요는 없지 않은가?

백엔드는 자체적인 테스트를 진행하면 된다. 어차피 데이터 반환만 하는 서버이기 때문에 자체 테스트를 돌리면 무결성이 입증된다.

https 설정

레퍼런스 : https://devlog-wjdrbs96.tistory.com/293

빠르게 백엔드 https 인증을 하였다.
route53에서 domain을 사고, 연결하는 등의 작업은 생략한다.
aws의 route53, 서브넷, 클라우드 등을 잘 몰라서 좀 해맸다.

백엔드/프론트엔드의 도메인을 통해 접속할 수 있으니
프론트에서 백엔드 도메인만 기입하면 데이터를 받아올 수 있다!

도메인에 접속 가능하니 (/route)를 통한 컨트롤러 접속도 가능하다는것이다.
그래서 확인을 위해 Backend 서버의 controller에 간단한 Get api를 하나 만들고

프론트의 CORS 문제를 해결하기 위해 위와 같은 설정을 해 주었다.

이후 백엔드 서버로 요청을 보내도 접속이 되는것을 확인!
이제 구조는 다음과 같다.

뭔가 복잡해 보이지만 간단하다.

https 배포 프론트/백엔드는 서로 통신을 한다.
Localhost의 React는 배포된 서버에 axios 로직을 보내며 개발한다.
Localhost의 Springboot서버는 자체적으로 테스트를 진행한다.

즉, Localhost -> https 배포 과정 중에 따로 코드를 바꿀일이 없다!
귀찮은 과정이 줄어서 너무 다행이라고 생각한다.
또한 Local 영역에서 React 코드가 문제 없다면 배포환경에서도 똑같이 작동하기에
무결성도 입증할 수 있다!

CORS 설정

라고 생각했는데 배포 후 proxy가 적용이 안되서 404가 떴다.

배포 이후 proxy가 적용되지 않는다면 host, origin 의 설정을 맞출수 없다는 것이다.

정상적으로 데이터를 받아오면 위와 같이 Host와 요청자가 같게 된다.
뭔가싶어서 찾아보니 배포 환경에서는 proxy가 적용이 안된다고 한다.
=> 이후 한참을 생각해봤지만 결국은 포기했다.

그래서 뭘 할꺼냐면
CORS를 풀어버릴꺼다.

Host가 8082번이고, Origin이 3000번인데 데이터가 들어오는 모습이다.

이렇게 프론트 사이트만을 허용해줬다.
그런데 산넘어 산이라고, 또 문제가 발생했다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'https://apiprojectharpseal.com',
            changeOrigin: true,

        })
    );
};

그것은 프록시를 설정할때 위와 같이 설정하는데, /api의 경로를 때먹어 버리는 것이다.
다시말해서, /api/test 라는 경로를 적어놓으면 /api를 때먹고 /test만 남는다.
위에서도 말했다시피 배포/개발 환경에서 이러한 번거로움이 발생하게 되면
배포 할때마다 로컬/배포환경 각각에 맞는 환경변수를 계속 세팅해야 한다.

그렇다고 절대경로를 써놓으면?
-> 프록시가 먹통이 되서 Local환경에서 바로 CORS가 터진다.

한참을 고민하던 중, 자동으로 Local, 배포 환경을 구분해줄수 있나 했고

    const API_URL = window.location.hostname === 'localhost'
        ? '/api'
        : 'https://apiprojectharpseal.com';

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get(`${API_URL}/test`);
                setData(response.data);
            } catch (error) {
                console.error("Error fetching data: ", error);
            }
        };

        fetchData();
    }, [API_URL]);