Home Website TutorialsWordPress How to configure WP Rocket with Nginx

How to configure WP Rocket with Nginx

by Thạch Phạm
Published: Last Updated on
A+A-
Reset

Overview

If you use WordPress, you must have heard of or used the WP-Rocket Cache Plugin,, one of the top Caching Plugins available today. Installing this Plugin on websites using Apache, LiteSpeed Web Server (OpenLiteSpeed) servers will be extremely simple because these servers have built-in support and configuration rules will be saved directly through the .htaccesss, so you just need to install it and use it.

However, the reset is not so simple for a server using Nginx. If you want the plugin to work well and optimally on Nginx, then after installing the Plugin, you need to create the wprocket.conf configuration files and declare this configuration file with the Nginx configuration of the website. So how to configure the steps, please follow below.

Implementation guide

Step 1: Create the configuration file wprocket.conf

First, you need to create a configuration file wprocket.conf in the directory containing the website’s source code. For example, I am using VPS and installing control aaPanel, the website to be installed is azdigi.cf, the path containing the source code of my website will be: /www/wwwroot/azdigi.cf

I move to the folder containing the source code and create the file wprocket.conf as follows:

AZDIGI Tutorial
cd /www/wwwroot/azdigi.cf
touch wprocket.conf
chown –R www:www wprocket.conf
vi wprocket.conf
    

Command annotation:

  • Navigate to the directory containing the website source code.
  • Create file wprocket.conf.
  • Assign user permissions to the file (replace www with your user).
  • Open the file and edit.

Open the wprocket.conf file, press i or INSERT to start editing the content, copy the content below and paste it into the wprocket.conf file.

###################################################################################################
# Rocket-Nginx
#
# Rocket-Nginx is a NGINX configuration to speedup your WordPress
# website with the cache plugin WP-Rocket (http://wp-rocket.me)
#
# Author: Maxime Jobin
# Maintainer: SatelliteWP.com
# URL: https://github.com/satellitewp/rocket-nginx
#
# Tested with WP-Rocket version: 3.10.5
# Tested with NGINX: 1.21.4 (mainline)
#
# Version 3.0.0
#
###################################################################################################

# Add debug information into header
set $rocket_debug #!# DEBUG #!#;


###################################################################################################
# Do not alter theses values
#
set $rocket_bypass          1;      # Should NGINX bypass WordPress and call cache file directly ?
set $rocket_encryption      "";     # Is GZIP accepted by client ?
set $rocket_file            "";     # Filename to look for
set $rocket_is_bypassed     "MISS"; # Header text added to check if the bypass worked or not. Header: X-Rocket-Nginx-Serving-Static
set $rocket_reason          "";     # Reason why cache file was not used. If cache file is used, what file was used
set $rocket_https_prefix    "";		# HTTPS prefix to use when cached files are using HTTPS
set $rocket_has_query_cache 0;		# Checks if a query string from URL is found from the cached query string
set $rocket_is_https        0;		# Checks if the request is HTTPS
set $rocket_support_webp    0;		# Checks if the request supports WebP
set $rocket_dynamic         "";		# Dynamic value to add to cached filename

###################################################################################################
# PAGE CACHE
#

#!# INCLUDE_START #!#

# Define Rocket-Nginx $is_args
set $rocket_is_args $is_args;

set $rocket_uri_path "";
if ($request_uri ~ "^([^?]*)(\?.*)?$") {
	set $rocket_uri_path $1;
}

# Is GZIP accepted by client ?
if ($http_accept_encoding ~ gzip) {
	set $rocket_encryption "_gzip";
}

# Is Brotli accepted by client ?
if ($http_accept_encoding ~ br) {
	set $rocket_encryption "";
}

# Is HTTPS request ?
if ($https = "on") { set $rocket_is_https 1; }
if ($http_x_forwarded_proto = "https") { set $rocket_is_https 1; }
if ($http_front_end_https = "on") { set $rocket_is_https 1; }
if ($http_x_forwarded_protocol = "https") { set $rocket_is_https 1; }
if ($http_x_forwarded_ssl = "on") { set $rocket_is_https 1; }
if ($http_x_url_scheme = "https") { set $rocket_is_https 1; }
if ($http_forwarded ~ /proto=https/) { set $rocket_is_https 1; }

if ($rocket_is_https = "1") {
	set $rocket_https_prefix "-https";
}

# Check if request supports WebP ?
if ($http_accept ~* "webp") {
	set $rocket_support_webp "1";
}

# Set mobile detection file path
set $rocket_mobile_detection "$document_root/#!# WP_CONTENT_URI #!#/cache/wp-rocket/$http_host/$request_uri/.mobile-active";

# Query strings to ignore
#!# QUERY_STRING_IGNORE #!#

if ($rocket_args = "") {
	set $rocket_is_args "";
}

# Query string to cache
#!# QUERY_STRING_CACHE #!#

# File/URL to return IF we must bypass WordPress
# Desktop: index.html
# Gzip:    index.html_gzip
# HTTPS:   index-https.html
# Mobile:  index-mobile-https.html

set $rocket_file_start "index$rocket_https_prefix";

set $rocket_pre_url "/#!# WP_CONTENT_URI #!#/cache/wp-rocket/$http_host/$rocket_uri_path/$rocket_args/";
set $rocket_pre_file "$document_root/#!# WP_CONTENT_URI #!#/cache/wp-rocket/$http_host/$rocket_uri_path/$rocket_args/";

# Standard cache file format
set $rocket_url "$rocket_pre_url$rocket_file_start$rocket_dynamic.html";
set $rocket_file "$rocket_pre_file$rocket_file_start$rocket_dynamic.html";

# Check if gzip version cached file is available
if (-f "$rocket_file$rocket_encryption") {
	set $rocket_file "$rocket_file$rocket_encryption";
	set $rocket_url  "$rocket_url$rocket_encryption";
}

# Do not bypass if the cached file does not exist
if (!-f "$rocket_file") {
	set $rocket_bypass 0;
	set $rocket_is_bypassed "MISS";
	set $rocket_reason "File not cached";
}

# Do not bypass if it's a POST request
if ($request_method = POST) {
	set $rocket_bypass 0;
	set $rocket_is_bypassed "BYPASS";
	set $rocket_reason "POST request";
}

# Do not bypass if arguments are found (e.g. ?page=2)
if ($rocket_is_args) {
	set $rocket_bypass 0;
	set $rocket_is_bypassed "BYPASS";
	set $rocket_reason "Arguments found";
}

# Do not bypass if the site is in maintenance mode
if (-f "$document_root/.maintenance") {
	set $rocket_bypass 0;
	set $rocket_is_bypassed "BYPASS";
	set $rocket_reason "Maintenance mode";
}

# Do not bypass if one of those cookie if found
# wordpress_logged_in_[hash] : When a user is logged in, this cookie is created (we'd rather let WP-Rocket handle that)
# wp-postpass_[hash] : When a protected post requires a password, this cookie is created.
if ($http_cookie ~* "(#!# COOKIE_INVALIDATE #!#)") {
	set $rocket_bypass 0;
	set $rocket_is_bypassed "BYPASS";
	set $rocket_reason "Cookie";
}

if (-f "$rocket_mobile_detection") {
	set $rocket_bypass 0;
	set $rocket_is_bypassed "BYPASS";
	set $rocket_reason "Specific mobile cache activated";	
}

# If the bypass token is still on, let's bypass WordPress with the cached URL
if ($rocket_bypass = 1) {
	set $rocket_is_bypassed "HIT";
	set $rocket_reason "$rocket_url";
}

# Clear variables if debug is not needed
if ($rocket_debug = 0) {
	set $rocket_reason "";
	set $rocket_file "";
}

# If the bypass token is still on, rewrite according to the file linked to the request
if ($rocket_bypass = 1) {
	rewrite .* "$rocket_url" last;
}

# Add header to HTML cached files
location ~ /#!# WP_CONTENT_URI #!#/cache/wp-rocket/.*html$ {
	etag on;
	add_header Vary "Accept-Encoding, Cookie";
	add_header Cache-Control "#!# HTML_CACHE_CONTROL #!#";
	add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
	add_header X-Rocket-Nginx-Reason $rocket_reason;
	add_header X-Rocket-Nginx-File $rocket_file;
	#!# INCLUDE_GLOBAL #!#
	#!# INCLUDE_HTTP #!#
}

# Do not gzip cached files that are already gzipped
location ~ /#!# WP_CONTENT_URI #!#/cache/wp-rocket/.*_gzip$ {
	etag on;
	gzip off;
	types {}
	default_type text/html;
	add_header Content-Encoding gzip;
	add_header Vary "Accept-Encoding, Cookie";
	add_header Cache-Control "#!# HTML_CACHE_CONTROL #!#";
	add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
	add_header X-Rocket-Nginx-Reason $rocket_reason;
	add_header X-Rocket-Nginx-File $rocket_file;
	#!# INCLUDE_GLOBAL #!#
	#!# INCLUDE_HTTP #!#
}

# Debug header (when file is not cached)
add_header X-Rocket-Nginx-Serving-Static $rocket_is_bypassed;
add_header X-Rocket-Nginx-Reason $rocket_reason;
add_header X-Rocket-Nginx-File $rocket_file;
#!# INCLUDE_GLOBAL #!#


###################################################################################################
# BROWSER CSS CACHE
#
location ~* \.css$ {
	etag on;
	gzip_vary on;
	expires #!# CSS_EXPIRATION #!#;
	#!# INCLUDE_GLOBAL #!#
	#!# INCLUDE_CSS #!#
}


###################################################################################################
# BROWSER JS CACHE
#
location ~* \.js$ {
	etag on;
	gzip_vary on;
	expires #!# JS_EXPIRATION #!#;
	#!# INCLUDE_GLOBAL #!#
	#!# INCLUDE_JS #!#
}


###################################################################################################
# BROWSER MEDIA CACHE
#
location ~* \.(#!# MEDIA_EXTENSIONS #!#)$ {
	etag on;
	expires #!# MEDIA_EXPIRATION #!#;
	#!# INCLUDE_GLOBAL #!#
	#!# INCLUDE_MEDIA #!#
}


nginx rocket1
When finished, press ESC to exit the editor, continue to press :x to save the content and exit the main screen.

Step 2: Locate the Nginx configuration file of the website

To determine the website’s Nginx configuration file, you can quickly determine it through the VPS’s Nginx configuration file.

You type the command nginx -t to check the operation and path of Nginx, now the system will display the path of the Nginx configuration file of the VPS (the part is circled in red)

Note: When installed, each control panel will have a different Nginx path, so you need to pay attention and use the exact path displayed on your VPS and do it correctly.

nginx rocket2

You open the nginx.conf file is shown with the command below:

AZDIGI Tutorial
vi /www/server/nginx/conf/nginx.conf
    

You find the line with the word “include” (the part I circled in red), this is the path containing the Nginx configuration file of the websites on the VPS.

nginx rocket3 1

You exit and navigate to the Nginx configuration path of the website with the command:

AZDIGI Tutorial
cd /www/server/panel/vhost/nginx
    

Use the ll command to list the configuration files (eg, I’m configuring the website azdigi.cf, the file to edit will be azdigi.cf.conf)

nginx rocket4

Step 3: Declare the wprocket.conf file path with the website’s Nginx configuration

After you have determined the path of the website’s Nginx configuration file (in step 2), you proceed to open the file and edit it with the command below:

AZDIGI Tutorial
vi azdigi.cf.conf
include /www/wwwroot/azdigi.cf/wprocket.conf
    

Command annotation:

  • Open the Nginx website configuration file
  • Declare the wprocket.conf file path (created in step 1)
nginx rocket5
When finished, press ESC to exit the editor, continue to press :x to save the content and exit the main screen.

Now you recheck the operation of Nginx with the command nginx –t, if you receive the message “test is successful“, is completed.

Step 4: Check the website

You access the website admin page => go to the WP-Rocket Plugin to clear and reload the cache.

Next, go to the website and press F12, select the Network tab => Headers to check => you notice the line X-Rocket-Nginx-Bypass: Yes, it has been successfully configured.

nginx rocket7

Summary

Thus, AZDIGI has shown you how to configure WP-Rocket with Nginx in the most detailed and simple way. This configuration helps WP-Rocket Plugin work best and optimally on servers using Nginx. If you find the article helpful, please share it widely.

If you find the article helpful, please share it widely.

Wishing you success!

If you need assistance, you can contact support in the ways below:

Đánh giá

Tham gia nhóm hỗ trợ Server - Hosting

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay

Bài viết cùng chuyên mục

AZDIGI – Không chỉ là đơn vị hàng đầu trong lĩnh vực Web Hosting và Máy chủ, chúng tôi mong muốn mang lại những kiến thức bổ ích nhất và luôn cập nhật thường xuyên cho cộng đồng người đam mê thiết kế website, công nghệ,…

Vui lòng không sao chép nội dung nếu chưa xin phép. Designed and Developed by PenciDesign