Hosting a static website on Google Cloud Storage

Hosting a static website on a cloud bucket: Pros and Cons

Hosting a static website on a cloud bucket is a cost-effective and efficient solution for many Web developers and businesses. Static websites, which consist of HTML, CSS and JavaScript files without server-side processing, are ideal candidates for hosting on a cloud bucket.

There are several advantages to this approach:

1. Cost-effective: you pay only for the storage and bandwidth you use, with no server maintenance costs.
2. Scalability: it automatically handles traffic spikes without needing manual intervention.
3. High availability and durability: cloud providers usually guarantee high durability and availability by replicating data across multiple regions.
4. Easy integration: it seamlessly integrates with other cloud services for enhanced security and performance (e.g., CDN).
5. Ease of setup: configuring a cloud bucket to host a static website is relatively simple and requires a few steps.
6. Versioning: it supports maintaining multiple versions of files, enabling easy recovery from unintended deletions or overwrites.

However, there are also some drawbacks:

1. Limited to static content: it cannot handle dynamic content or server-side scripting (e.g., PHP, Python or Node.js).
2. Vendor lock-In: it ties you into the cloud provider ecosystem, which might be a downside for those looking for multi-cloud strategies.
3. Cost of additional features: while storage is inexpensive, adding features like a CDN for global distribution can increase costs.
4. Domain management: setting up custom domains requires additional steps, including DNS management.
5. Debugging and logging limitations: although cloud providers offer logging tools, they might not be as straightforward as analyzing logs from a traditional web server.

Given these pros and cons, we can state that hosting on a cloud bucket is ideal for blogs, portfolios, documentation, and simple business sites.

Let’s see how.

Hosting a static website on Google Cloud Storage

Interested in hosting your website? Check out our step-by-step guides on hosting a website on Google Cloud Storage.

1. Create a Google Cloud Storage Bucket

First, we need to create a project for the bucket hosted in Google Cloud Storage.

1. Log in to the Google Cloud Console.
2. Create a project.
3. Navigate to the Cloud Storage service.
4. Create a new bucket.
   1. Enter a globally unique name.
      
   2. Choose a region
      
   3. Allow public access.
      
   4. Keep the default values for all other options.

2. Configure Bucket for Static Website Hosting

Update the bucket website configuration to specify the index document and, optionally, the error document. The index document is the default webpage that will be displayed when users access your site, while the error document is shown when a requested page cannot be found.

3. Set permissions

Update the bucket permissions to grant read-only access to all users.

4. Upload your website files

1. Prepare the files: ensure you have all the static files of your website ready for upload. This includes HTML, CSS, JavaScript, images, and any other necessary assets.
2. Build modern Web apps: if you are using modern front-end development technologies like React, Angular, Vue.js etc., you need to run the build command to generate the optimized, production-ready version of your application. Each framework has its own build command:
   1. React: Run npm run build or yarn build.
   2. Angular: Run ng build --prod.
   3. Vue.js: Run npm run build or yarn build.
3. Upload the generated build: after running the build command, a folder (typically named build or dist) will be generated containing all the necessary files for your Web app. Upload the entire contents of this folder to your bucket.

This process can be automated using Continuous Integration/Continuous Deployment (CI/CD) pipelines on Google Cloud. By setting up a CI/CD pipeline with cloud source repositories for source code management and cloud build for automated builds, you can automatically build and deploy your website files to the bucket whenever changes are made, ensuring a smooth and efficient deployment process.

5. Access your website

Your static website is now accessible.
The URL will be in the format: https://{YOUR_BUCKET_NAME}.storage.googleapis.com/index.html, where {YOUR_BUCKET_NAME} should be replaced with the proper value.

However, in most cases, this alone is not sufficient as we often desire to use a custom domain. To achieve this, we need to configure a load balancer.

6. Add Load Balancer

As said before, in our scenario, we require a load balancer to utilize a custom domain for our static website hosted on Cloud Storage. The load balancer acts as a traffic distribution mechanism, directing incoming requests from users to the appropriate backend services.

Hence, we should create a load balancer with the following features:

• Application Load Balancer (ALB): ALB provides advanced routing capabilities and supports multiple protocols, making it suitable for modern applications with diverse traffic requirements. It allows for efficient distribution of incoming requests across multiple targets, improving application availability and scalability.
  
• Public facing: A public-facing load balancer is essential for serving Web traffic from the internet. It acts as the entry point for incoming requests, providing a secure and scalable interface between users and the application.
  
• Best for global workloads: ALB is well-suited for global workloads as it offers intelligent traffic distribution based on various factors such as geographic location, latency, and health of targets. This ensures optimal performance and reliability for users accessing the application from different regions around the world.
  
• Classic traffic management: With classic traffic management, the load balancer uses traditional methods such as round-robin or least connections to distribute traffic among backend targets. While not as sophisticated as modern routing algorithms, classic traffic management is simple and effective for many applications, providing a reliable way to balance the load across servers.
  

7. Configure Load Balancer

In Google Cloud, it’s essential to configure both frontend and backend components to set up an Application Load Balancer (ALB) successfully.

Frontend

The frontend configuration defines how incoming traffic is received by the load balancer. This includes specifying the IP address, port, protocol (HTTP or HTTPS), SSL certificates (if applicable), and any other settings related to accepting incoming requests. Essentially, the frontend acts as the entry point for external traffic, routing it to the appropriate backend services based on defined rules.

Below are the steps required to configure the ALB frontend:

1. Enter a name and select HTTPS as the protocol.
   
2. Add a certificate. You can provide your existing certificate or let Google generate one.
   
3. Keep the default values for all other options.

Backend

The backend configuration defines how traffic is distributed and managed once it has been received by the load balancer. This involves specifying the backend services or target pools that will receive the traffic, along with any health checks, session affinity settings, or other parameters that govern how traffic is routed to these backend services. The backend is responsible for handling requests and providing responses back to the clients through the load balancer.

In our scenario, we simply need to select the bucket we created earlier.

8. Configure the DNS

Finally, in your DNS configuration, you need to add an A record that points to the load balancer’s IP address. This is necessary to ensure that traffic directed to your domain is routed correctly through the load balancer, allowing it to distribute incoming requests to your backend services efficiently.

Example:

In the next article, we will deepen Amazon S3.