Cloud Resume Challenge (GCP)
Documentation
Last updated
Documentation
Last updated
First, we need to design how the site will work, how the backend will send visitor count, and how we can automate the process. So the above illustration shows us how all of the systems are done.
Frontend Repository: This repository will focus on the front end of the website, including HTML, CSS, and JS files. It will contain the Bootstrapmade template, customized content, and any additional frontend-related assets. Developers can work on improving the design, layout, and user interface in this repository.
Backend Repository: This repository will house both the Cloud Function and Infrastructure components.
Cloud Function and Infrastructure: This directory within the Backend repository will contain the Python 3.10 code for the cloud function responsible for managing the visitor count. It will also include the necessary Terraform scripts for creating and managing the infrastructure resources, such as the storage bucket and serverless API.
By combining the Cloud Function and Infrastructure within the Backend repository, developers can work on both aspects of the backend functionality in a unified environment. This approach allows for streamlined collaboration and version control while maintaining a clear separation between the frontend and backend components.
The website is built using HTML, CSS, and JavaScript (JS) to create an engaging and interactive user experience. Here's a brief overview of each technology used:
HTML: The website's structure and content are created using HTML (Hypertext Markup Language). It provides the foundation for organizing and presenting various elements, such as headers, paragraphs, images, and links.
CSS: CSS (Cascading Style Sheets) is used to style and visually enhance the website. It controls the layout, colours, fonts, and overall visual presentation of the HTML elements, ensuring a visually appealing and cohesive design.
Bootstrapmade Template: The website design is based on a template provided by Bootstrapmade, specifically the folio template. This template serves as the starting point, providing a solid foundation for the website's layout and design.
JavaScript (JS): JS is used to add dynamic and interactive elements to the website. Two JS files are utilized:
main.js: This file enhances the user experience by incorporating various functionalities such as smooth scrolling, showing/hiding the navbar, providing a responsive menu, implementing the Owl Carousel for displaying services, enabling image magnification, and integrating portfolio isotope filtering. It helps create a more user-friendly and interactive browsing experience.
visitor_count.js: This file serves a significant purpose by triggering a cloud function to retrieve and display the visitor count in real time. It showcases the capabilities of serverless functions and adds a dynamic element to the website, providing visitors with an indication of its popularity and engagement.
By leveraging HTML, CSS, and JavaScript, the website combines visually appealing design, responsive layouts, and dynamic functionalities to create an engaging and informative experience for visitors.
Cloud Build is a powerful automation tool utilized for automating front-end processes in the context of the cloud resume website. The following is a concise documentation of how Cloud Build orchestrates the necessary tasks:
Detection of Repository Updates: Cloud Build actively monitors the connected GitHub repository for any updates or changes.
Triggering Execution: As soon as an update is detected in the repository, Cloud Build automatically initiates the automation process.
Execution of updatebucket.sh: Cloud Build executes the updatebucket.sh script, which is a bash file containing the essential commands for the deployment process.
Bucket Existence Check: Within the updatebucket.sh script, the first step is to check if a storage bucket with a specific name already exists.
Bucket Creation and Content Copy: If the bucket does not exist, Cloud Build proceeds to create a new bucket with the specified name. It then copies all the necessary website content into the newly created bucket.
Bucket Update: In case the bucket already exists, Cloud Build directly copies the updated items to the existing bucket, ensuring that the website content is up to date.
CDN Invalidation: Following the bucket update, Cloud Build triggers the invalidation process for the CDN (Content Delivery Network). This step ensures that users can access the most recent version of the website without encountering any caching issues.
By following this automated process, Cloud Build simplifies the deployment of updates to the cloud resume website. It takes care of creating or updating the storage bucket as well as refreshing the CDN, ultimately ensuring a seamless experience for users accessing the website.
The backend functionality of the website is implemented using a Python 3.10 cloud function. Here's a documentation of how the function works:
Wait for Request: The function waits for a GET or POST request from a website.
Check Visitor Count: Upon receiving a request, the function checks if the visitor count is available in Firestore (a cloud-based NoSQL database).
Increment Visitor Count: If a visitor count exists, the function retrieves the current value and increments it by 1 to include the current request.
Update Firestore: The updated visitor count is saved back to Firestore, ensuring it is persisted for future reference.
Send Response: Finally, the function responds to the requesting website by sending the new visitor count value as a JSON dump.
By efficiently handling incoming requests, managing the visitor count, and persisting the data in Firestore, this Python 3.10 function provides a dynamic and accurate representation of the website's visitor count.
To streamline the process of updating the website and managing its infrastructure, Cloud Build and Terraform can be integrated. Here's an overview of how these tools work together:
Cloud Build Configuration: When a new update is detected in the repository, Cloud Build is triggered. A configuration file, usually named cloudbuild.yaml, is used to define the necessary steps and actions.
Initiation, Planning, and Applying: Cloud Build initiates Terraform within the build process. It runs the Terraform commands for initialization, planning, and applying the changes to the website's infrastructure.
Terraform and Storage Bucket: Within the Terraform scripts, the first step is to create a storage bucket. This bucket serves as the storage location for the cloud function code and related files.
Creating the Cloud Function: After creating the storage bucket, Terraform proceeds to create the cloud function. It uses the stored function code to establish a serverless API, enabling the website to interact with the cloud function.
Adding User Permissions: To ensure appropriate access and visibility, Terraform configures the required user permissions. This step grants users the necessary privileges to view and access the visitor count value and other relevant functionalities.
By integrating Cloud Build and Terraform, the process of updating the website and managing its infrastructure becomes more efficient and automated. Cloud Build handles the triggering and execution of necessary steps, while Terraform handles the creation of the storage bucket, cloud function, and permissions management. This integration streamlines the deployment and maintenance process for the website and its associated resources.
Issue: Adding load balancing and CDN for the site automation through Terraform with host verification for a third-party domain.
Challenge: The process of adding load balancing and CDN to the website's infrastructure automation through Terraform requires host verification. As the website uses a third-party domain, host verification may take time, and finding a way to solve this issue or manually performing the task can be challenging.
Resolution: Due to the host verification requirement and potential delays, it may be more convenient and safer to handle the load balancing and CDN setup manually rather than through automation with Terraform. The manual configuration ensures that the process is executed accurately and allows for immediate adjustments if needed.
Manual Load Balancing Setup:
Verify Ownership: Begin by verifying the ownership of the website with Google. Follow Google's documentation and steps for custom domain ownership verification.
Create Load Balancer: Once ownership is verified, create an HTTPS/HTTP load balancer. This can be done through the Google Cloud Platform (GCP) console or using the appropriate command-line tools.
Frontend Configuration: In the load balancer's frontend configuration, select HTTPS and either create a new SSL certificate or use a pre-existing certificate. This ensures a secure connection for the website. Additionally, tick the option to redirect HTTP requests to HTTPS for a safer browsing experience. Note that this redirect option is typically the last question asked during load balancer creation in the GCP console.
Backend Connection: Connect or create a backend bucket in the load balancer's backend configuration. This backend bucket should contain the website's files and content.
Finalize and Run Setup: Once all configurations are complete, finalize and run the load balancer setup. This will initiate the deployment of the load balancer and its associated configurations.
Wait for SSL Certificate: After setup, it may take approximately 20 to 30 minutes for the SSL certificate to be created. During this time, the certificate is generated and applied to the load balancer.
Site Availability: Once the SSL certificate is created, the website can be accessed and viewed securely by customers.
Considerations: Manual load balancing setup is chosen due to host verification requirements and potential delays. It allows for greater control over the process and immediate adjustments if needed. If a more efficient automated method becomes available in the future, it can be adopted and documented accordingly.
By following these steps and considerations, users can manually set up load balancing for their website, ensuring a secure and efficient browsing experience for their customers.
Add Firestore to Terraform: In future updates, consider adding the configuration for Firestore to the Terraform scripts. This will allow for the automated provisioning and management of the Firestore database, ensuring consistency and reproducibility in the infrastructure setup.
Automatic Creation of Firestore Document: Enhance the cloud function to automatically create a Firestore document if it is not found. This can be done by incorporating logic within the function to check for the existence of the document and, if not present, create a new document with the necessary initial data.
Load Balancing Automation in Terraform: If a reliable and efficient method for automating load balancing is thoroughly learned and understood, consider adding load balancing to the Terraform scripts. This will enable the automated provisioning and configuration of load-balancing infrastructure, ensuring scalability and high availability for the website.
By implementing these updates, the project will benefit from increased automation, streamlined infrastructure management, and enhanced scalability. It is important to continuously explore and adopt new automation techniques and best practices to optimize the project's performance and maintain its competitiveness in the long run.