How To Host a Vue.js Static Website With GCP Cloud Storage

A step by step guide with an example project

There are a number of ways you can build a website with Vue.js such as Java with Vue, NodeJS with Vue, NGINX serving Vue, etc. For the single-page applications, all you need to do is to load the initial index.html. Once you load the index.html the Vue library kicks in and do the rest of the job like loading component, calling API calls, etc. What if there are no backend calls and you want to build a static website with Vue.js?

GCP Cloud Storage is a globally unified, scalable, and highly durable object storage for developers and enterprises. We can configure a Cloud Storage bucket to host a static website for a domain you own. The index.html from the Vue UI can be placed in the bucket along with all the related HTML, CSS, and JavaScript files.

• Why This Approach
• Example Project
• Prerequisites
• Create a Bucket With Public Access
• Build the Vue project With Relative Path
• Upload and Test
• Next Steps
• Summary
• Conclusion

Why This Approach

GCP Cloud Storage static web hosting gives you the ability to serve an entire website directly from it. You should consider this approach when

• There is a lot of dynamic logic on the client-side instead of on the server-side.
• There are microservices in your project and you need to call those with CORS enabled.
• Your website is simple such as Profile page
• Ideal for caching of read-mostly websites
• With Cloud CDN, You can distribute the content globally with less latency and improve the performance significantly.

Example Project

Here is an example project which we can put in the GCP Cloud Storage for static website hosting. This is a simple profile page with a header and some sections.

// clone the project
git clone https://github.com/bbachi/my-profile-vuejs.git

// install dependencies and start the project
npm install
npm run serve

You can clone the project and run it on your machine. Here is the demonstration when you run it on your localhost and the port 8080.

Prerequisites

We need to create a Google Cloud Platform account from this URL. You can create an account and login to Cloud Console.

Create a project called StaticWeb-Test (You can name whatever you want).

Create a New Project

Once the project is created you can view the project dashboard like below. You can see all the resources that you create under this project.

Create a Billing Account

You need to create a Billing Account by clicking on the Billing tab on the left navigation. For example, I created a Billing Account called Development Account

You can see all the details of the Billing Account on the overview page

Link Billing Account With this project

We need to link this Billing Account called Development Account with this project as shown in the following figure. You can enable or disable billing at any time.

Create a Bucket With Public Access

The following are the series of steps that we need to follow in order to create a static website with GCP cloud storage.

Create a bucket

Let’s create a bucket called staticvuejsweb and upload all the Vue code into the bucket.

We need to select a location where you store the data. If you want high availability you can select Multi-region. We can choose the Region for this article.

We have four kinds of storage classes: Standard, Nearline, Coldline, and Archive for different use cases. We will just select Standard for this use case.

We need to select Access Control for our bucket. It is either Fine-grained or Uniform. To make individual objects in your bucket publicly accessible, you need to switch your bucket’s Access control mode to Fine-grained. Generally, making all files in your bucket publicly accessible is easier and faster.

Finally, we hit the button Create to create the bucket.

Make it Public

We have created a bucket and it’s time to make it public. Let’s click on the overflow button and click on Edit bucket permissions.

We need to add a member called allUsers with the role Storage Object Viewer and Allow Public Access to make it public.

After you have done the above steps you can actually see the Public access status as Public to internet

Build the Vue project With Relative Path

Let’s build the Vue project with the relative path of the bucket name. For example, we have a bucket name called staticvuejsweb so we have to build the Vue UI with this relative path.

This is because all the files uploaded to the cloud storage can be accessed with the bucket name prefix. All the js files, CSS files that are accessed in the index.html should have this relative path.

We need to add the following entry in the file called vue.config.js

When we run the command npm run build it will add the relative path staticvuejsweb in the index.html.

Upload and Test

All the files under the dist folder should be uploaded into the bucket as below.

Since we have all the objects with public access. Let’s copy the link of the index.html https://storage.googleapis.com/staticvuejsweb/index.html

Next Steps

• You can clean up all the resources and buckets once you test it out

• You can do all these steps with Google Cloud CLI as well. Here is the link about it. You can go ahead download and install it.
• If you have a domain name and you need to create a bucket name with the same name. For example, if your domain name is example.com you have to create a bucket name www.example.com
• You can set index file and error pages with the following command with the help of CLI

gsutil web set -m index.html -e 404.html gs://www.example.com

• To serve your website through HTTPS, you need an SSL certificate. This section shows you how to add your bucket to a load balancer’s backend and how to add a new Google-managed SSL certificate to the load balancer’s front end.
• Go through this post for completing all the steps such as load balancing, SSL certificates, etc.
• Here are some of the tips hosting a static website on GCP.
• You can set up with Cloud CDN in front of the Cloud Storage to distribute the content globally with less latency.

Summary

• There are a number of ways you can build a website with Vue such as Java with Vue, NodeJS with Vue, NGINX serving Vue, etc.
• GCP Cloud Storage is a globally unified, scalable, and highly durable object storage for developers and enterprises.
• The index.html from the Vue UI can be placed in the bucket along with all the related HTML, CSS, and JavaScript files.
• You need to create a GCP account, project, and enable a billing account on the project as prerequisites.
• You can create the static website with the help of Console, Google Cloud CLI, SDK, and REST API.
• You should build a Vue UI with the relative path as same as the bucket name.

Conclusion

GCP cloud storage is one of the options for static website hosting and we can even plugin API with Cloud Functions to get any API data or dynamic data. We will see those in future posts.