Deploying a full-stack dApp to Google Cloud
In the previous tutorials in this series, we saw how to develop a full-stack ethereum-based blockchain dApp.
In this tutorial, we learn how to deploy the dApp to two of Google's Cloud offerings, Firebase, and Cloud storage.
Google Cloud is a suite of products similar to Amazon's AWS, ranging from computation and databases to storage.
Google Firebase is an abstraction and subset of Google Cloud, making it easier for developers to use Google Cloud infrastructure. For example, Firebase Functions is an easier interface to Cloud Functions. Similarly, Firebase Storage and Hosting is an abstraction built on top of Cloud Storage.
In this tutorial, we cover deploying a dApp to both Firebase and/or Google Cloud Storage.
If you are looking for fully-featured static hosting, then Firebase is the recommended option. Benefits include:
- Free https certificate for your domain
- Free hosting and subdomain from Google (both a
- No complicated setup with CNAME records and bucket setups (e.g. setting up permissions, etc.)
- An easy to use rollback/release history
- No billing setup needed
If you would rather have a barebones static hosting solution, then Google Cloud Storage may be more suited. However, you need to have a domain name ready, be OK with changing some domain records and need to set up your own https certificates (if needed).
For more information on the Google Cloud products and options, see the official Serving Websites documentation.
We assume that you have followed and completed the previous tutorials in this series, and now have:
- A truffle project setup and working,
- Your truffle project contains smart contract code,
- Your truffle project has an existing frontend (in React),
- You have deployed your smart contract code to Rinkeby using Infura, and
- Your React frontend (on localhost) is communicating with your smart contracts on Rinkeby.
- Sign up for Firebase using your Google account.
- Follow the instructions to create a new Firebase project.
- When prompted on the Project Overview page, select Web to create a new web project.
- Name your web app and check the box for Also setup Firebase Hosting for this app.
- You don't need to add the Firebase SDK, so skip the step if asked.
In terminal, install the Firebase CLI:
npm install -g firebase-tools
In the same terminal, sign in to Firebase:
Still in terminal, navigate to the fullstack dApp root directory using the
cd truffle-react-box-frontend/), and initiate the project with
- When prompted, select Hosting, press space bar to select it, then enter to go to the next screen.
- When prompted, select Use an existing project, then select the project you created on the Firebase website.
- When asked What do you want to use as your public directory?, press enter. We will change this manually later.
- When asked Configure as a single-page app (rewrite all URLs to /index.html)?, select y.
Making deployment easy
In your editor, open the newly created
json "public": "public",with:
json "public": "client/build", "predeploy": [ "cd client && npm run build" ],This change tells Firebase to build your React dApp frontend, then use those build files to deploy to Firebase Hosting.
You are now ready to deploy. From your terminal (still in the fullstack dApp root directory), enter:
Accessing your dApp
- Congratulations, your dApp is now live, hosted on Google's scalable infrastructure thanks to Firebase. You can access your dApp by going to the provided
Hosting URLshown in the terminal.
- Whenever you update your React frontend code, repeat step 2 in Making deployment easy to update your live dApp frontend code.
Google Cloud Storage
- Select or create a GCP project on the project selector page
- If you are creating a new project, select the Create in the top right, name your project, and add it to an organization if you would like to keep things organized.
- Since we are utilizing Cloud Storage, you need to enable billing on your account. You will only be charged for costs above the generous free tier.
- You need to have a domain you own. In this tutorial, we use the domain "example.com" as a placeholder.
- To verify that you own the domain and can use it with Cloud Storage, you need to follow the steps to verify that you own or manage the domain.
- If you purchased your domain name via Google Domains, then verification is automatic.
Create a CNAME record
Once you have completed the above, you need to add a CNAME record to your domain. Consult the support documentation of your domain provider to find out how to add one.
CNAMErecord that points to "c.storage.googleapis.com"
NAME TYPE DATA www.example.com CNAME c.storage.googleapis.com
Create a Google Storage bucket
- Go to the Cloud Storage browser and create a bucket whose name matches the CNAME you created.
- Enter the bucket information and choose the default settings for each step.
gsutil utility helps you use the Google Cloud platform from the terminal. Follow the instructions to Install the Cloud SDK. When prompted, choose the project that you created initially.
Upload the dApp's static files
From the terminal, navigate to the fullstack dApp root directory using the
As you would for any React.js based app, create an optimized production build of your frontend:
- Navigate to the
client/directory and run the command:
npm run build
- Navigate to the
In the same
client/directory, run the command:
gsutil rsync -R build gs://www.example.com
- This uploads all the contents of your
client/build/directory to the Storage bucket you created
- This uploads all the contents of your
Make all files in your bucket publicly accessible
- Since we are only hosting a static website in the bucket, we want all the files to be publicly readable.
- In the Cloud Storage browser, select the dApp's website bucket you created.
- Select the Permissions tab.
- Select Enable in the Simplify access control with Bucket Policy Only alert.
- Confirm the selection.
- Select Add members and enter "allUsers" in the New members field, with the "Storage Object Viewer" role.
- Your bucket is now publicly accessible.
- If you set up the CNAME record properly and has propagated, your domain name points to the bucket's contents.
- Congratulations, your dApp is now live, hosted on Google Cloud Storage!
- Whenever you update your React code, follow the steps in Deploying your dApp to update your deployed dApp.