SSL(HTTPS Service) Certifcation with React, SpringBoot and Nginx

#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를 하면서 기본 포트가 변경되는 부분이 있다

 

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