Hosting Your Company's landing page (static website) on Google Cloud Using HTTPS & HTTP With Azure DNS Zone record
Tags: googlecloud, dnsserver, dnsnamerecord, azure
Published: 2024-06-04 14:16:21

## 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](https://console.cloud.google.com/) 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**.

![Folders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mk1atbooh0d8sqg3arfy.png)

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**.

![project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssts29cgom3mtkx53uip.png)
 
It would be best if you had something like this below if you are following the steps.

![organisation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nul4j8agzdtp2dnijcfb.png)

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**.

![admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12fsi3t6fnvljy9bhsbg.png)

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


![Role](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9hd10i96e2enab06ba4.png)


### Step 2: Download the Source Code and Test

i. We will be using a source code gotten from a template [here](https://www.tooplate.com/free-templates#google_vignette). Download any HTML template. I will be using this [one](https://www.tooplate.com/view/2131-wedding-lite).

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. 


![VS code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d39tdzqs0ou2frhaiwmq.png)


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


![website page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eezuxpatijowpelum7zc.png)



### 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**

![verify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jygkpblwn50ttp4oqkc1.png)

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

![verify again](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u5yk8hcfe51661uc9mr.png)

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.

![performance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcbtf322tmca49vr0kat.png)

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.


![billing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s9u191zegb8cyg7t970.png).

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


![billing again](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1glsv1q868pv640b12nu.png)

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**.

![Policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb5mo4826u835yiynlaq.png)

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.

![organization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwip7xrg7ojggnsqmbuo.png)


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`.


![domain policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2lc9ys707vmszqa5mnf.png)

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

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

![Rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cv77lmvsesqf61tn21g.png)

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

![policy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uku08q0bto7oagwkgf7i.png)



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


![edit access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3t0nji5h2xoy26nz7yg.png)



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.

![website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvu69rvkeeg34yh4uq0v.png)

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


![template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ribg4m6mfbz0pjdxh5vf.png)



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.


![public url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd0fc7i6ozsulz6icx9d.png)

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.


![DNS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/al189xt3rhxsyxzqor30.png)

### 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.

![create load balancer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23s3duxxok5z3k4o268p.png)

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**.


![Reserve](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vwf77wiuu0wivqbbyz0.png)

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

![create a new certificate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1d50fjkhrhqc2638ojsc.png)

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**.

![create certificate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az6pftfqdvozbrwvb48r.png)

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**. 


![backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1e5b48iq5bofnvwgkazq.png)

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**.


![backend bucket name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k55ex5biqt14ku4yawn0.png)

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.


![TTL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n41aqj14wtgb7te0with.png)

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

![routing rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyifuk0b25jy6xh872tn.png)

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.


![https](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7vs5qsmx9180ey8pvcj.png)


### 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](https://dev.to/clouddiadem/step-by-step-guide-setting-up-azure-entra-id-with-domain-names-and-user-management-3dno), 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.

![DNS zone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2gpginilh6ddnj56hkd.png)



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**.


![IP port](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9sseyr0cz7fg5av2uc9.png)

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**.


![CNAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dp5qe2ybmnonfuzqe0l.png)
 
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.


![domain name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myimqb1hnu9bc8kxdusn.png)

vi. Use a [DNS Checker](https://dnschecker.org/) to see that your domain name propagates across the world and it shows the IP address you inputted in the A record.


![DNS checker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ese1xpj7eer5356ixuv3.png)

vii. Do the same for CNAME records too.

![CNAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcscmufecwwofhgklf26.png)


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


![provision](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0npb483z3birvwtjseku.png)

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.


![domain name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s9zcyfktgqec1nreyeh.png)

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!