Skip to main content

WordPress Site is not loading properly behind Google Cloud/AWS Load Balancer

Hello Guys,

Today we are going to understand how can we fix a WordPress loading issue (CSS and JS loading issue) behind the Google Cloud Load Balancer or AWS Load Balancer.

Generally, When we host a WordPress site directly with Google Cloud Compute Engine VM instance or AWS EC2 instance. It's loading perfectly fine.

But once we added this WordPress server behind any Load Balancer either from GCP Load Balancer or AWS Load Balancer, you site will completely broken, means the CSS and JS of your site not loaded properly.

The reason for this is - When you put a load balancer in front of WordPress, you need to modify wp-config.php to process the HTTP header HTTP_X_FORWARDED_PROTO to detect the protocol that the user is using and not the protocol the load balancer is using to connect to your backend.

To fix this issue, we have to make following changes in the wp-config.php file and add the below code snippet on the top of wp-config.php file -

Google Cloud Platform Load Balancer: 

if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false)
{
$_SERVER['HTTPS']='on';
}
if ( isset($_SERVER['HTTP_X_FORWARDED_FOR']) && !empty($_SERVER['HTTP_X_FORWARDED_FOR']) )
{
$ips = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']);
$_SERVER['REMOTE_ADDR'] = trim($ips[0]);
}
elseif ( isset($_SERVER['HTTP_X_REAL_IP']) && !empty($_SERVER['HTTP_X_REAL_IP']) )
{
$_SERVER['REMOTE_ADDR'] = $_SERVER['HTTP_X_REAL_IP'];
} elseif ( isset($_SERVER['HTTP_CLIENT_IP']) && !empty($_SERVER['HTTP_CLIENT_IP']) )
{
$_SERVER['REMOTE_ADDR'] = $_SERVER['HTTP_CLIENT_IP'];
}

Amazon Web Services Load Balancer:

When your page is accessed over HTTPS, but the Amazon Load Balancer is performing SSL offloading and actually requesting your content on the non-SSL port 80, the webserver, PHP, or anything else for that matter, does not understand or see that it's being accessed over https://.

The fix for this is that Amazon's ELB sends the de-facto standard X-Forwarded-Proto HTTP header, which we can use to figure out which protocol the client is actually using on the other side of the Load Balancer.

With Apache 2.2, you could use something along the lines of: Through Apache Configuration

<IfModule mod_setenvif.c>
SetEnvIf X-Forwarded-Proto "^https$" HTTPS
</IfModule>


This simply reads the X-Forwarded-Proto header. If this value equals https then the HTTPS environment variable is set to 1. PHP will see this environment variable, and eventually, it will become $_SERVER['HTTPS'] that equals 1 -- just like it would be for a "real" native SSL request.

Same can be achieved through 
wp-config.php file


if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false)
$_SERVER['HTTPS']='on';











Popular posts from this blog

Git and GitHub Commands Mastery

1. Setup Git and GitHub Global Configuration  git config --global user.email "gautamthakur1983@gmail.com" git config --global user.name "Gautam Thakur" git config --global list git config --list 2. Git Lifecycle | Initilize, Status, Add, Commit git status git init git add git commit -m "Commit Message" git log git log --oneline 3. Git Difference between last commit changes and current version changes git diff 4. Git Compare between 2 different Git Commits git diff eac4c5b 82485b1 5. Git Statsh - To save some changes for temporary purpose ## Pop take out stash and clear but apply take out stash but not clear git stash (To save current changes for temporary) git stash pop (To take out all stash contents) git stash list git stash clear (To clear all the stash changes) git stash save "NAME"  git stash save "NAME1" (Working with multiple stash) git stash sapply 0 or 1 (0 for name, 1 for about) after that run git stash clear git stash clear 6...

How to install Let's Encrypt SSL Certificate in Ubuntu 18.04/NGINX?

In this post, we will see, how to install Let's Encrypt SSL Certificate on NGINX webserver. Steps are pretty straight forward and easy. First, add the repository: sudo add-apt-repository ppa:certbot/certbot   You’ll need to press ENTER to accept. Install Certbot’s Nginx package with apt: sudo apt install python-certbot-nginx    Install Let's Encrypt SSL Certificate sudo certbot --nginx -d jenkins.cloudshades.in      Follow the screen and provide the required input. Like email-id, permanent redirection to https etc.