일부 특수한 경우를 제외하고 대부분의 경우 로컬 개발에 http://localhost를 사용해도 괜찮습니다. 이 게시물에서는 HTTPS로 로컬 개발 사이트를 실행해야 하는 경우를 설명합니다.
이 게시물에서 localhost에 관한 설명은 127.0.0.1 및 [::1]에도 적용됩니다. 둘 다 '루프백 주소'라고도 하는 로컬 컴퓨터 주소를 설명하기 때문입니다. 또한 간단하게 하기 위해 포트 번호는 지정되지 않습니다.
따라서 http://localhost가 표시되면 http://localhost:{PORT} 또는 http://127.0.0.1:{PORT}로 읽으세요.
요약
로컬에서 개발할 때는 기본적으로 http://localhost를 사용하세요. 서비스 워커, 웹 인증 API 등이 작동합니다.
하지만 다음과 같은 경우에는 로컬 개발에 HTTPS가 필요합니다.
- 혼합 콘텐츠 문제 디버깅
- HTTP/2 이상 사용
- HTTPS가 필요한 서드 파티 라이브러리 또는 API 사용
커스텀 호스트 이름 사용
로컬 개발에 HTTPS를 사용해야 하는 경우
✨ 이 정도면 충분합니다. 자세한 내용을 보려면 계속 읽어보세요.
개발 사이트가 안전하게 동작해야 하는 이유
예상치 못한 문제가 발생하지 않도록 하려면 로컬 개발 사이트가 프로덕션 웹사이트와 최대한 유사하게 동작해야 합니다. 따라서 프로덕션 웹사이트에서 HTTPS를 사용하는 경우 로컬 개발 사이트가 HTTPS 사이트처럼 동작해야 합니다.
기본적으로 http://localhost 사용
브라우저는 http://localhost를 특별한 방식으로 처리합니다. HTTP이지만 대부분 HTTPS 사이트처럼 동작합니다.
http://localhost에서는 특정 보안 보장이 필요한 서비스 워커, 센서 API, 인증 API, 결제 및 기타 기능이 지원되며 HTTPS 사이트와 똑같이 동작합니다.
로컬 개발에 HTTPS를 사용해야 하는 경우
http://localhost가 HTTPS 사이트처럼 동작하지 않는 특수한 경우가 발생할 수 있습니다. 또는 http://localhost가 아닌 커스텀 사이트 이름을 사용하고 싶을 수도 있습니다.
다음과 같은 경우에는 로컬 개발에 HTTPS를 사용해야 합니다.
- 혼합 콘텐츠 문제와 같이 HTTPS 웹사이트에서만 발생하고 HTTP 사이트, 심지어
http://localhost에서도 발생하지 않는 문제를 로컬에서 디버그해야 합니다. - HTTP/2 이상에만 해당하는 동작을 로컬에서 테스트하거나 재현해야 합니다. 예를 들어 HTTP/2 이상에서 로드 성능을 테스트해야 하는 경우입니다. 안전하지 않은 HTTP/2 이상은
localhost에서도 지원되지 않습니다. - HTTPS가 필요한 서드 파티 라이브러리 또는 API (예: OAuth)를 로컬에서 테스트해야 합니다.
localhost가 아닌 로컬 개발을 위한 커스텀 호스트 이름(예:mysite.example)을 사용하고 있습니다. 일반적으로 이는 로컬 호스트 파일을 재정의했음을 의미합니다.
커스텀 호스트 이름을 추가하기 위해 호스트 파일을 수정합니다. 이 경우 Chrome, Edge, Safari, Firefox는 로컬 사이트임에도 불구하고 기본적으로
mysite.example을 안전하다고 간주하지 않습니다. 따라서 HTTPS 사이트처럼 동작하지 않습니다.기타 사례! 이 목록은 완전하지 않지만 여기에 나열되지 않은 사례가 발생하면
http://localhost에서 문제가 발생하거나 프로덕션 사이트처럼 동작하지 않는다는 것을 알 수 있습니다. 🙃
이러한 모든 경우에 로컬 개발에 HTTPS를 사용해야 합니다.
로컬 개발에 HTTPS를 사용하는 방법
로컬 개발에 HTTPS를 사용해야 하는 경우 로컬 개발에 HTTPS를 사용하는 방법으로 이동하세요.
커스텀 호스트 이름을 사용하는 경우의 도움말
호스트 파일을 수정하는 등 커스텀 호스트 이름을 사용하는 경우:
- 이름이 같은 최상위 도메인(TLD)이 있는 경우 문제가 발생하므로
mysite와 같은 기본 호스트 이름을 사용하지 마세요.mysite그럴 가능성이 없는 것은 아닙니다. 2020년에는 1,500개가 넘는 TLD가 있으며 목록은 계속 증가하고 있습니다.coffee,museum,travel및 많은 대기업 이름 (심지어 근무하는 회사일 수도 있음)이 TLD입니다. 전체 목록은 여기를 참고하세요. - 자신의 도메인 또는 이 용도로 예약된 도메인만 사용하세요. 자체 도메인이 없는 경우
test또는localhost(mysite.localhost)를 사용할 수 있습니다.test는 브라우저에서 특별히 처리되지 않지만localhost는 Chrome 및 Edge에서http://<name>.localhost를 기본적으로 지원하며 localhost가 안전하게 동작할 때 안전하게 동작합니다. 직접 사용해 보세요. localhost에서 사이트를 실행하고 Chrome 또는 Edge에서http://<whatever name you like>.localhost:<your port>에 액세스하세요. 곧 Firefox와 Safari에서도 가능해질 수 있습니다. 이렇게 할 수 있는 이유 (mysite.localhost)는localhost가 호스트 이름일 뿐만 아니라com와 같은 전체 TLD이기 때문입니다.
자세히 알아보기
모든 검토자, 특히 Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood, Jake Archibald에게 기여와 의견을 보내주셔서 감사합니다. 🙌
Unsplash의 @moses_lee가 촬영한 히어로 이미지를 수정했습니다.