How to build nginx with Pagespeed module

<div dir="ltr" style="text-align: left;" trbidi="on"> <h1 class="entry-title" style="background-color: white; box-sizing: border-box; font-family: Lato, sans-serif; line-height: 1.1; margin: 20px 0px 10px;"> <span style="color: #990000; font-size: large;"><u>Build nginx with Pagespeed module</u></span></h1> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Pagespeed module you can combine and minify CSS and JavaScript, optimize and convert images, remove comments and whitespaces from HTML, and perform many other optimizations.</span></span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rrQaWiS7R4HtM7ZL05mAK2D2kjsuI6Aw-HKQmiQ1swm6miygTu-BQOrkE0ktyOA2Ti9FgxGgRmXdzuHtJ1aG-C1RxtJRgcifg6FQbvgzhtJAQkRVH0AF5zqn2d3jy8xGFe7kasU-Avyd/s1600/NGX_pagespeed_hackthesec.co.in.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rrQaWiS7R4HtM7ZL05mAK2D2kjsuI6Aw-HKQmiQ1swm6miygTu-BQOrkE0ktyOA2Ti9FgxGgRmXdzuHtJ1aG-C1RxtJRgcifg6FQbvgzhtJAQkRVH0AF5zqn2d3jy8xGFe7kasU-Avyd/s1600/NGX_pagespeed_hackthesec.co.in.png" /></a></div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;"><br /></span></span></div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Update the system and install necessary packages</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">sudo apt-get update && sudo apt-get -y upgrade sudo apt-get install software-properties-common nano wget dpkg-dev \ build-essential zlib1g-dev libpcre3 libpcre3-dev unzip</span></span></pre> </div> <div> <div style="color: #222222; font-family: Verdana, Geneva, sans-serif; font-size: 15px; line-height: 26px;"> <b>Download Nginx and Pagespeed Sources</b></div> <div style="color: #222222; font-family: Verdana, Geneva, sans-serif; font-size: 15px; line-height: 26px;"> Ubuntu 14.04 comes with <a href="http://www.hackthesec.co.in/search/label/NGINX">Nginx</a> version 1.4, to get the latest stable version of Nginx v1.8.1 we'll need to add the Nginx PPA repository :</div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">sudo add-apt-repository -y ppa:nginx/stable</span></span></pre> </div> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Edit the PPA’s sources file and uncomment the deb-src directive.</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">sudo nano /etc/apt/sources.list.d/nginx-stable-trusty.list</span></span></pre> </div> <div> <pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;"> # deb http://ppa.launchpad.net/nginx/stable/ubuntu trusty main deb-src http://ppa.launchpad.net/nginx/stable/ubuntu trusty main</pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">and update the package lists from the repositories:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">sudo apt-get update</span></span></pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Install the Nginx build dependencies:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">sudo apt-get build-dep nginx</span></span></pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">cd to the <b>/usr/local/src</b> and download the Nginx source package:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">cd /usr/local/src sudo apt-get source nginx</span></span></pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Download and unpack the latest ngx_pagespeed and psol modules using the following commands:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">cd nginx-1.8.1/debian/modules NPS_VERSION=1.10.33.6 sudo wget https://github.com/pagespeed/ngx_pagespeed/archive/release-${NPS_VERSION}-beta.zip -O release-${NPS_VERSION}-beta.zip sudo unzip release-${NPS_VERSION}-beta.zip cd ngx_pagespeed-release-${NPS_VERSION}-beta/ sudo wget https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz sudo tar -xzvf ${NPS_VERSION}.tar.gz</span></span></pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;"><div> <b>Build Nginx with Pagespeed Module</b></div> <div> Switch to the directory where you downloaded the Nginx source packages</div> </span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">cd /usr/local/src/nginx-1.8.1</span></span></pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">The PPA ppa:nginx/stable we have previously added has multiple Nginx packages available: nginx-common, nginx-full, nginx-light, nginx-extras and nginx-doc. For this guide we will add the Pagespeed Module to the nginx-full package, to do that we need to edit the debian/rules file and add the module to the full_configure_flagsas shown bellow:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">cat debian/rules</span></span></pre> </div> <div> <pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;">full_configure_flags := \ $(common_configure_flags) \ --with-http_addition_module \ --with-http_dav_module \ --with-http_geoip_module \ --with-http_gunzip_module \ --with-http_gzip_static_module \ --with-http_image_filter_module \ --with-http_spdy_module \ --with-http_sub_module \ --with-http_xslt_module \ --with-mail \ --with-mail_ssl_module \ --add-module=$(MODULESDIR)/nginx-auth-pam \ --add-module=$(MODULESDIR)/nginx-dav-ext-module \ --add-module=$(MODULESDIR)/nginx-echo \ --add-module=$(MODULESDIR)/nginx-upstream-fair \ --add-module=$(MODULESDIR)/ngx_http_substitutions_filter_module \ --add-module=$(MODULESDIR)/ngx_pagespeed-release-1.10.33.6-beta</pre> </div> <div> <div style="color: #222222; font-family: Verdana, Geneva, sans-serif; font-size: 15px; line-height: 26px;"> If you want to use nginx-light instead of the nginx-full you should add the same line to the light_configure_flags block.</div> <div style="color: #222222; font-family: Verdana, Geneva, sans-serif; font-size: 15px; line-height: 26px;"> Now we are ready to build Nginx using the following command:</div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">sudo dpkg-buildpackage -b</span></span></pre> </div> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="line-height: 26px;"><div> <span style="font-size: large;">The build process will take a few minutes to complete.</span></div> <div style="font-size: 15px;"> Once the build process is complete, you will find few .deb files in the <b>/usr/local/src/</b> directory.</div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); color: black; line-height: normal; margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">sudo dpkg-buildpackage -b</span></span></pre> </div> </span></span></div> <div> <pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;">nginx_1.8.1-1+trusty0_all.deb nginx-common_1.8.1-1+trusty0_all.deb nginx-doc_1.8.1-1+trusty0_all.deb nginx-extras_1.8.1-1+trusty0_amd64.deb nginx-extras-dbg_1.8.1-1+trusty0_amd64.deb nginx-full_1.8.1-1+trusty0_amd64.deb nginx-full-dbg_1.8.1-1+trusty0_amd64.deb nginx-light_1.8.1-1+trusty0_amd64.deb nginx-light-dbg_1.8.1-1+trusty0_amd64.deb</pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">We added the Pagespeed Module to the "full" package, so we will install that package including the nginx-common package:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: 'courier new', courier, monospace; line-height: 15.6px;"><span style="font-size: large;">cd /usr/local/src sudo dpkg -i nginx-full_1.8.1-1+trusty0_amd64.deb nginx-common_1.8.1-1+trusty0_all.deb</span></span><span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px; white-space: normal;"> </span></span></pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Once the installation is complete, to see what modules are installed run <b>nginx -V</b> .</span></span></div> <div> <pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;">nginx version: nginx/1.8.1 built with OpenSSL 1.0.2g 1 Mar 2016 TLS SNI support enabled configure arguments: ... --add-module=/usr/local/src/nginx-1.8.1/debian/modules/ngx_pagespeed-release-1.10.33.6-beta ...</pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Create a directory for the cached files:</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: 'courier new', courier, monospace; line-height: 15.6px;"><span style="font-size: large;">sudo mkdir -p /var/ngx_pagespeed_cache sudo chown -R www-data: /var/ngx_pagespeed_cache</span></span><span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px; white-space: normal;"> </span></span></pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Create a new nginx configuration for the Pagespeed Module.</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace; font-size: large;"><span style="line-height: 15.6px;">sudo nano /etc/nginx/pagespeed.conf</span></span></pre> </div> <div> <pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;">pagespeed on; pagespeed FileCachePath /var/ngx_pagespeed_cache; location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; } location ~ "^/pagespeed_static/" { } location ~ "^/ngx_pagespeed_beacon$" { } # Minify CSS # pagespeed EnableFilters combine_css,rewrite_css; # Minify JS # pagespeed EnableFilters combine_javascript,rewrite_javascript; # Remove comments and whitespace from HTML # pagespeed EnableFilters remove_comments,collapse_whitespace; </pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;"><div> You can uncomment the filters you need for your website or add a new ones, for more info about Pagespeed filters please check the official <a href="https://developers.google.com/speed/pagespeed/module/config_filters#enabling">PageSpeed </a>documentation.</div> <div> In every Nginx server block where you want to enable the PageSpeed Module add:</div> </span></span></div> <div> <pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;">include /etc/nginx/pagespeed.conf;</pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Example:</span></span></div> <div> <pre style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: #333333; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;">server { listen 80; server_name your_website; root /path/to/website; include /etc/nginx/pagespeed.conf; # omitted code }</pre> </div> <div> <span style="color: #222222; font-family: Verdana, Geneva, sans-serif;"><span style="font-size: 15px; line-height: 26px;">Restart your nginx service and you are ready to go.</span></span></div> <div> <pre style="background-attachment: scroll; background-clip: initial; background-color: #3c3c3c; background-image: none; background-origin: initial; background-position: 0px 0px; background-repeat: repeat; background-size: initial; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border-radius: 4px; border: 1px solid rgb(229, 229, 229); margin-bottom: 20px; outline: 0px; overflow: auto; padding: 20px; vertical-align: baseline;"><span style="color: white; font-family: courier new, courier, monospace;"><span style="line-height: 15.6px;"><span style="font-size: large;">sudo nginx -t sudo service nginx restart</span> </span></span></pre> </div> <div> <span style="background-color: white; color: #222222; font-family: verdana, geneva, sans-serif; font-size: 15px; line-height: 26px;">That's it. You have successfully installed</span></div> <div> <span style="background-color: white; color: #222222; font-family: verdana, geneva, sans-serif; font-size: 15px; line-height: 26px;"><a href="http://www.hackthesec.co.in/">www.hackthesec.co.in</a></span></div> </div>

How to build nginx with Pagespeed module

Build nginx with Pagespeed module Pagespeed module you can combine and minify CSS and JavaScript, optimize and convert images, remove co...

Read more »