일부 특수한 경우를 제외하고 대부분의 경우 로컬 개발에 http://localhost를 사용해도 됩니다. 이 게시물에서는 HTTPS를 사용하여 로컬 개발 사이트를 실행해야 하는 경우를 설명합니다.
로컬 개발에 HTTPS를 사용하는 방법도 참고하세요.
이 게시물에서 localhost에 관한 설명은 127.0.0.1 및 [::1]에도 적용됩니다. 이들은 모두 '루프백 주소'라고도 하는 로컬 컴퓨터 주소를 설명하기 때문입니다. 또한 간단하게 하기 위해 포트 번호는 지정하지 않습니다.
따라서 http://localhost가 표시되면 http://localhost:{PORT} 또는 http://127.0.0.1:{PORT}로 읽으세요.
요약
로컬에서 개발할 때는 기본적으로 http://localhost를 사용합니다. 서비스 워커, Web Authentication 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 (예: OAuth)가 필요한 서드 파티 라이브러리 또는 API를 로컬로 테스트해야 합니다.
localhost가 아닌 로컬 개발용 커스텀 호스트 이름(예:mysite.example)을 사용하고 있습니다. 일반적으로 이는 로컬 호스트 파일을 재정의했음을 의미합니다.
호스트 파일을 수정하여 맞춤 호스트 이름을 추가합니다. 이 경우 Chrome, Edge, Safari, Firefox는 기본적으로
mysite.example가 로컬 사이트임에도 불구하고 안전하다고 간주하지 않습니다. 따라서 HTTPS 사이트처럼 작동하지 않습니다.기타 사례 이 목록이 모든 경우를 포함하는 것은 아니지만 여기에 나열되지 않은 경우
http://localhost에서 문제가 발생하거나 프로덕션 사이트와 다르게 작동할 수 있습니다. 🙃
이러한 모든 경우에 로컬 개발을 위해 HTTPS를 사용해야 합니다.
로컬 개발에 HTTPS를 사용하는 방법
로컬 개발에 HTTPS를 사용해야 하는 경우 로컬 개발에 HTTPS를 사용하는 방법을 참고하세요.
맞춤 호스트 이름을 사용하는 경우의 도움말
맞춤 호스트 이름을 사용하는 경우(예:호스트 파일 수정)
mysite와 같은 베어 호스트 이름을 사용하지 마세요. 이름이 동일한 최상위 도메인 (TLD) (mysite)이 있는 경우 문제가 발생합니다. 2020년에는 TLD가 1,500개가 넘으며 목록이 계속 늘어나고 있습니다.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에서도 곧 가능해질 수 있습니다.localhost은 호스트 이름일 뿐만 아니라com와 같은 전체 TLD이기도 하므로mysite.localhost와 같은 하위 도메인을 사용할 수 있습니다.
자세히 알아보기
특히 Ryan Sleevi, Filippo Valsorda, Milica Mihajlija, Rowan Merewood, Jake Archibald 등 모든 검토자에게 기여와 의견에 감사드립니다. 🙌
Unsplash의 @moses_lee가 제공한 히어로 이미지를 수정했습니다.