Google PageSpeed 는 웹사이트의 성능을 측정하고 최적화하기 위한 도구 모음이며, NGINX Open Source로 컴파일할 수 있는 타사 모듈 로 수년 동안 제공되어 왔습니다. NGINX Plus R11에 동적 모듈 이 도입되면서 NGINX Plus 사용자도 PageSpeed를 활용할 수 있습니다.
PageSpeed를 동적 모듈로 NGINX Plus에 로드하면 자동으로 웹사이트의 리소스를 다시 작성하고 최적화합니다. 이 블로그 게시물에서는 동적 모듈을 빌드하고 구성하는 방법을 설명합니다. (타사 모듈인 PageSpeed는 NGINX Plus 지원 계약에 포함되지 않는다는 점을 명심하세요.)
NGINX Plus를 위한 동적 모듈로서 PageSpeed 빌드 및 로딩
다음 지침은 Google의 수동 설치 지침을 기반으로 하며 , NGINX Plus와의 바이너리 호환성에 맞게 조정되었습니다. (Google의 지침을 그대로 사용하여 NGINX Open Source와 작동하는 동적 모듈을 빌드할 수 있습니다.)
0단계: 빌드 환경 준비
우리는 여러분이 별도의 시스템에서 동적 모듈을 컴파일하는 것을 강력히 권장합니다. 여기서는 이를 "빌드 환경"이라고 합니다. 그렇게 하면 PageSpeed 모듈과 함께 NGINX Plus를 실행할 시스템의 위험과 복잡성이 최소화됩니다(이를 "프로덕션 환경"이라고 합니다). 빌드 환경은 프로덕션 환경과 동일한 운영 체제와 버전을 가져야 합니다 . 또한 다음 구성 요소를 설치해야 합니다.
- 압축 해제 유틸리티
- 컴파일러와 유틸리티 만들기
- Perl 호환 정규 표현식 라이브러리(개발 파일)
- Zlib 압축 라이브러리(개발 파일)
빌드 환경에 이러한 필수 구성 요소가 설치되어 있는지 확인하려면 다음 명령을 실행하세요.
Ubuntu/Debian의 경우:
$ sudo apt-get install unzip gcc make libpcre3-dev zlib1g-dev
CentOS/RHEL/Oracle Linux의 경우:
$ sudo yum install unzip gcc make pcre-devel zlib-devel
1단계: NGINX 오픈 소스 얻기
프로덕션 환경에서 작업하는 경우 다음 명령을 실행하여 실행 중인 NGINX Plus 릴리스에 해당하는 NGINX Open Source 버전을 식별합니다. 이 출력에서 주황색으로 강조 표시됩니다. NGINX 1.11.5는 NGINX Plus R11에 해당합니다.
$ nginx -vnginx version: nginx/1.11.5 (nginx-plus-r11)
빌드 환경에서 작업하여 적절한 NGINX 오픈 소스 버전에 대한 소스를 다운로드하세요.
$ wget -qO - http://nginx.org/download/nginx-1.11.5.tar.gz | tar zxfv -
2단계: PageSpeed 소스 다운로드 및 준비
빌드 환경에서 다음 단계를 수행합니다.
릴리스 노트 에서 PageSpeed 모듈의 최신 버전 번호를 찾 거나 이 명령을 실행하세요.
$ curl -sS https://modpagespeed.com/doc/release_notes | grep release_ | head -1 | sed -e "s/^.*release_([0-9.]*)-beta.*/1/"
PageSpeed 버전 번호는 빌드 명령에서 여러 번 사용되므로 환경 변수로 설정합니다. NPS_VERSION버전 문자열의 숫자 부분만 포함하고 ‑stable 또는 ‑beta 접미사는 포함하지 않습니다.
$ NPS_VERSION=numeric-part-of-version-string
다음과 같이 소스를 다운로드하고 추출합니다. 이러한 명령은 스크립트처럼 순차적으로 실행되어야 합니다.
wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip
unzip v${NPS_VERSION}-beta.zip
cd ngx_pagespeed-${NPS_VERSION}-beta/
psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz
[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${psol_url}
tar -xzvf $(basename ${psol_url}) # extracts to psol/
3단계: PageSpeed 동적 모듈 컴파일
빌드 환경에서 작업하면서, 먼저 NGINX 스크립트를 실행하여 동적 모듈을 NGINX Plus와 바이너리 호환되도록 하는 인수를 configure사용하여 PageSpeed 동적 모듈을 컴파일합니다. 그런 다음 모듈만 컴파일하기 위해 실행합니다.--with-compatmake modules
$ cd ../nginx-1.11.5$ ./configure --add-dynamic-module=../ngx_pagespeed-${NPS_VERSION}-beta --with-compat
$ make modules빌드 프로세스는 동적 모듈을 objs/ngx_pagespeed.so 로 생성합니다 . 빌드 환경에서 .so 파일을 프로덕션 환경의 모듈 디렉토리 /etc/nginx/modules 로 복사합니다 . 파일을 복사할 때 NGINX Open Source 버전 번호를 포함하도록 이름을 바꾸는 것이 좋습니다(다음 단계에서는 그렇게 가정). 예를 들어 ngx_pagespeed_1.11.5.so입니다 .
프로덕션 환경에서 작업하는 경우 버전 번호가 매겨진 파일 이름과 일반(원본) 파일 이름 사이에 심볼릭 링크를 만듭니다.
$ cd /etc/nginx/modules$ sudo ln -s ngx_pagespeed_1.11.5.so ngx_pagespeed.so
$ ls -gG
-rw-r--r-- 1 11924784 Feb 6 11:52 ngx_pagespeed_1.11.5.so
lrwxrwxrwx 1 23 Feb 6 11:52 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so
4단계: PageSpeed Dynamic 모듈 로딩
다음 단계는 프로덕션 환경에서 수행합니다.
PageSpeed를 동적 모듈로 로드하는 지시문을 포함합니다 . 지시문은 nginx.confload_module 구성 파일 의 최상위("main") 컨텍스트에 나타나야 합니다 (즉, 또는 컨텍스트에 나타나지 않아야 함).httpstream
load_module modules/ngx_pagespeed.so;
PageSpeed 자체는 컨텍스트에서 구성되므로 이러한 지시어를 /etc/nginx/conf.d 디렉토리 의 pagespeed.confhttp 라는 새 구성 파일에 넣습니다 . PageSpeed는 지시어에 지정된 웹사이트 , 여기 http://www.example.com 에 대해 활성화됩니다 .proxy_pass
pagespeed MessageBufferSize 10240;
pagespeed FileCachePath /var/ngx_pagespeed_cache;
server {
listen 80;
location / {
proxy_pass http://www.example.com;
}
pagespeed on;
}NGINX Plus를 다시 로드하여 실행 중인 인스턴스에 PageSpeed 모듈을 로드합니다.
$ sudo nginx -s reload
PageSpeed Insights를 사용하여 NGINX Plus PageSpeed 모듈 테스트
PageSpeed Insights 는 모바일 및 데스크톱 기기 모두에서 웹 페이지에 적용된 최적화 수준을 측정하기 위해 Google에서 제공하는 별도의 도구입니다. 두 기기에 대한 점수와 페이지 로드 속도를 높이는 방법에 대한 제안을 제공합니다. 사이트를 측정하고 PageSpeed 모듈의 효과를 보여주는 데 유용한 도구입니다.
PageSpeed Insights를 사용하면 PageSpeed를 활성화한 경우와 비활성화한 경우의 사이트 점수와 최적화 제안을 비교할 수 있습니다. pagespeed on;및 pagespeed off;지시어를 바꿔서 사이트에서 PageSpeed 모듈의 효과를 측정합니다.
PageSpeed는 추가 구성이나 튜닝 없이 최적화를 적용합니다. 그러나 사이트에서 수행되는 최적화를 더 많이 제어하려면 PageSpeed 설명서를 참조하세요 .
Google PageSpeed 는 웹사이트의 성능을 측정하고 최적화하기 위한 도구 모음이며, NGINX Open Source로 컴파일할 수 있는 타사 모듈 로 수년 동안 제공되어 왔습니다. NGINX Plus R11에 동적 모듈 이 도입되면서 NGINX Plus 사용자도 PageSpeed를 활용할 수 있습니다.
PageSpeed를 동적 모듈로 NGINX Plus에 로드하면 자동으로 웹사이트의 리소스를 다시 작성하고 최적화합니다. 이 블로그 게시물에서는 동적 모듈을 빌드하고 구성하는 방법을 설명합니다. (타사 모듈인 PageSpeed는 NGINX Plus 지원 계약에 포함되지 않는다는 점을 명심하세요.)
NGINX Plus를 위한 동적 모듈로서 PageSpeed 빌드 및 로딩
다음 지침은 Google의 수동 설치 지침을 기반으로 하며 , NGINX Plus와의 바이너리 호환성에 맞게 조정되었습니다. (Google의 지침을 그대로 사용하여 NGINX Open Source와 작동하는 동적 모듈을 빌드할 수 있습니다.)
0단계: 빌드 환경 준비
우리는 여러분이 별도의 시스템에서 동적 모듈을 컴파일하는 것을 강력히 권장합니다. 여기서는 이를 "빌드 환경"이라고 합니다. 그렇게 하면 PageSpeed 모듈과 함께 NGINX Plus를 실행할 시스템의 위험과 복잡성이 최소화됩니다(이를 "프로덕션 환경"이라고 합니다). 빌드 환경은 프로덕션 환경과 동일한 운영 체제와 버전을 가져야 합니다 . 또한 다음 구성 요소를 설치해야 합니다.
빌드 환경에 이러한 필수 구성 요소가 설치되어 있는지 확인하려면 다음 명령을 실행하세요.
Ubuntu/Debian의 경우:
$ sudo apt-get install unzip gcc make libpcre3-dev zlib1g-devCentOS/RHEL/Oracle Linux의 경우:
$ sudo yum install unzip gcc make pcre-devel zlib-devel1단계: NGINX 오픈 소스 얻기
프로덕션 환경에서 작업하는 경우 다음 명령을 실행하여 실행 중인 NGINX Plus 릴리스에 해당하는 NGINX Open Source 버전을 식별합니다. 이 출력에서 주황색으로 강조 표시됩니다. NGINX 1.11.5는 NGINX Plus R11에 해당합니다.
$ nginx -vnginx version: nginx/1.11.5 (nginx-plus-r11)빌드 환경에서 작업하여 적절한 NGINX 오픈 소스 버전에 대한 소스를 다운로드하세요.
$ wget -qO - http://nginx.org/download/nginx-1.11.5.tar.gz | tar zxfv -2단계: PageSpeed 소스 다운로드 및 준비
빌드 환경에서 다음 단계를 수행합니다.
릴리스 노트 에서 PageSpeed 모듈의 최신 버전 번호를 찾 거나 이 명령을 실행하세요.
$ curl -sS https://modpagespeed.com/doc/release_notes | grep release_ | head -1 | sed -e "s/^.*release_([0-9.]*)-beta.*/1/"PageSpeed 버전 번호는 빌드 명령에서 여러 번 사용되므로 환경 변수로 설정합니다. NPS_VERSION버전 문자열의 숫자 부분만 포함하고 ‑stable 또는 ‑beta 접미사는 포함하지 않습니다.
$ NPS_VERSION=numeric-part-of-version-string다음과 같이 소스를 다운로드하고 추출합니다. 이러한 명령은 스크립트처럼 순차적으로 실행되어야 합니다.
wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip unzip v${NPS_VERSION}-beta.zip cd ngx_pagespeed-${NPS_VERSION}-beta/ psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz [ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL) wget ${psol_url} tar -xzvf $(basename ${psol_url}) # extracts to psol/3단계: PageSpeed 동적 모듈 컴파일
빌드 환경에서 작업하면서, 먼저 NGINX 스크립트를 실행하여 동적 모듈을 NGINX Plus와 바이너리 호환되도록 하는 인수를 configure사용하여 PageSpeed 동적 모듈을 컴파일합니다. 그런 다음 모듈만 컴파일하기 위해 실행합니다.--with-compatmake modules
$ cd ../nginx-1.11.5$ ./configure --add-dynamic-module=../ngx_pagespeed-${NPS_VERSION}-beta --with-compat $ make modules빌드 프로세스는 동적 모듈을 objs/ngx_pagespeed.so 로 생성합니다 . 빌드 환경에서 .so 파일을 프로덕션 환경의 모듈 디렉토리 /etc/nginx/modules 로 복사합니다 . 파일을 복사할 때 NGINX Open Source 버전 번호를 포함하도록 이름을 바꾸는 것이 좋습니다(다음 단계에서는 그렇게 가정). 예를 들어 ngx_pagespeed_1.11.5.so입니다 .
프로덕션 환경에서 작업하는 경우 버전 번호가 매겨진 파일 이름과 일반(원본) 파일 이름 사이에 심볼릭 링크를 만듭니다.
$ cd /etc/nginx/modules$ sudo ln -s ngx_pagespeed_1.11.5.so ngx_pagespeed.so $ ls -gG -rw-r--r-- 1 11924784 Feb 6 11:52 ngx_pagespeed_1.11.5.so lrwxrwxrwx 1 23 Feb 6 11:52 ngx_pagespeed.so -> ngx_pagespeed_1.11.5.so4단계: PageSpeed Dynamic 모듈 로딩
다음 단계는 프로덕션 환경에서 수행합니다.
PageSpeed를 동적 모듈로 로드하는 지시문을 포함합니다 . 지시문은 nginx.confload_module 구성 파일 의 최상위("main") 컨텍스트에 나타나야 합니다 (즉, 또는 컨텍스트에 나타나지 않아야 함).httpstream
load_module modules/ngx_pagespeed.so;PageSpeed 자체는 컨텍스트에서 구성되므로 이러한 지시어를 /etc/nginx/conf.d 디렉토리 의 pagespeed.confhttp 라는 새 구성 파일에 넣습니다 . PageSpeed는 지시어에 지정된 웹사이트 , 여기 http://www.example.com 에 대해 활성화됩니다 .proxy_pass
pagespeed MessageBufferSize 10240; pagespeed FileCachePath /var/ngx_pagespeed_cache; server { listen 80; location / { proxy_pass http://www.example.com; } pagespeed on; }NGINX Plus를 다시 로드하여 실행 중인 인스턴스에 PageSpeed 모듈을 로드합니다.
$ sudo nginx -s reloadPageSpeed Insights를 사용하여 NGINX Plus PageSpeed 모듈 테스트
PageSpeed Insights 는 모바일 및 데스크톱 기기 모두에서 웹 페이지에 적용된 최적화 수준을 측정하기 위해 Google에서 제공하는 별도의 도구입니다. 두 기기에 대한 점수와 페이지 로드 속도를 높이는 방법에 대한 제안을 제공합니다. 사이트를 측정하고 PageSpeed 모듈의 효과를 보여주는 데 유용한 도구입니다.
PageSpeed Insights를 사용하면 PageSpeed를 활성화한 경우와 비활성화한 경우의 사이트 점수와 최적화 제안을 비교할 수 있습니다. pagespeed on;및 pagespeed off;지시어를 바꿔서 사이트에서 PageSpeed 모듈의 효과를 측정합니다.
PageSpeed는 추가 구성이나 튜닝 없이 최적화를 적용합니다. 그러나 사이트에서 수행되는 최적화를 더 많이 제어하려면 PageSpeed 설명서를 참조하세요 .
위 내용과 같이 NGINX Plus 를 활용하여 Demo 가 필요하시면 하단의 전문가에게 상담받기 버튼을 클릭해주세요
전문가에게 상담받기