in English (Google Translate)
함께 만드는 투자 기준 – Voeasy 개편을 하면서 다시 Google PageSpeed Module를 적용했습니다. 2013년 여름에 PageSpeed를 도입한 적이 있지만, 당시에는 SSL 환경에서는 페이지스피드를 사용하는 것이 효과적이지 않았습니다. SSL을 사용할 경우 HTML 본문의 최적화만 가능하고 css/js/jpg 등의 기타 리소스들은 전혀 최적화 되지 않았습니다.(0.6.X 버전, 2013) 다시 설명하겠지만, fetching 이 http로만 가능하고 MapOriginDomain 을 지원하지 않아서 SSL 환경에서는 사용할 수 없었습니다.
아래는 Nginx를 사용하는 SSL 환경에서 Google PageSpeed Module을 적용하는 방법에 대한 설명입니다.
왜 Google PageSpeed Module이 필요한가요?
구글 페이지스피드 모듈은 이미지/CSS/JS/HTML을 변경(rewriting)하는 다양한 필터를 사용해서 적은 수고로 웹 페이지를 최적화해서 서비스 로딩 시간을 조금이나마 더 줄여 줍니다. 기본적으로 서비스 환경, 필터 조합 등에 따라서 성능 향상은 정도는 달라지지만, 페이지에 따라서 1초 이상 로딩이 빨라지는 결과를 얻었습니다.(Voeasy 내부 측정)
SSL에서도 PageSpeed를 적용할 수 있나요?
2013년 여름에는 SSL에서 PageSpeed를 적용하는 것이 어려웠지만, 시간이 흘러서 이제는 SSL에서도 적용할 수 있는 방법이 추가되었습니다.
PageSpeed를 적용하면 신경쓰지 않아도 많은 부분을 최적화해주지만, SSL에서 적용하기 위해서는 신경써야 하는 작업이 있습니다.
But by default, PageSpeed will only rewrite non-HTML resources which are served via http.
그런데 Nginx를 사용한다면, 위의 구글의 설명은 아래와 같은 의미가 됩니다.
But, PageSpeed will only rewrite non-HTML resource which are served via http or accessed file directly if you use Nginx.
PageSpeed가 HTML/CSS/js/JPG/PNG 등의 리소스를 최적화하기 위해서는 최적화 해야하는 리소스에 접근하는 것이 필요합니다. (당연합니다!) 그런데 PageSpeed가 리소스를 최적화하는 작업이 ‘on the fly’ 로만 되는 것은 아닙니다. 웹서버가 서비스하는 과정에서 바로바로(on the fly) rewriting이 가능하다면 별도의 작업이 필요없지만, PageSpeed를 동작시키기 위해서는 해당 리소스에 PageSpeed가 접근할 수 있어야 합니다.(fetching)
PageSpeed는 http fetching 이외에 file fetching, https(or SPDY) fetching 도 지원합니다. 그러나 https(or SPDY) fetching은 Apache에서만 가능합니다.(Fetch HTTPS resources directly as of PageSpeed 1.7.30.1, Apache-Only)
Nginx에서 Google PageSpeed를 사용하려면 리소스를 HTTP 혹은 직접 파일로 접근할 수 있어야만 합니다.
(Apache 에서만 https fectching 을 지원합니다.)
Reverse Proxy에서도 PageSpeed를 사용할 수 있나요?
Voeasy는 다음과 같은 구성으로 서비스 됩니다.
[code light=”true” highlight=”1″]
Client Browser <- HTTPS -> Nginx SSL Reverse Proxy (+ PageSpeed) <- HTTP -> Nginx Web Server
[/code]
제일 앞에 있는 Nginx SSL Reverse Proxy가 모든 SSL 처리를 하고, 후방 웹서버에는 http 만 전달합니다. 그리고 http를 전달하면서 각각의 웹서버에게 적절하게 부하를 분산하는 구조입니다. (like AWS ELB) Reverse Proxy를 사용하기 때문에 여러대의 웹서버를 사용하고 있어도 SSL 인증서는 reverse proxy에만 설치해도 되고, 비교적 간단하게 웹서버의 로드 밸런싱도 가능합니다. 그리고 Reverse Proxy가 설치된 서버만 상대적으로 성능이 좋다면(예, AES-NI), 후방 웹서버는 http 만 처리하기 때문에 비교적 평범한 장비를 사용해도 쉽게 전체 서비스에 SSL을 적용할 수 있습니다.
그렇지만, 위의 구성으로는 PageSpeed가 설치되는 reverse proxy는 웹서버와 다른 곳에 위치하기 때문에 직접 파일로는 웹서버의 리소스를 접근할 수 없습니다. Proxy 본래의 임무에 충실하게 http 만을 사용해서 웹서버에 리소스를 요청하고 접근할 수 있습니다.
Nginx Reverse Proxy에서 Google PageSpeed를 사용하려면 리소스를 HTTP로 접근할 수 있어야만 합니다.
(Reverse Proxy 가 웹서버와 다른 서버에 존재한다면, file fetching 이 가능하지 않습니다.)
네?? 우리는 SSL만 사용하는데요?
함께 만드는 투자 기준 – Voeasy 는 http를 사용하지 않고 https만을 사용해서 서비스합니다. 사용자가 http 로 url을 요청해도 https로 강제로 변경되기 때문에 눈치채기 어려울 수도 있지만, 모든 페이지를 SSL로만 서비스합니다.
그렇지만, Nginx Reverse Proxy 환경에서 PageSpeed를 사용하기 위해서는 반드시 http 를 열어야 합니다. 그리고 구글의 설명처럼, https 를 적용했던 원래의 목적을 잃지 않기 위해서 안전한 방법으로 http를 열어야 합니다.
그래서 어떻게 설정하란 말인가요?
다음과 같이, 외부에서는 접근할 수 없고 내부에서만 접근할 수 있는 http reverse proxy를 proxy 서버 내부 ip(192.168.24.101:38000, Reverse Proxy for PageSpeed)에 추가로 설정했습니다.
[code light=”true” highlight=”1,2″]
Browser <- HTTPS -> SSL Reverse Proxy(+PageSpeed) <——— HTTP ——–> Web Server
<- HTTP -> Rev. Proxy for PageSpeed <- HTTP -> Web Server
[/code]
PageSpeed 의 http resource fetch는 nginx.conf에 다음과 같이 설정합니다.
[code autolinks=”false”]
…
pagespeed Domain https://voeasy.com;
pagespeed MapOriginDomain http://192.168.24.101:38000 https://voeasy.com;
…
[/code]
설명
- 2: PageSpeed 에서 resource를 변경할 도메인은 https://voeasy.com 이라고 지정
- 3: https://voeasy.com 의 리소스에서 rewritten 이 필요한 리소스는 http://192.168.24.101:38000 에서 가져올 수 있음
참 간단하죠? 🙂
PageSpeed의 기본 설정 방법을 Google 보다 잘 설명할 자신도 없고, 그리고 Nginx 가 동작하고 있다면 어렵지 않게 설정할 수 있기 때문에 여타의 다른 설명은 생략합니다. (죄송합니다;;)
Voeasy팀의 시행착오가 조금이라도 도움이 되셨으면 좋겠고, 그래도 ‘잘 모르겠는데?’ 혹은 기타 문의 사항이 있으면 코멘트 남겨 주시면 성심 성의껏 말씀 드리겠습니다.
One more thing…, SPDY!
개편하면서 Nginx를 손 볼때, SPDY 도 적용하였습니다. voeasy는 이미 모든 페이지를 SSL로 서비스하기 때문에 SPDY를 적용하는 것 놀라울 정도로 간단합니다. SSL을 기본으로 사용하는 서비스들은 다음의 Nginx 설정 추가만으로 SPDY 추가가 가능합니다.
[code lang=”text”]
server {
listen 443 ssl spdy;
…
}
[/code]
물론 Nginx build 할 때, --with-http_spdy_module는 추가해 주셔야 합니다.
[code lang=”text”]
./configure –with-http_spdy_module \
…
[/code]
개발에 지친 눈, 잠시 쉬어 가세요!
Segovia Station, Spain | Arrangy.com
