구름사이

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

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

코딩에 투입되는 시간보다는

구동/빌드/실행 명령어 수행은 그 빈도가 낮아 

자주 잊어버립니다.

이에 간략히 정리해 봅니다.

개발자 TERMINAL에서 구동

npm start

배포를 위한 빌드

npm run build

서버에서 실행

serve -n -s build &

아래 코드를 클라언트 프로그램에 추가합니다.

  const kakaoClientId = 'xxxxxxxxc2a06fc7d90xxxxxxxxxxx';
  const kakaoOnSuccess = async ( data ) => {
        console.log(data)
        const idToken = data.response.access_token  //액세스 토큰 백엔드로 전달
        //ToDo

        //alert(data.response.access_token )
        setAuth(true);
  }
  const kakaoOnFailure = (error) =>{
        console.log(error);
  }
  
        				<KakaoLogin
                            token = {kakaoClientId}
                            onSuccess={kakaoOnSuccess}
                            onFail={kakaoOnFailure}
                        />

kakao developers 사이트에서

'내 애플리케이션'에서 '애플리케이션 추가하기'...

'앱키'를 용도성에 맞게 활용합니다.

React에서는 native로 개발로 할 경우, JavaScript 키 값을 'kakaoClientId'의 변수 값에 지정합니다.( 위 프로그램코드 참조)

'플랫폼'에서 'Web'플랫폼 등록

   - 복수 개 가능

   - 포트값도 일반 URL처럼 등록

'카카오로그인' 활성화

프로그램 수행 화면...

카카오 계정 로그인 화면 나타남.

import React, {useEffect} from 'react';
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'


const Payment = (effect, deps) => {
  
  useEffect( () => {
    const jquery = document.createElement("script");
    jquery.src = "https://code.jquery.com/jquery-1.12.4.min.js";
    const iamport = document.createElement("script");
    iamport.src = "https://cdn.iamport.kr/js/iamport.payment-1.1.7.js";
    document.head.appendChild(jquery);
    document.head.appendChild(iamport);

    return () =>{
      document.head.removeChild(jquery); 
      document.head.removeChild(iamport);  
    }
  }, [] );


  const onClickPayment = () =>{
    const {IMP} = window;
    IMP.init("imp000000000");
    const data = {
      pg: 'html5_inicis',  // PG사(필수항목)
      pay_method: 'card',   //결제수단(필수항목)
      merchant_uid: 'mid_$(new Date().getTime())',  //주문번호(필수항목)
      name: '결제 테스트', //주문명(필수항목)
      amount: '10000', //금액(필수항목)
      custom_data: { name: '부가정보',  desc: '세부 부가정보'},
      buyer_name: 'klaud',
      buyer_tel: '101000',
      buyer_email: 'aaa@speech.pe.kr',
      buyer_addr: "Seoul",
      buyer_postalcode: "76543"      
    };

    IMP.request_pay(data, callback);  //결제창
    console.log("Here");  

  };

  const callback = (response) => {
    const {success, error_msg, imp_uid, merchant_uid, pay_method, paid_amount, status } = response;
    if(success){
      alert("Sucess!!!");      
    } else {
      alert( error_msg );
      console.log(error_msg);
    }
  }

  return (
    <div align="center" mt="100px" >
      <Navbar/>
      <button  onClick ={onClickPayment} > Basic Plan(1,000원)  결제하기 </button>
      <Footer/>
    </div>     
  )

}



export default Payment;

상기와 같이 React 기반으로 아임포트를 통해, 결제를 구현시 테스트 해 보았습니다.

WoW

매일 결제만 해보다가, 직접 구현해 보니 느낌이 조금 이상하네요.. 먼 훗날, 내 상품 또는 나의 서비스를 통해  결제되어 내 통장에 입금되는 날을 기대해 봅니다.

상기와 같이 구현해 보면, 실제 결제가 됩니다. 다만, 결제된 금액은 자정 부근에 '승인 취소'됩니다.