Deploy Angular application to Google Cloud Storage (GCP) with GZip compression

After publishing the previous story about how to compress Angular application, and deploy it to Azure Blob Storage, I have been getting many requests/questions asking how to compress and deploy the same to Google Cloud Storage bucket.

The problem statement, background have been covered in previous story. So here I will directly jump to GCP solution. If you haven’t read it, then please do so.

Google Cloud Storage Bucket Setup

Let’s create a bucket to deploy our Angular application. We would like to make this bucket public. To do so, we will have to change the permissions.

1. Select the target GCP bucket and go to its details.
2. Click on “Permission” tab, and click on “Add”. In the modal box, enter allUsers in “New principals” and Storage Object Viewer in “Role”.
3. Click on “Save”. This will make your bucket public. BE CAREFUL WHAT YOU UPLOAD IN THIS BUCKET. ANYONE CAN VIEW IT.

Build Angular app with — base-href

The important step while building an Angular application is to specify the --base-href. Because, once deployed, the GCP Bucket prefix name will be required to access the script, link and other resources. Let’s build an application with command as follows. Make sure you put the forward slash/ in front and back of bucket name.

Syntax: ng build -c production --base-href /<BUCKET_NAME>/
For example: ng build -c production --base-href /ng-compression-demo/

Deploy Angular app to GCP Bucket using gsutil

There are many ways to upload Angular application to GCP Bucket. The simplest one is to manually upload files to the Bucket. And then apply Content-Encoding: gzip metadata to each object manually or via some script.

In this story, we will use gsutil a tool from GCP to upload files. This tool has options to compress the files while uploading, apply metadata headers in a single command. Install gsutil tool locally. You can find detailed information here.