Versions Compared

Old Version 2

changes.mady.by.user user-0432d

Saved on

compared with

New Version Current

changes.mady.by.user Unknown User (zl942)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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 

...

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.

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

...