HTTPS 환경 구성의 필요성과 도전 과제

최근 개발 중인 프로젝트가 모바일 중심으로 이동하면서, 웹 기반 스캔 기능(예: 바코드/QR 코드 인식)을 통합해야 하는 요구사항이 발생했습니다. 일반적으로 MediaDevices.getUserMedia()와 함께 zxing-js 등을 활용해 실시간 카메라 접근이 가능하지만, 실제 환경에서는 브라우저에서 getUserMedia is not implemented 오류가 발생합니다.

이러한 문제는 대부분 HTTP 환경에서의 보안 제한 때문입니다. 특히 카메라 접근은 HTTPS만 허용되며, 이를 해결하기 위해 프로젝트 전체를 HTTPS로 전환하는 것이 필수적입니다.

실제 적용: Spring Boot + Vue + Nginx 아키텍처

1. Spring Boot에서 자동 서명 인증서 설정

JDK 내장 keytool를 사용하여 로컬에서 인증서 생성이 가능합니다. 아래 명령어를 실행해 tomcat.keystore 파일을 생성합니다.

keytool -genkey -alias tomcat -keyalg RSA -keystore D:/tomcat.keystore

생성된 파일을 프로젝트의 src/main/resources 폴더에 복사 후, application.yml에 다음과 같이 설정합니다.

server:
  ssl:
    key-store: classpath:tomcat.keystore
    key-password: 123456
    key-store-type: JKS
    key-alias: tomcat

또한, HTTP → HTTPS 리디렉션을 위해 포트 80 또는 9090에서 요청을 받고, 정상적인 애플리케이션 포트(예: 9090)로 리디렉션하는 설정도 추가할 수 있습니다.

2. Vue 프로젝트의 개발 서버를 HTTPS로 전환

vue.config.js 파일에 다음 설정을 추가하여 개발 환경에서도 HTTPS를 사용합니다.

module.exports = {
  devServer: {
    https: true,
    port: 9090,
    host: 'localhost'
  }
}

그러나 이 단계에서 브라우저는 자체 발급된 인증서를 신뢰하지 않아 안전하지 않은 연결 경고를 표시합니다. 이는 모든 요청(특히 카메라 접근)이 차단되는 원인이 됩니다.

3. Nginx를 통한 최종 해결: 인증서 신뢰 처리

Vue 및 Spring Boot의 개발 서버에서 발생하는 신뢰 문제는 결국 브라우저가 인증서를 신뢰하지 않기 때문입니다. 이를 해결하기 위해 Nginx를 프록시 서버로 활용하고, 자동 서명 인증서를 직접 관리하는 것이 가장 효과적입니다.

먼저, OpenSSL를 설치하고, C:\nginx-1.16.1\ssl 폴더에 다음 순서로 인증서를 생성합니다.

# 1. 서버 비밀키 생성 (암호화)
openssl genrsa -des3 -out server.key 2048

# 2. CSR 요청 파일 생성
openssl req -new -key server.key -out server.csr

# 3. 비밀키에서 암호 제거
copy server.key server.key.orig
openssl rsa -in server.key -out server.key

# 4. 공개 인증서 생성 (3650일 유효)
openssl x509 -req -days 3650 -in server.csr -signkey server.key -out server.crt

이후, nginx.conf 파일에 다음 설정을 추가합니다.

server {
    listen 443 ssl;
    server_name 192.168.43.20;

    ssl_certificate   ../ssl/server.crt;
    ssl_certificate_key ../ssl/server.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    location /ayyingyong20221119 {
        try_files $uri $uri/ /ayyingyong20221119/index.html;
        index index.html;
    }

    location /ayyingyong20221119/api {
        proxy_pass https://localhost:9090/ayyingyong20221119/api;
    }
}

설정 완료 후, Nginx를 재시작합니다.

nginx -s reload

이제 브라우저에서 https://192.168.43.20/ayyingyong20221119로 접속하면, 인증서 신뢰 문제가 해결되고, 카메라 접근도 정상 작동합니다.

모바일 환경 대응

앱 내부에서 WebView를 사용할 경우, 동일한 인증서 설정을 통해 웹뷰 내에서의 보안 오류 없이 카메라 접근이 가능합니다. 이는 앱 개발자에게도 중요한 정보이며, 디버깅 시 Fiddler Everywhere 같은 도구를 활용해 네트워크 트래픽을 분석하는 것이 유용합니다.

추가 팁: UI 라이브러리 선택

모바일 중심 개발을 위한 컴포넌트 라이브러리로는 Vant가 적합합니다. Vue 2와 Vue 3 버전을 구분하여 사용해야 하며, 성능과 호환성을 고려한 선택이 필요합니다.