Your Azure Web App is at example.com:8080

If you are running an Azure Web App on a Linux back-end with code from someone you have not written yourself, you may come across references to https://example.com:8080 when you are opening your app in the browser.

In my case, the application looked at the global PHP variables $_SERVER['SERVER_NAME'] and $_SERVER['SERVER_PORT'] to construct the path to embedded CSS files and JavaScript libraries. This caused most of the page to not load, as the browser is trying to retrieve them from a location that does not exist. As you can see below, PHP set the global variables to example.com and 8080 respectively.

PHP gets these from the Apache/nginx configuration that Azure sets you up with when you deploy a standard Web App.

When we look at the configuration file for nginx, located in /etc/nginx/sites-available/default, we see that it is indeed configured to use example.com and port 8080 as illustrated below.

server {
    ...

    listen 8080;
    listen [::]:8080;
    root /home/site/wwwroot;
    index  index.php index.html index.htm;
    server_name example.com;
    port_in_redirect off;

    ...
}

Unfortunately, we cannot simply change the values here to the ones we need. Azure Web Apps are reverse proxied and the containers listen on port 8080. This is also used by the proxy to probe whether the app is responsive and if it does not respond on that port, it will throw a 502 Gateway Error. Changing the settings here will break your Web App completely.

What we can do, is set the PHP variables manually in this file. This will work until the container restarts as anything outside of your /home directory is not persistent and will be reset to the default upon initialization. However, we can use a startup script to set these values on each start of the container.

Open shell session to your Web App through the SSH blade in the Azure Portal and let’s get to work!

1. Copy the nginx configuration file to persistent storage

cp /etc/nginx/sites-available/default /home/site/nginx.conf

2. Edit the copied nginx configuration file

I like using nano to edit files through the web-based shell in my Web App. It is versatile, easy to use and most key combinations work well through the web shell. Of course, feel free to use any other shell editor you like.

nano /home/site/nginx.conf

We want to add two lines to the location block that sets the SERVER_NAME and SERVER_PORT parameters:

fastcgi_param SERVER_PORT 443;
fastcgi_param SERVER_NAME "<YOUR WEB APP NAME>.azurewebsites.net";

You should end up with a configuration file that should look something like this:

server {
    ...

    location ~ [^/]\.php(/|$) {
        ...

        fastcgi_param SERVER_PORT 443;
        fastcgi_param SERVER_NAME "<YOUR WEB APP NAME>.azurewebsites.net";

        ...
    }

    ...
}

3. Create a startup script

We will now create a script that copies our custom configuration file on Web App startup. Open a blank file to save the script to:

nano /home/site/startup.sh

The script will copy your custom file to the nginx configuration directory and will then reload the nginx service to apply the new configuration. Copy the lines below into the script:

cp /home/site/nginx.conf /etc/nginx/sites-available/default
service nginx reload

4. Enable startup script

Go to the Web App in the Azure Portal and open the Configuration blade. Under the tab General Settings, copy the path to your startup script into the Startup Command input field.

Choose to restart your Web App when asked (or do it manually) and voila, PHP should now show the correct values.