WordPress and the world of Nginx reverse proxies

What do you do on your weekends? I get to have my WordPress up and running and accessible via Nginx reverse proxy. The proxy have been running quite some time to make my other services accessible to me outside Azure Haus.

I encountered some roadblocks that took out my entire weekend, not bad for a first timer. There is not much help from the internet or I just could not find any that fits my needs.

My router is configured to forward 80 and 443 requests to Nginx Server, Poseidon which is a Synology DS218+ NAS is running
DSM 6.2.2-24922 Update 3. The following packages were added.

  • WordPress 5.2
  • Web Station
  • Apache HTTP Server 2.2
  • PHP 5.6
  • Maria DB 10
  • PHP 7.3 (Optional, I installed later)
  • Apache HTTP Server 2.4 (Optional)
  • Text Editor (Optional but useful for editing while in DSM)

Installing WordPress from package center will install the pre-requisites. This is a wizard and it will guide you. I only set the passwords and did not really change anything else.

After all the set-up and password, a new shared folder “Web” will be created. Inside it will be “WordPress”.

  1. Inside WordPress, Copy .htaccess and index.php
  2. Go up to Web and Paste .htaccess and index.php
  3. Edit index.php and add ‘/wordpress/banner.php’
  4. Rename or delete index.html from Web

Pointing the browser to poseidon.azure-haus.local from http redirect to https. Tada! Freshly installed and spanking with all default texts. After Login as admin (using the credentials during the installation) brings me to the Dash Board with some Red Notice:

You should update PHP and some more blah blah..

There were no straight forward answer from the internet on how to do the update with the DSM setup, but I did figure out setting up a Virtual Host on Web Station fixed the notice on the virtual host.

  1. Install PHP 7.3 from Synology Package Center
  2. From DSM, Open Web Station
  3. General Settings:
    • HTTP back-end server: Nginx
    • PHP: Default Profile ( PHP 7.3 )
  4. PHP Settings: Edit Default Profile for PHP 7.3, check mysqli
  5. Virtual Host:
    • Named-based Hostname: azure-haus.com; HTTPS Port: (Redacted)
    • Document root: Web
    • HTTP back-end server: Apache HTTP Server 2.4
    • PHP: Default Profile ( 7.3 )

Access from the local network now works well, I get to the explore more on the Dashboard .. Change Themes and add some texts. Now it is time to release this to the wild and continue editing from there.

To expose the service to external access, I could open a port on my router and point it to the virtual host or create a record on the Nginx server and point it to the virtual host. I decided to use the later approach which is same with the other services on my local network. After adding a record on the reverse proxy server with all the SSL and suff, it should be working well. However upon checking using my mobile data, the site looks so weird and something went wrong.

All I see is unformatted text (No CSS and No Images)

At first I am not sure what caused the problem. Thinking that this maybe reverse proxy issue, I decided to test by forwarding router ports but the results are the same. Next steps fixed the issue.

  • Set-up host SSL same as reverse proxy SSL
  • Modify website settings from WordPress dashboard, set-up as same as the previously set virtual host.

WordPress now works well, css and images are loaded. Lastly we need to set up permissions om DSM to enable WordPress file uploads.

  1. Open Share settings from DSM
  2. Navigate to web/wordpress
  3. Create RW permission assigned to SYSTEM
    • WordPress uses SYSTEM for file permission
  4. Edit the WordPress config.php
    • Enable Direct File access

Lastly be sure to check and resolve issues pointed out by WordPress advisory…