구름사이

거대한 X 자가 보이나요?

서초구의 구립 양재도서관이 연일 뉴스에 게재되고 있습니다.

한동훈 전 비대 위원장의 근황 때문인데요.

요즘 양재도서관에서 책을 읽는 모습이 SNS 등에 나타나고 있다고 하죠.

왜 양재도서관이었을까? 를 생각해보면,

거주지인 도곡동 타워팰리스는 강남구인데, 왜 서초구에 있는 도서관? 을 갔을까요.

아마 이동 경로가 수월하기 때문에, 서초구에 있는 양재도서관을 가지 않았을까 합니다.

타워 팰리스에서 양재천의 산책로로 이동하는 것은 육교가 설치되어 있어 편리합니다.

양재천 산책로를 따라 이동하면 약 40분만에 도착할 수 있습니다.

더군다나 운동화 차림이죠.

산책도 하고, 책도 있을 수 있고.

양재도서관은 아담한 사이즈입니다. 아주 규모가 큰 도서관은 아닙니다.

양재천변 또는 양재천에서 쉽게 접근할 수 있습니다.

굳이 차량보다는 도보로 산책 겸 찾기가 아주 편리하죠.

2024.05.16. 추가작성

양재천이 동서 방향인 줄 알았는데,  북동(남서)방향(45도)이네요.

최근에 투썸플레이스(Twosome Place)의 선물카드(기프트카드:Gift Card)를 선물받았습니다.

지갑 등에 끼워다니기 불편해서,  투썸하트 앱을 깔고 기프트카드를 등록하려고 하는데,

스크래치 번호(필수)  항목이 나타납니다.   잉?   도대체  스크래치 번호라는 것이 어디에 있지?

신용카드의 CVC번호는 알겠는데,  스크래치 번호( 6자리) 라는 것이 도대체 무엇인가?

조금 구글링을 해도 뽀족한 답을 얻지 못했습니다.

혹시나 해서, 카드번호( 16자리) 옆 부분에 보니    예전에 동전으로 긁기하는 것 비슷한  '스크래치'가 있더군요.

손톱으로 긁어보니  숫자값 6개 나오네요.

격세지감.. 이제. 추세를 바로 못 쫓아가는 세대로 바뀌는 것인가요!

#spring.data.rest.base-path=/api
#spring.data.rest.basePath=/api
server.servlet.context-path=/api

React, SpringBoot 기반으로 웹서비스를  HTTP 프로토콜로 개발한 이후,   

SSL 인증서를 적용하여 HTTS 프로토콜 서비스를 하는 것을 설명/기록하고자 합니다.

크게 작업하여야 할 것은

• Nginx에서  SSL 관련 키 파일, 인증파일, 서비스 포트 등을  conf 파일에 적용
• React에서 SpringBoot API 호출할 때의 포트 변경 

으로 마무리될 수 있습니다.

하지만,  약간의 전제 조건들이 있습니다.

1. React 는 기본으로 3000번 포트를 사용

2.SpringBoot는 기본으로 8080 포트로, http 서비스 로 Embedded Tomcat서버로 구동

3. SpringBoot의  API는  context 경로( 예를 들면,  /api )가 지정되어 있어야  Nginx에서  React와 SpringBoot 모두를 Proxy할 수 있음.( <-  동일한  / 경로는  중복 설정되지 않기 때문.)

위의 전제 조건 중에서 1번과 2번은 기본으로 세팅되죠.  3번은  

#spring.data.rest.base-path=/api
#spring.data.rest.basePath=/api
server.servlet.context-path=/api

중 유효한 것을 적용합니다.  필자의 경우  SpringBoot가 2.6.12 임에도 인터넷 검색을 통한 지정하는 프로터피가 제대로 적용되지 않아  여러 개를 시도하다가 결국 최종적으로  마지막 형식이 제대로 동작한다는 것을 확인하였습니다.

위 HTTP환경에서 Nginx는 환경 구성은

server{
        server_name     www.yourdomain.com;
        location / {
                proxy_pass http://www.yourdomain.com:3000;
        }
        location /api {
                proxy_pass http://www.yourdomain.com:8080;
        }
}

이면 충분히 동작합니다.

이 때 React에서 SpringBoot로 API를 호출할 때는 

export const SERVER_URL='http://wwww.yourdomain.com:8080/api/';

으로 제대로 동작할 것입니다.

이제  HTTPS 서비스로 전환해 보겠습니다.

변경해야 할 부분은

    - Nginx의 configuration

    - React에서 API 호출하는 URI

의 2군데 입니다.

Nginx를 사용하기 때문에,  SpringBoot에서 SSL 적용에 따른 조치 사항은 수행하지 않습니다.

먼저 Nginx 의   conf 파일 내용 변경

server{
		listen				443 ssl;
        server_name     	www.yourdomain.com;
        ssl_certificate		certification.crt
        ssl_certificate_key	certification.key        
        
        location / {
                proxy_pass http://www.yourdomain.com:3000;
        }
        location /api {
                proxy_pass http://www.yourdomain.com:8080;
        }
}

로 2, 4, 5 줄을 추가해 준다, 다른 부분은 수정을 하지 않습니다.

그리고 React에서 API호출하는 URL를 변경합니다.

export const SERVER_URL='https://wwww.yourdomain.com/api/';

https로 표현하였고, 포트를 없앴습니다. 기본값이 443 사용.

다루어야 할 것이   3가지 요소이고( React, SpringBoot(Tomcat), Nginx)

URI, 포트, 프로토콜 및  Proxy 지정 등이 있어.

제대로 통신이 되지 않을 때  살펴보거나   디버깅할 때 조합의 경우의 수가 많습니다. 도움이 되길 바랍니다.

맨 앞단에, 브라우저의 URI  또는 API URI 를

Nginx에서 처리하는데

URI의 경우에 따라 처리(proxy: 위임, 돌리기)하는데,

https를 하면서 기본 포트가 변경되는 부분이 있다

가 주요 큰 흐름이고 이를 제대로 적용하면 됩니다.