로컬 개발환경에 아이폰으로 HTTPS 접속하기

2024년 4월 5일

개발 툴, 기타

로컬에서 mkcert로 인증서를 생성하고, 브라우저에 이걸 신뢰할 수 있는 인증서로 인식시키면 localhost의 여러 주소들을 https로 접속할 수 있게 됩니다. 이 내용은 아래 글을 참고하시면 됩니다.

👉 로컬 개발환경에 HTTPS 적용하기

이제 내 아이폰으로 내 개발컴의 사이트에 https로 접속할 일이 생겼을 때 어떻게 해야 할지가 이 글의 주제입니다. 저 같은 경우 전자결제 코딩 작업을 하다가 이런 상황이 발생한 건데요.

아이폰에서 192.168.0.xxx로 로컬 개발컴에 접속해서 모바일 전자결제 테스트를 하고 있었습니다. 그런데 사파리에서 결제 앱으로 갔다가 다시 사파리로 돌아올 때 https가 필수인 겁니다.

과정은 세 가지 단계로 이뤄집니다. 인식시키고, 설치하고, 신뢰한다고 표시하는 것이죠.

1. 아이폰에 루트 인증서 인식시키기

우선 위 글_{(로컬 개발환경에 HTTPS 적용하기)}에서 본 대로 rootCA.pem 파일이 있는 위치를 찾기 위해 mkcert -CAROOT 명령을 내립니다. 그럼 rootCA.pem 파일이 있는 경로가 나옵니다. _{rootCA-key.pem 파일은 루트 CA의 개인 키 파일로, 새로운 인증서를 발급할 때 사용됩니다. iOS 기기에 이 파일을 설치할 필요는 없습니다.}

rootCA.pem을 아이폰으로 보낸 뒤 아이폰의 파일 앱으로 들어가서 한 번 터치를 해 줍니다. 그러면 프로파일이 다운로드됐다는 안내가 나오는데요. 아이폰이 이 루트 인증서를 인식했다는 뜻이죠.

2. 아이폰에 루트 인증서 설치하기

이제 설정 > 일반 > VPN 및 기기관리로 이동합니다. 거기에 가면 “다운로드된 프로파일”이라는 항목이 생겨 있습니다. 이걸 클릭해 줍니다.

그러면 “프로파일 설치” 화면이 뜹니다. 우측 상단의 “설치”를 눌러 줍니다.

그러면 암호 입력이 뜨는데요. 입력해 줍니다.

그럼 다시 경고가 뜨는데요. 또 한 번 우측 상단의 “설치”를 눌러 줍니다.

그러면 또 하단에서 빨간색 “설치” 버튼이 뜨는데요. 눌러줍니다.

아무거나 설치하지 못하게 하기 위해서 재차 삼차 물어 보는 거죠.

3. 루트 인증서 신뢰한다고 알려 주기

이제 마지막 단계입니다. 이제 설정 > 일반 > 정보 > 인증서 신뢰 설정으로 갑니다. “루트 인증서 전체 신뢰 활성화”라는 섹션에 방금 설치한 루트 인증서 있고 라디오 버튼이 비활성화돼 있는 모습이 보입니다. 이걸 활성화해 줍니다.

그러면 “루트 인증서. 경고: 웹사이트에 대한 이 인증서를 활성화하면 웹 사이트로 보내진 모든 개인정보 데이터를 타사에서 볼 수 있게 됩니다” 하고 경고가 뜨는데요. 이 인증서는 내가 만든 거니까 해당하지 않는 경고입니다. 저 경고에서 “타사”는 내가 되겠죠. 내 정보를 내가 보는 건 문제가 없습니다. 따라서 “계속”을 눌러 줍니다.

이제 완료됐습니다. 로컬 개발 컴퓨터의 로컬 IP 주소로 접속해서 잘 작동하는지 확인합니다.

아이폰으로 로컬 개발컴에 접속하기

물론 이게 잘 작동하려면 로컬 개발컴에서 로컬 IP 주소로 내 사이트에 접속할 수 있도록 미리 조처가 돼 있는 상태여야 할 겁니다. 예컨대 iptime 공유기라면 https://192.168.0.xxx로 접속이 될 겁니다. 로컬 개발컴에서는 이 주소로 인증서를 발급하고 발급된 인증서가 아파치의 호스트 설정에 경로 세팅이 돼 있어야겠지요.

이에 대한 자세한 설명은 생략하겠습니다. 로컬에서 가상호스트 설정을 하는 것은 별도의 주제니까요. 아파치 호스트 설정에서 인증서 경로 세팅을 하는 방법은 위에 소개한 글에 나와 있고요.