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.
sudo apt install httpd # For AWS sudo apt install apache2 # For Azure |
# 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> |
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/
build
folder) to Apache folderFirst, 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 |
sudo systemctl restart httpd |