aws – JoeBai Dot Com, Inc.

HTTP2 Bad Header Fix for Elastic Beanstalk

Had issues with Safari not loading WordPress sites running on AWS Elastic Beanstalk. Looked for solutions, everything pointed to setting H2Upgrade off in an httpd config file. I tried seven different combinations before I came up with this fix –

Use .platform/hooks/postdeploy to run a script that builds a config file in /etc/httpd/conf.d during deployment
Use another file in the same folder, named to run later, to restart https

File 1 – .platform/hooks/postdeploy/02_httpd_config.sh

#!/usr/bin/env bash
echo “02_httpd_conf.sh running”
target=/etc/httpd/conf.d/safari.conf
target_d=/etc/httpd/conf.d
if [ ! -d $target_d ]; then
echo “$target_d does not exist”
else
echo “$target_d exists”
fi
if [ ! -f $target ]; then
echo “$target does not exist”
sudo sh -c “cat > $target” <<EOT
H2Upgrade off
Header unset Upgrade
EOT
sudo chown $target
sudo chmod -x $target
sudo ls -al $target_d
else
echo “$target exists”
fi
echo “02_httpd_conf.sh complete”

REMEMBER –
1. Format, indentation is very important in these files.
2. chmod +x .platform/hooks/postdeploy/02_httpd_config.sh or it will not run

File 2 – .platform/hooks/postdeploy/99-httpd_restart.sh

#!/usr/bin/env bash
sudo systemctl restart httpd

REMEMBER –
1. chmod +x .platform/hooks/postdeploy/02_httpd_config.sh or it will not run

2. If you copy this files, beware of “smart quotes”

Beyond looking at the site with Safari, if you use curl -v https://yournamehere.com, you will see

http2 error: Invalid HTTP header field was received: frame type: 1, stream: 1, name: [upgrade], value: [h2,h2c]

After the fix, curl returns html.

In the first file, the unset directive worked, H2Upgrade off did not. I left it in to remind me of what a pain it was to track this down and fix.

Updating WordPress on AWS Elastic Beanstalk

If you have gone through the bother of building WordPress on AWS Elastic Beanstalk and EFS, you probably are not looking forward to the next WordPress update. The simple answer is to do things backwards. Update your server then use the update to update your repo then use your updated repo to update your server. Simple

Login to the wp-admin page for your site
Update WordPress
Update Your Plugins
Update Your Theme
Clean Up Any Lint in Your WordPress
Make a tar of your WordPress directory
scp the tar to Your Workstation
Uncompress it to a temporary directory
Delete All of the Files in Your Update from Your CodeCommit Repo
Copy Everything in Your Update to Your Repo
git add –all
git commit -am “wordpress update”
git push
eb deploy

I wrote a script to do this and put it in the repo so I would always have it. My script looks like this:

# !/bin/bash
# this file is present in the local document root, it must be run from that location
# get the server name from AWS
myserver=$(aws ec2 describe-instances –region us-east-1 –profile MYPROFILE | grep -m 1 PublicDns | awk ‘{print $2}’ | sed -e ‘s/\”//g’ -e’s/\,//’)

# run a command on the server to bundle up the Elastic Beanstalk document root
ssh -i ~/.ssh/MYCERT.pem ec2-user@$myserver -t ‘tar -czvf ~/wp-new.tar.gz -C /var/app/current/ .’

# copy the bundle from the server to the local workstation
scp -i ~/.ssh/MYCERT.pem ec2-user@$myserver:wp-new.tar.gz ~/Downloads

# decompress the image in the Downloads directory
mkdir ~/Downloads/wp-new
tar -C ~/Downloads/wp-new -xvzf ~/Downloads/wp-new.tar.gz

# delete all of the files found in the extract from the local repository
ls -1 ~/Downloads/wp-new | xargs /bin/rm -rf

# copy the server document root into the local repository
cp -R ~/Downloads/wp-new/ .

# remove the upload directory to keep the deploy from failing
rm -f wp-content/update

# the following lines are only needed for Code Commit implementations
ts=/bin/date +%Y%m%d%H%M
git add –all
git commit -am “wordpress update $ts”

#clean up
rm -rf ~/Downloads/wp-new
rm -f ~/Downloads/wp-new.tar.gz

# the following line pushes the update to the elastic beanstalk instance
eb deploy