Hosting React PWA with WordPress backend on AWS

AWS Configuration

Create a new EC2 instance using the ‘WordPress Certified by Bitnami and Automattic’ AMI. Follow the default setup and launch the instance. Once the instance has launched attach an elastic IP.

Domain Configuration

Setup your DNS records as follows:

	Type	IP
	A	Elastic IP
www	A	Elastic IP
wordpress	A	Elastic IP

Server Configuration

General

SSH into the server

ssh -i ~/.ssh/examplecom.pem bitnami@example.com

Create SSL certificates using LetsEncrypt

sudo /opt/bitnami/letsencrypt/scripts/generate-certificate.sh -m email@example.com -d example.com -d www.example.com -d wordpress.example.com

Edit /opt/bitnami/apache2/conf/bitnami/bitnami-apps-vhosts.conf

# Bitnami applications installed in a Virtual Host
Include "/opt/bitnami/apps/pwa/conf/httpd-vhosts.conf"
Include "/opt/bitnami/apps/wordpress/conf/httpd-vhosts.conf"

WordPress

Edit /opt/bitnami/apps/wordpress/conf/httpd-vhosts.conf

<VirtualHost *:80>
  ServerName wordpress.example.com
  DocumentRoot "/opt/bitnami/apps/wordpress/htdocs"

  Include "/opt/bitnami/apps/wordpress/conf/httpd-app.conf"
</VirtualHost>

<VirtualHost *:443>
  ServerName wordpress.example.com
  DocumentRoot "/opt/bitnami/apps/wordpress/htdocs"

  SSLEngine on
  SSLCertificateFile "/opt/bitnami/apache2/conf/example.com.crt"
  SSLCertificateKeyFile "/opt/bitnami/apache2/conf/example.com.key"

  Include "/opt/bitnami/apps/wordpress/conf/httpd-app.conf"
</VirtualHost>

Edit /opt/bitnami/apps/wordpress/htdocs/wp-config.php and update WP_HOME and WP_SITEURL:

define('WP_HOME','https://wordpress.example.com/');
define('WP_SITEURL','https://wordpress.example.com/');

Restart the server

sudo /opt/bitnami/ctlscript.sh restart

React PWA

Create the application skeleton

sudo mkdir /opt/bitnami/apps/pwa;
sudo mkdir /opt/bitnami/apps/pwa/conf;
sudo mkdir /opt/bitnami/apps/pwa/htdocs;

Create /opt/bitnami/apps/pwa/conf/httpd-app.conf with the following content

<Directory "/opt/bitnami/apps/pwa/htdocs">
    Options +MultiViews +FollowSymLinks
    AllowOverride None
    <IfVersion < 2.3 >
        Order allow,deny
        Allow from all
    </IfVersion>
    <IfVersion >= 2.3>
        Require all granted
    </IfVersion>

    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
</Directory>

Create /opt/bitnami/apps/pwa/conf/httpd-vhosts.conf with the following content

<VirtualHost *:80>
  ServerName example.com
  ServerAlias www.example.com
  DocumentRoot "/opt/bitnami/apps/pwa/htdocs"

  Include "/opt/bitnami/apps/pwa/conf/httpd-app.conf"
</VirtualHost>

<VirtualHost *:443>
  ServerName example.com
  ServerAlias www.example.com
  DocumentRoot "/opt/bitnami/apps/pwa/htdocs"

  SSLEngine on
  SSLCertificateFile "/opt/bitnami/apache2/conf/example.com.crt"
  SSLCertificateKeyFile "/opt/bitnami/apache2/conf/example.com.key"

  Include "/opt/bitnami/apps/pwa/conf/httpd-app.conf"
</VirtualHost>

Restart the server

sudo /opt/bitnami/ctlscript.sh restart

Deploy your react app to /opt/bitnami/apps/pwa/htdocs using your prefered method.

For a simple deployment I add a new script deploy to my package.json which builds the react app and uses SCP to upload it to the server. You can use this as is if using Create React App.

"deploy": "react-scripts build; scp -r -i ~/.ssh/examplecom.pem ./build/* bitnami@example.com:/opt/bitnami/apps/pwa/htdocs/"