Currently we are using React to generate static files, and then use Apache (aka httpd
on AWS) to host it, as well as handling SSL certs.
Apache install
sudo apt install httpd # For AWS sudo apt install apache2 # For Azure
Configure Apache (already done on current Dashboard frontend machine)
# For AWS, file is at: /etc/httpd/conf/httpd.conf # For Azure, file is at: /etc/apache2/apache2.conf <VirtualHost *:443> DocumentRoot "/var/www/html" ServerName "dashboard.diaper.cf" ServerAlias "dashboard.diaper.cf" SSLEngine on SSLCertificateFile "/etc/letsencrypt/live/diaper.cf/fullchain.pem" SSLCertificateKeyFile "/etc/letsencrypt/live/diaper.cf/privkey.pem" <Directory "/var/www/html"> order allow,deny allow from all RewriteEngine on RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^(.*) /index.html [NC,L] </Directory> </VirtualHost> <VirtualHost *:80> ServerName "dashboard.diaper.cf" Redirect permanent / https://dashboard.diaper.cf </VirtualHost>
Generate static files with React
npm run build .env // Replace `.env` with your actual environmental variables
Note: The env var file must be in the listed filenames at https://create-react-app.dev/docs/adding-custom-environment-variables/
Copy the static files ( build
folder) to Apache folder
First, upload the generated build
folder (from the previous step) onto the Dashboard Frontend AWS Server. One of many choices is to use FileZilla
I've put a script that will copy and update the static files to Apache folder automatically as follows.
It's rather self-explanatory
Note: Usually updating content does not require Apache
to restart – You can verify if new content is hosted by refreshing your browser, particularly by Command
+ Shift
+ R
to refresh to empty the current page's cache and reload.
# File at Dashboard frontend machine's /home/ec2-user/deploy-react/run-deploy.sh echo "============================================================================================" echo "=== This is a script to copy React 'build/' folder contents to be hosted by Apache httpd ===" echo "============================================================================================" echo "** Please run me with sudo **" echo "Have you copied the 'build/' folder into this directory? (choose answer number below)" select yn in "Y" "N"; do case $yn in Y) rm -r /var/www/html/*; cp -r ./build/* /var/www/html/; echo "== Done =="; break;; N) exit;; esac done
If you update the SSL certs, Apache must be restarted by
sudo systemctl restart httpd