[react, nginx] 도메인 포워딩

devdevedddddd·2022년 2월 11일

자기참조

목록 보기
4/4

회사 서비스 배포 단계에서,

도메인 포워딩 하는 과정에서 문제가 생겨 글을 작성한다.

답답해할 나 같은 사람들을 위한

선 3줄 요약

  1. 도메인 포워딩 방식에서 고정 포워딩 방식은 도메인 제공사에서 세팅한 iframe 틀 안에 서비스가 랜더링 된다.
  2. 그러므로 전체화면 기능 및 viewport 가 제대로 읽히지 않는다.
  3. 그 외에도 결제 솔루션, 쿠키, 세션 등 다양한 곳에서 의도치 않은 문제가 발생할 수 있다.

결론 : 고정 포워딩 방식은 기능이 적은 간단한 포트폴리오, 소개 페이지 말고는 쓰지 말자.

환경

현재 회사의 서비스는 cafe 24 나 aws 같은 개별 웹 호스팅 서비스를 이용하지 않고,
하나의 원격 컴퓨터, 즉 서버 자체를 할당 받아 원격으로 접속해서 이용하고 있다.

해당 원격 컴퓨터에 약 20개 이상의 서비스들이 올라가 있는 상태이다.

이번에 개발한 서비스는 react + nginx 로 빌드되어 있다.

해결중 ...

이번에 개발한 서비스를 cafe 24 도메인 포워딩 방식으로 연결하려고 했으나,

여러 문제점이 발생했다.

우선 고정 포워딩 방식을 이용했을 때는,

서비스의 "전체화면" 기능이라던지, 모바일의 viewport가 읽혀지지 않아 PC사이즈로 렌더링 되는 현상이 있었다.

로컬로 접속하면 같은 소스인데도 그러한 오류가 나타나지 않아서 굉장히 당황스러웠다.

우선 전체화면 기능을 고쳐보고자 다른 대안점을 찾았다.

전체화면 기능을 담당하는 아래의 html5 native api 가 지원되는지 확인한 결과,

 const docV = document.documentElement;
 docV.webkitRequestFullscreen();

로컬에서는 되고, 고정 포워딩 시에는 작동이 안됐다.

iframe.request...(기억안남) 해서 전체화면 시키는 함수도 안먹었다.

그리고 멘탈 붕괴되어서 어쩌지 어쩌지 하며 온갖 키워드로 검색했다.

그러다 과장님께서 전 회사에서는 고정포워딩때문에 결재 시스템이 안먹혔었다고 말씀해 주셨다.

지금 발견한 문제 말고도 서비스 전반적으로 문제가 발생할 수 있는다는 사실을 깨닫고

열심히 검색을 돌리던 중. 찾았다.

고정 포워딩 방식은 iframe 태그안에 우리 서비스를 끼워 넣는 방식이라는 것을..

생각하지도 못했었다.

개발자 도구를 열고 엘리먼트를 보니 정말 iframe이 떡하니 있었다.

당연히 안될 거라는 건 알지만 cafe 24 측에 문의 메일을 보냈다.


문의 :

1. 전체화면 지원 문의

저희 서비스에서 현재 전체화면을 실행시키는 코드
document.documentElement.webkitRequestFullscreen();
을 사용하고 있습니다.

로컬에서는 작동이 확인되나, 고정 포워딩시에는 작동되지 않음을 확인했습니다.

고정 프레임시 iframe을 통해 웹 페이지가 표시되어 발생하는 문제로 생각됩니다.

iframe 의 allowfullscreen 옵션이 허용되어 있는지, requestFullscreen() 함수 혹은 다른 우회 방안이 있는지 여쭤보고 싶습니다.

2. 모바일 뷰포트 지원 문의

현재 고정 포워딩을 통한 접속시 모바일 사이즈가 pc 사이즈로 적용되는 현상이 발생하고 있습니다.

이 iframe 페이지에 모바일과 관련된 viewport 옵션을 설정 할 수 있는지, 모바일 서비스와 관련된 내용들이 지정되어 있는지 관련 사항 여쭤보고 싶습니다.

3. 유동 포워딩시 도메인 주소를 유지하여 사용할 수 있는지 여쭤보고 싶습니다.

>>>

답변 : 

카페24에서 제공되는 포워딩방식은 단순한 연결만 가능합니다.

포워딩설정하고 별도의 설정이 가능한 부분 없습니다.

iframe 방식으로 포워딩이 제공되고 포워딩의 경우 오류가 생기거나 홈페이지 기능등이 제대로

안 될 경우가 있습니다.

1, 2번 설정 불가능합니다.

3. 불가능합니다.

포워딩으로 설정하지 않고 연결하려는 호스팅 아이디에 직접 연결하는걸 추천드립니다.

xxxxx.kr 직접 연결하고 xxxxx.kr/home 으로 리다이렉트 되도록 소스수정하셔야 하며

소스수정에 관한 부분은 안내가 어렵고 직접 설정하셔야 하겠습니다.

결국 복잡한 기능이나 로직이 들어간 서비스는 도메인 고정 포워딩 방식으로 하기 어렵다는 판단을 했다.

유동 포워딩 방식을 통해 서비스 할 수 있도록 현재는 수정 중이다.

나 처럼 고정포워딩 방식을 잘 모르고 헤매는 사람이 있을까 해서 내 상황을 공유해 본다.

profile
노력과 성장을 기록합니다.

0개의 댓글