Introduction

Imagine getting a job or being assigned a task in your organization, probably as a new intern to host the company's website on Google Cloud but you must use a load balancer to share network traffic appropriately and also secure it using an SSL certificate. Do you know how to do that? If not, let's walk through it together.

In today's digital environment, businesses of all sizes must manage cloud resources effectively and securely. Businesses depend more on cloud infrastructure, so grasping the fundamental ideas and resources is critical. This article aims to explain a few basic features of Google Cloud Platform (GCP) and offer a step-by-step tutorial for creating a landing page with GCP services and your domain name.

Definitions of important terms like landing pages, folders, projects, DNS zones, and static websites will be covered. After that, we'll go over the actual procedures for setting up a safe and orderly cloud environment. After reading this article, you should be able to deploy a static website on GCP using your domain name, manage access controls, and easily arrange cloud resources.

Definitions

Folders: For your cloud resources, you can set up an orderly and controllable structure that will guarantee effective access control, billing management, and compliance.

Projects: They offer a mechanism to enforce quotas, manage billing, restrict access, and hierarchically arrange resources. To manage your GCP environment effectively and securely, you must understand how to use projects.

DNS Zone: You can arrange and manage DNS records for your domain names with DNS Zones. They can be private for internal use only within your VPC networks, or public for access to the internet. These zones are yours to make and maintain, and you can add different kinds of DNS records as needed. For domain names to correctly resolve to their corresponding IP addresses and for other services, DNS zone management is essential.

Static Website: Google Cloud Storage makes it simple to host a static website on Google Cloud Platform. Benefits include GCP's performance, dependability, and scalability. For websites where content doesn't need to be dynamically generated or updated often, this method is perfect.

Landing Page: With Google Cloud Storage, a landing page on Google Cloud Platform can be hosted effectively. This strategy makes use of GCP's strong infrastructure to provide your audience with high-performance static content while emphasizing simplicity, speed, and security.

Steps

Step 1: Create folder, project & Permission grant to Cloud Developer

i. Log into the google console you created your company domain name. My own domain name for this project is adaezennamdi.me. You should have yours which should have been added to a record set on DNS Zone and also mapped on a name server.

ii. On your search in your console, search for manage resource and click on it. Click on create folder, then folder, and name it Landing Page. The Organization and Location should all be your website organization name then click create.

iii. Click on Create Project to create a project called landing page. The Organization should be your website organization name and the Location, click on browse and pick Landing Page. Go ahead and click Create.

It would be best if you had something like this below if you are following the steps.

iv. Grant permission to user (owner) gcpcloudadmin. I have created a cloud admin before. Go ahead and create yours and give the admin account owner permission because that is the account we are using to do this project. Click on the pencil icon and edit principal.

v. Click on Role>> Basic>>Owner. Click on save.

Step 2: Download the Source Code and Test

i. We will be using a source code gotten from a template here. Download any HTML template. I will be using this one.

ii. Open the downloaded file and unzip it. We will be using the folders and files in our bucket.

iii. Test the code with your vs code to see the way the website looks. Open the unzipped folder with VS Code and open it on the browser by clicking below it where it says go live from the image below.

This is what I have after going live to test the sourced codes.

Step 3: Create a Bucket with the Company's domain and upload web files

i. Verify your company domain name first with this link below (https://search.google.com/search-console?authuser=1). Input your domain name and click continue

ii. Copy the code for verification and follow the prompt written. After which, come back to verify and you will see something like this.

iii. When you click on go to property, you will see an overview of what the performance of your website will be when it is hosted and visited.

iv. Create a bucket using the company's root domain name which you verified from the previous step. Go back to your google console and search for cloud storage. Click on it and click bucket. You will be asked to pick a project. Click the landing page project we created earlier in Step 1.

v. Click on enable billing before you proceed else you would not be able to use any of the services or resources.

.

vi. If you do not have up to 3 projects attached to your billing account, it should work for you and look like this.

vii. In your search bar, search for IAM & Admin and click on it. Click on IAM then on Grant Access. For New Principal, put your organization name. Mine is adaezennamdi.me. For Role, type and click on Organization Policy Administrator. Then click Save.

viii. You would see the policy just like this against your organization. This policy will give you permission to grant all users public access to your bucket storage.

ix. Under IAM & Admin, click on Organization Policies by your left-hand side. In the filter search bar, type domain and pick constraints/iam.allowedPolicyMemberDomains.

x. For Policy source,pick overide parent's policy.

xi. For Rule, edit it to allow all. Click set policy.

xii. You should have something like this after setting the policy.

xiii. Go back to your bucket. On your created bucket, click the 3 vertical dots by your extreme right and click on edit access.

xiv. For New Principal, put allUsers. For Role, type and click on Storage Object Viewer. Then click Save. This is to make all users over the internet see your website. Click Save and you will be prompted with Allow public access. Click on it.

xv. Under your created bucket, upload all the files of the template you want to use, then the folders.

xvi. Click on your bucket name and then scroll down through the files and click on the 3 vertical lines on index.hmtl. Click on Copy Public URL. copy the link and paste on your browser.

xvii. Your URL should look like this but with your own bucket name. This is the website I hosted shown below. You will see that your URL is not customized to carry your domain name. We will work on that.

Step 4: Set up HTTPS Load Balancer with SSL Certificate)

i. On your google console, navigate to your load balancer page by searching for the service inside the console. If you are asked to enable API for Compute Engine, click the button.

ii. Click on create load balancer to start the process. Click on any of the create load balancer you see.

iii. For Type of load balancer,pick Application Load Balancer (HTTP/HTTPS),then click next. For Public facing or internal, pick Public facing (external) and click next. For Global or single region deployment, click Best for global workloads. Click next. For Load balancer generation, click Global external Application Load Balancer and then next. Click configure to Create load balancer.

iv. For load balancer name,call it landingpage-lb. Under Frontend configuration,name it landingpage-frontend. For protocol,pick HTTPS. For port,put 443. For Ip address, click on the drop-down and click create IP address. Name it landing-pub-ip and click Reserve.

v. Under certificate, click on create a new certificate.

vi. For name of certificate,let the name be landing-cert. For Create mode, click on Create Google-managed certificate. For Domains, input your domain name for the first one and add www to the domain name for the second domain name. Click on Create.

vii. Under Additional Certificates, let SSL Policy be GCP Default. Let HTTP/3 (QUIC) negotiation be left as default. Check the box Enable HTTP to HTTPS redirect and click done.

viii. For Backend configuration, click on the dropdown backend services & backend buckets and click create a backend bucket.

ix. For Backend bucket name, let it be landing-backend. For
Cloud Storage bucket click on browse. Select the bucket you create earlier on and click select.

x. For Cloud CDN, tick Enable Cloud CDN.For Client TTL, Default TTL, and Maximum TTL, leave them with the default value.Leave every other parameter as default and click create. Click OK on the next prompt you see.

xi. For Routing rules,leave everything as default. Click on Review and finalize and make sure everything is in order and then click create.

xii. You should see something like this with the green checkmarks. if someone is trying to visit your website,with the information below,the person will be redirected to https.

Step 5: Create a domain record in Azure DNS Zone

i. Click on the link called landingpage-lb from the image above. Copy the IP address there. You will go and map it in your DNS server where you created the domain name and mapped your txt record. In my case, I used Azure DNS zone. If you did this project, under step 5,number vi,where we added a record for Azure. You will add same for google too in same place. That is why I am using same account carrying my domain name to map A record and CNAME record. The image below is for A record

ii. If you used azure to map your own records,then go to your azure portal, navigate to DNS ZONE, then click on DNS Management and recordsets under it. Click on Add to add record set.

iii. Name can be empty or you use @, Type should be A-Address Record, IP address should be the IP address from your load balancer you created from earlier step under IP:Port. Leave everything else at default and click Add.

iv. We will add another record type called CNAME.Name should be www and Type should be CNAME record. Your domain name will automatically show as your alias. Then click Add.

V. It will be mapped to your domain name like this even if you don't add it, as long as you are doing it under the domain name record.

vi. Use a DNS Checker to see that your domain name propagates across the world and it shows the IP address you inputted in the A record.

vii. Do the same for CNAME records too.

viii. You should see this on the certificate page after some minutes. It would have provisioned.

ix. You will see your website if you use the CNAME record with www.your domain name, and if you input just your domain name, you will see your website.

x. When you are done, delete your resources like bucket storage, load balancer, and SSL certificate in your google console.

Conclusion

Multiple steps are involved in setting up and maintaining a landing page on Google Cloud Platform, all of which contribute to a stable and secure cloud environment. You can guarantee effective access control, billing, and compliance management through comprehension and application of GCP's resources, including Folders, Projects, and DNS Zones. Performance, dependability, and scalability are just a few advantages that make hosting a static website on GCP a great option for many businesses.

This detailed documented steps thoroughly explain how to create a GCP project, configure required permissions, confirm domain ownership, and launch a static webpage. By following these procedures, you can use GCP's robust infrastructure to provide your audience with high-performance static content and guarantee a smooth and effective experience.

I would love to know if you found this helpful and if you could try it out. Your likes and comments will go a long way in encouraging me to keep writing more. See you in my next article!