로컬 개발 환경에서 localhost 활용 및 Caddy를 통한 HTTPS 설정 가이드

브라우저의 localhost 보안 컨텍스트 처리

브라우저는 일반적으로 HTTPS를 사용하는 출처만을 보안 컨텍스트로 간주합니다. 그러나 로컬 개발을 위해 다음과 같은 특정 출처는 TLS를 사용하지 않더라도 잠재적으로 신뢰할 수 있는 것으로 예외 처리됩니다.

• http://127.0.0.1

• http://localhost

• .localhost로 끝나는 모든 서브도메인 (예: http://app.localhost)

이러한 주소로의 요청은 사용자 기기를 벗어나지 않으므로, 데이터 가로채기 위험이 없어 기술적으로는 일반 HTTP임에도 불구하고 브라우저는 이를 보안 컨텍스트처럼 안전하게 취급합니다.

localhost 서브도메인 활용의 이점

blog.localhost:3000과 같은 localhost 서브도메인을 사용하면 복잡한 Rails 앱 개발 시 여러 실용적인 이점을 얻을 수 있습니다. 이는 개발 환경을 프로덕션과 유사하게 만들어 추가적인 DNS나 호스트 설정 없이도 쿠키, 세션, 라우팅, 다중 앱 설정을 테스트하는 데 도움을 줍니다.

1. 프로덕션과 유사한 도메인 시뮬레이션:
   • 프로덕션에서 blog.example.com, api.example.com과 같이 앱의 다른 부분을 다른 서브도메인으로 제공하는 경우, blog.localhost를 사용하여 로컬에서 라우팅, 쿠키, CORS, 리다이렉트를 프로덕션에 가까운 환경에서 테스트할 수 있습니다.
2. 쿠키 및 세션 처리의 정확성:
   • 브라우저는 쿠키를 도메인에 따라 범위 지정합니다. blog.localhost, admin.localhost와 같은 서브도메인을 통해 다음을 테스트할 수 있습니다.
     • 서브도메인 간 공유 쿠키 테스트
     • 다른 서브도메인이 인증을 공유해야 할 때(예: SSO) 세션 처리 검증
3. 멀티테넌트 또는 서브도메인 기반 라우팅 테스트:
   • Rails 앱은 멀티테넌시를 위해 tenant1.example.com과 같은 서브도메인 기반 라우팅을 자주 사용합니다. tenant.localhost를 사용하면 프로덕션 도메인 없이도 이러한 라우팅을 테스트할 수 있습니다.
4. 여러 앱의 쉬운 분리:
   • writesofwarewell.localhost:3000, typeangle.localhost:3001과 같이 여러 앱을 실행하는 경우 서브도메인은 앱을 체계적으로 유지하고 접근성을 높이는 데 도움이 됩니다.
   • *.localhost는 DNS 없이 127.0.0.1로 자동 확인되므로 /etc/hosts 변경이 필요 없습니다.

Caddy를 이용한 로컬 HTTPS 설정

특정 경우(예: HTTPS에서만 발생하는 문제 디버깅, HTTPS를 요구하는 서드파티 API 테스트) 로컬 개발 앱에 HTTPS가 필요할 수 있습니다. Caddy 서버를 사용하면 Rails 앱을 로컬에서 HTTPS로 실행할 수 있습니다.

1. Caddy 설치: bash $ brew install caddy

2. Caddyfile 설정:
   • Rails 앱이 3000번 포트에서 실행 중이라면, 앱 디렉토리에 Caddyfile을 생성하고 다음 내용을 추가합니다. blog.localhost { reverse_proxy :3000 }
   • Caddy는 HTTPS 요청을 받아 Rails 앱으로 전달하는 리버스 프록시 역할을 합니다.
3. Caddy 실행:
   • Rails 앱 디렉토리에서 Caddy를 실행합니다. bash $ caddy run
   • 별도의 터미널에서 rails server를 실행합니다.
   • https://blog.localhost로 접속하면 Caddy가 자체 서명된 인증서를 생성한 후 앱이 HTTPS로 실행되는 것을 확인할 수 있습니다.
4. Procfile.dev 통합:
   • Caddy 실행을 자동화하기 위해 Procfile.dev에 다음 내용을 추가하여 Rails 서버, TailwindCSS 컴파일러와 함께 Caddy를 실행할 수 있습니다. web: bin/rails server css: bin/rails tailwindcss:watch caddy: caddy run
   • 이제 bin/dev 명령으로 모든 서비스를 한 번에 시작할 수 있습니다.