Update WebServer Config To Support Smush Pro

Mark Irvine 5 Reputation points
2023-11-22T11:41:05.4833333+00:00

I'm running a WordPress site that was created using "WordPress on App Service". The Smush plugin (image optimisation) is included by default. I've purchased a Pro license for the plugin and would like to use the Local Webp feature. This requires the following to be added to nginx config:

# BEGIN SMUSH-WEBP
location ~* "wp-content\/(uploads\/)(.*\.(?:png|jpe?g))" {
	add_header Vary Accept;
	set $image_path $2;
	if (-f "/var/www/wordpress/wp-content/smush-webp/disable_smush_webp") {
		break;
	}
	if ($http_accept !~* "webp") {
		break;
	}
	expires	max;
	try_files /wp-content/smush-webp/$image_path.webp $uri =404;
}
# END SMUSH-WEBP

My question is how can I do this with the container used for this AppService? I've read other articles, e.g. https://techcommunity.microsoft.com/t5/apps-on-azure-blog/configure-nginx-for-php-8-linux-azure-app-service/ba-p/3069373, however the container is different.

I've created a file at /home/nginx.conf.default which contains the update (above). When I check the status of nginx (service nginx status) is reports stopped - even after a fresh start. Any attempt to start it shows the following error:

2023/11/22 11:39:08 [emerg] 7533#7533: bind() to 0.0.0.0:80 failed (98: Address in use)

nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address in use)

2023/11/22 11:39:08 [emerg] 7533#7533: bind() to 0.0.0.0:80 failed (98: Address in use)

nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address in use)

2023/11/22 11:39:08 [emerg] 7533#7533: bind() to 0.0.0.0:80 failed (98: Address in use)

nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address in use)

2023/11/22 11:39:08 [emerg] 7533#7533: bind() to 0.0.0.0:80 failed (98: Address in use)

nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address in use)

2023/11/22 11:39:08 [emerg] 7533#7533: bind() to 0.0.0.0:80 failed (98: Address in use)

nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address in use)

2023/11/22 11:39:08 [emerg] 7533#7533: still could not bind()

I'm assuming another webserver is running? Is there a way to update the config of the webserver to include the smush config?

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
8,960 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. brtrach-MSFT 17,741 Reputation points Microsoft Employee Moderator
    2023-11-23T00:10:33.8533333+00:00

    @Mark Irvine Hello! To update the nginx configuration for your WordPress site running on Azure App Service, you can follow these steps:

    1. SSH into your App Service instance using the Azure Cloud Shell or any other SSH client.
    2. Navigate to the /home directory and create a backup of the default nginx configuration file by running the following command:
    sudo cp /etc/nginx/nginx.conf /home/nginx.conf.default
    
    1. Open the nginx configuration file in a text editor by running the following command:
    sudo nano /etc/nginx/nginx.conf
    
    1. Add the following code block to the http section of the configuration file:
    # BEGIN SMUSH-WEBP
    location ~* "wp-content\/(uploads\/)(.*\.(?:png|jpe?g))" {
        add_header Vary Accept;
        set $image_path $2;
        if (-f "/var/www/wordpress/wp-content/smush-webp/disable_smush_webp") {
            break;
        }
        if ($http_accept !~* "webp") {
            break;
        }
        expires	max;
        try_files /wp-content/smush-webp/$image_path.webp $uri =404;
    }
    # END SMUSH-WEBP
    
    
    
    1. Save the changes to the configuration file and exit the text editor.
    2. Test the configuration file for syntax errors by running the following command:
    sudo nginx -t
    
    
    

    If there are no syntax errors, you should see the following message:

    nginx: configuration file /etc/nginx/nginx.conf test is successful
    
    1. Restart the nginx service by running the following command:
    sudo service nginx restart
    

    If you see an error message about the port being in use, it's possible that another web server is running on the same port. You can check which process is using port 80 by running the following command:

    sudo lsof -i :80
    

    This will show you the process ID (PID) of the process using port 80. You can then use the following command to stop the process:

    sudo kill <PID>
    
    
    1. Replace <PID> with the actual process ID.
    1 person found this answer helpful.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.