[Capstone] SSL 인증서 적용(https) 후 css 깨짐 현상

홍정완·2022년 6월 28일
0

트러블 슈팅

목록 보기
9/10
post-thumbnail

상황


  • 위의 경고는 안전하지 못한 서비스라고 유저가 생각할 수 있는 요소다.
  • HTTPS의 경우, 구글의 검색 순위 결과에 약간의 가산점.

이러한 이유로 AWS 인증서 발급받고, EC2 Load Balancer를 사용하여 HTTPS 적용 시도




문제


XEIcon을 비롯한 일부 css 파일 깨짐 발생




해결 과정


처음에는 LoadBalancer Target groups Port 설정이 잘못된 줄 알고 해당 부분을 수정했다.
하지만 문제가 해결되지 않았고, 혹시나 하는 마음에 템플릿 엔진 부분을 살펴보니 <head> 태그 영역에 CDN 주소를 적용하는 링크가 없었다. 😏


http://로 시작되는 css 경로 변경

<link rel="stylesheet" th:href="@{/css/index.css}">

CDN 링크

// XEIcon을 사용한 템플릿 <head> 태그 영역 안에 아래 코드 삽입

<link href="//cdn.jsdelivr.net/gh/xpressengine/xeicon@2.3.1/xeicon.min.css" rel="stylesheet">



해결


profile
습관이 전부다.

0개의 댓글