Three Options
there are three options for deploying a Front End Application to Google cloud as shown below. Option 3 is best for a Production Web site – but for a web site that is pre-production or in a pilot state, then option 1 is the best option due to price.
| Option | Description | Cost Per Annum |
|---|---|---|
| Firebase Hosting with DNS CNAME Entry | This is relatively easy to set up and is free, so this is the preferred option. https was the default option. | USD $12.00 for Custom domain Name |
| Google Cloud Storage Bucket with DNS CNAME | This option provided a web site with http. I did not figure out how to configure https. | USD $14.62 |
| Google Cloud Storage Bucket with Network Load Balancer | This was an expensive option. The Network Load Balancer was relatively expensive. | USD $274.22 |
Links
- https://medium.com/google-cloud/creating-a-static-website-using-google-cloud-storage-814c3b90ec8a
- https://stackoverflow.com/questions/40735724/connect-google-domain-to-google-cloud-bucket
- https://download.huihoo.com/google/gdgdevkit/DVD1/developers.google.com/storage/docs/website-configuration.html
- https://firebase.google.com/docs/hosting
CNAME
Create a CNAME Entry for your Web Site such as shown in the last line below. In this example, I purchased the domain rtModule.com from Google Cloud Domains for USD $12.00.
Set Up Firebase Hosting
Use Link 4 above to setup Firebase Hosting. Then create the Linux Bash script below, which you can then run whenever you want to deploy your App to Firebase.
Deployment Script
The Script below can be used to deploy your React App as a static web application hosted on Firebase.
In the case below, Vite is used to pack up the React application into a folder called “dist” – which is then deployed to the Firebase.
# This script deploys the React app to Firebase.
# The App can be access from either of these two URLs:
#
# https://www.my_app.com
# https://my_project_id.web.app
# Firebase Directory for Firebase Project rtmodule-50115
FB_DIR="/home/my_user_name/app/firebase_project"
# Front End directory
FE_DIR="/home/doug/app/my-app/my-front-end"
# Change directory the the front-end directory
cd $FE_DIR
# Build the application and create the dist folder
npm run build
# upload firestore rules
firebase deploy --only firestore:rules
# create the firebase application directory if it does not already exist
mkdir -p $FB_DIR
# remove the old public folder
rm -rf $FB_DIR/public
# Copy the dist folder down into the folder and rename it to 'public'
cp -r $FE_DIR/dist $FB_DIR/public
# Change directory to the firebase project directory
cd $FB_DIR
# Upload Files
firebase deploy --only hosting
Leave a Reply