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
Code Block |
---|
sudo apt install httpd # For AWS sudo apt install apache2 # For Azure |
Configure Apache (already done on current Dashboard frontend machine)
Code Block |
---|
# 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
Code Block |
---|
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
...
Code Block |
---|
# 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
Code Block |
---|
sudo systemctl restart httpd |
...