점진전 배포란?

Vue 에서 React 로 기술 스택을 변경하고자 합니다. 모든 기능을 한번에 재구현하기에는 많은 이슈들이 존재합니다. 페이지 단위 기준으로 전환하면서 최종적으로 모든 기능을 이주하는 방식으로 진행합니다.

방식

기존 구축된 환경은 그대로 유지하고, React 로 구성된 서비스를 위한 신규 도메인을 생성합니다. 사용자는 기존 도메인으로 진입하고, 전환된 페이지의 경로 접근시 신규 도메인으로 다시 로드를 시도합니다. 재로드에 의해 Nginx 는 proxy_pass 기능을 통해 신규 도메인으로 리다이렉트합니다.

%% Migration ec2 -> s3
graph LR
%% __START
    subgraph S3
        React
    end

    subgraph EC2
        Nginx
        Nuxt
        Condition
    end

    Client --> |1./new| Nginx
    Nginx --> |2./new| Nuxt
    Nuxt --> |3.reload| Nuxt
    Client --> |4./new| Nginx
    Nginx --> |5./new| Condition
    Condition{proxy_pass}
    Condition --> Nuxt
    Condition --> S3
%% __END

체크 리스트

  1. 토큰은 쿠키에 저장해서 활용하고 있는 상황인데 신규 도메인에서도 동일하게 사용 가능한가? ⇒ 쿠키는 도메인 기반으로 동작하는데 프록시에 의해 신규 도메인이 유지되니 토큰 공유가 가능합니다.
  2. 기존 SSR 방식에서 CSR 로 변경해도 상관없는가? ⇒ https://www.notion.so/mygumi/CSR-vs-SSR-1be3391c4d75804ea914eb09ce189eac
  3. 새로고침 과정에서 흰 화면에 대한 UX 이슈는 없는가? ⇒ 기획, 디자인 측면에서도 크리티컬한 이슈는 아닌 것으로 논의되었습니다.
  4. 기존 CI/CD 기능들을 제공할 수 있는가? ⇒ EC2 서비스 배포 & 롤백 S3 서비스 배포 & 롤백

기타 등등

IP 화이트 리스트

간헐적 서비스 로드 불가