한국어
  • https
  • tls
  • nginx
  • express
  • proxy

로컬 HTTPS 개발 다루기

Mkcert와 같은 도구 및 Express.js와 Next.js를 위한 단계별 가이드를 통해 개발 워크플로우에서 로컬 HTTPS를 구현하는 방법을 탐구합니다.

Sijie
Sijie
Developer

웹 애플리케이션을 개발할 때 특정 시나리오에서는 로컬 환경에서도 HTTPS가 필요합니다. 보안 서드파티 API와의 통합, 서비스 워커 및 HTTP/2와 같은 HTTPS 전용 기능 테스트, 원활한 배포를 보장하기 위한 프로덕션 환경 조건 복제 여부에 관계없이 HTTPS는 필수적입니다. 또한 지리적 위치, 푸시 알림 및 자격 증명 관리와 같은 특정 브라우저 API는 효과적으로 작동하기 위해 보안 컨텍스트가 필요합니다.

예를 들어, Logto OSS는 기본적으로 localhost를 제외하고 HTTPS가 필요합니다. 이런 경우 로컬 개발을 위한 HTTPS 설정을 배우는 것은 시간을 절약할 수 있습니다. 이 기사는 HTTPS 로컬 개발 설정을 안내하고 프로세스를 간소화하기 위해 Mkcert와 같은 도구를 소개합니다.

localhost와 HTTPS 전용 기능의 역할

localhost는 서비스 워커, 보안 쿠키, HTTP/2와 같은 많은 HTTPS 전용 기능을 처리할 수 있는 특별한 도메인입니다. http://localhost:xxxx에서 잘 작동하므로 항상 로컬 HTTPS가 필요한 것은 아니며 먼저 localhost를 시도해 보세요!

Cloudflare 터널 시도해보기

이전에 이 기사에서 소개된 Cloudflare 터널은 로컬 서비스를 인터넷에 쉽게 노출할 수 있으며 HTTPS가 준비되어 있습니다.

로컬 HTTPS 설정하기

위의 두 가지 방법이 문제를 해결하지 못하나요? 그렇다면 로컬 HTTPS를 설정합시다. 다음 단계에서는 로컬 도메인이 example.com이라고 가정합니다.

1단계: 호스트 파일 업데이트

시작하기 전에 대상 도메인이 로컬 머신으로 해석되는지 확인하십시오. 이는 호스트 파일을 업데이트하여 수행할 수 있습니다. Linux/macOS의 경우 /etc/hosts나 Windows의 경우 C:\Windows\System32\drivers\etc\hosts를 열고 다음 행을 추가하세요:

2단계: 인증서 생성

HTTPS와 관련된 첫 번째 사항은 인증서입니다. 프로덕션에서는 "Let's encrypt"와 같은 도구를 사용하거나 서비스 제공업체로부터 인증서를 구매할 수 있습니다. 하지만 로컬 개발에서는 인증서를 직접 생성할 수 있습니다.

Mkcert은 원하는 모든 이름으로 로컬 신뢰 개발 인증서를 만드는 간단한 구성 없는 도구입니다.

먼저 공식 가이드를 따라 mkcert를 설치합니다. 여기서는 macOS를 사용하고 있다고 가정합니다:

Windows와 Linux에서는 이 링크를 참조하세요.

이제 mkcert를 사용할 준비가 되면 로컬 CA를 생성하고 루트 인증서를 시스템 신뢰 스토어에 저장하기 위해 다음 명령을 실행하세요. "CA"와 인증서에 대해 더 알아보려면 Cloudflare의 문서를 확인하세요.

그런 다음 로컬 SSL 인증서를 생성하세요:

이렇게 하면 example.com.pem과 example.com-key.pem 파일이 디렉토리에 생성됩니다.

3단계: 앱에서 HTTPS 설정

인증서 파일이 준비되었으므로 이제 애플리케이션에서 HTTPS를 활성화할 수 있습니다. 프로덕션 환경과 달리 Nginx와 같은 리버스 프록시가 HTTPS를 처리하는 경우 로컬 개발에서는 웹 애플리케이션에서 직접 설정할 수 있습니다. Express를 예로 들어보겠습니다.

다음 코드로 간단한 Express 서버를 만드세요:

애플리케이션을 실행하고 https://example.com을 방문하여 안전한 Express 앱을 실행하세요.

Logto OSS에서 HTTPS 활성화하기

Logto OSS는 기본적으로 localhost를 제외하고 HTTPS가 필요하며, 다른 도메인과 함께 Logto를 로컬에서 실행하려면 로컬 HTTPS를 설정해야 합니다.

  1. Logto 설정: 로컬 머신에서 Logto를 설정하는 링크를 따르세요: https://docs.logto.io/docs/get-started/.
  2. 인증서 준비: mkcert를 사용하여 두 개의 .pem 파일을 생성하고 디렉토리에 배치합니다.
  3. 환경 변수 설정: HTTPS_CERT_PATH와 HTTPS_KEY_PATH를 제공하여 Node를 통해 HTTPS를 활성화합니다. 이 링크를 참조하여 더 알아보세요.

요약

로컬 개발을 위한 HTTPS 설정은 복잡해 보일 수 있지만, Mkcert 같은 도구의 도움으로 신뢰할 수 있는 로컬 인증서 생성은 빠르고 쉬운 프로세스가 됩니다. localhost는 종종 많은 HTTPS 전용 기능을 처리하지만, 때때로 전체 HTTPS 지원이 필요할 때 이 가이드가 도움이 됩니다. API를 테스트하든 Logto OSS와 작업하든 단순히 프로덕션 조건을 복제하든, 이러한 단계를 따르면 안전하고 원활한 개발 준비가 됩니다.