Codementor Events

How to build a website using Google cloud?

Published Oct 30, 2019Last updated Nov 26, 2019
How to build a website using Google cloud?

Google Cloud is mostly used to host a website. Here, we will talk about how to host a website on the Google cloud platform. In order to host a website, first, we need to configure a cloud storage bucket. And then we upload and share the website’s files. Ultimately, we test the website.

Creating a CNAME Record
A CNAME record is a kind of DNS record. It directs traffic that requests a URL from your domain to the resources you want to serve. For a domain like www.xyz.com, the CNAME record contains the following information:

image1.png

Creating a bucket
In order to connect your domain to cloud storage:
Create a CNAME record that points to c.storage.googleapis.com. And your domain registration should have a proper path to administer your domain including adding a CNAME record.

For instance, if you add a CNAME record pointing www.xyz.com to c.storage.googleapis.com, then you will require creating a bucket with the name of www.xyz.com
CONSOLE
To create a bucket:
Open cloud storage browser in the Google cloud platform console.
Click on ‘Create bucket’ to open the bucket creation form.
Enter your bucket information and click Continue to complete each step.
The Name of your bucket.
The storage class and location for your bucket.
The access control model for your bucket.
Click on Create.
If it is successful, it will take you to the bucket’s page where you see the text that ‘there are no objects in this bucket’.

GSUTIL

Use gsutil mb command:
Gsutil mb gs: //www.xyz.com

If successful, the command returns:
Creating gs: //www.xyz.com/

CODE SAMPLES
C++
image2.png

C#
image3.png

GO
image4.png

JAVA
image5.png

NODE.JS
image6.png

PHP
image7.png

PYTHON
image8.png

RUBY
image9.png

REST APIS
JSON API
Get an authorization access token from the OAuth 2.0 playground. Configure the playground to use your own OAuth credentials.
Create a.json file that assigns your website name to the NAME property.

Use cURL to call the JSON api. For www.xyz.com:

XML API

Get an authorization access token from the OAuth 2.0 playground. Configure the playground to use your own OAuth credentials.
Use cURL to call the XML API with a PUT object request. For the index page of www.xyz.com

Uploading your website’s files
To add to your bucket the files you want your website to serve:
CONSOLE
Open the cloud storage browser in the Google cloud platform console.
In the list of buckets, click on the name of the bucket that you made.
Click on the Upload files button in the Objects tab.
In the file dialog, browse to the desired file and select it.

Once the upload finishes, you should see the file name along with the file information shown in the bucket.

GSUTIL

Use the gsutil cp command to copy files to your bucket. For instance, to copy the file index.html from its present location
Desktop:
Gsutil cp Desktop/index.html gs: //www.xyz.com

If successful, then the command returns:

image10.png

CODE SAMPLES

C++
image11.png

C#

image12.png

GO
image13.png

JAVA
image14.png

NODE.JS
image15.png

PHP
image16.png

PYTHON
image17.png

RUBY
image18.png

REST APIS
JSON API
Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials.
Use cURL to call the JSON API with a POST object request. For the index page of www.xyz.com

curl -X POST --data-binary @index.html
-H "Content-Type: text/html"
-H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg"
"https://www.googleapis.com/upload/storage/v1/b/www.xyz.com/o?uploadType=media&name=index.html"
XML API
Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials.
Use cURL to call the XML API with a PUT Object request. For the index page of www.xyz.com

image19.png

Sharing your files
Either you can make all files in your bucket publicly accessible or you can set individual objects to be accessible through your website. Usually, creating all the files in your bucket accessible is easier and faster.

In order to create all files accessible, follow the cloud storage guide for making groups of objects publicly readable.
To create individual files accessible, follow the Cloud Storage guide for making individual objects publicly readable.
If you select to control the accessibility of individual files, you can set the default object ACL for your bucket so that all the files uploaded to your bucket are shared by default.

Recommended: Assigning specialty pages
You can assign an index page suffix which is controlled by the MainPageSuffix property and a custom error page, which is controlled by the NotFoundPage property. Assigning either is optional, but without an index page, nothing is served when users access your top-level site. For instance, http://www.xyz.com

Index pages
An index page (also known as a web server directory index) is a file served to visitors when they request a URL that does not have an associated file. When you assign a MainPageSuffix, cloud storage looks for a file with that name whose prefix matches the URL the visitor requested.

For instance, let’s suppose that you set the MainPageSuffix of your static website to index.html. Additionally, suppose you have no file named directory in your bucket www.xyz.com. In this case, if a user requests the URL http://www.xyz.com/directory, Cloud storage attempts to serve the file www.xyz.com/directory/index.html. If that file does not exist, Cloud storage returns an error page.

The MainPageSuffix also controls the file served when users request the top-level website. Continuing the above instance, if a user requests http:// www.xyz.com, cloud storage attempts to serve the file www.xyz.com/index.html.

Error Page
The error page is the file returned to visitors of your static website who request a Universal Resource Locator(URL) that does not correspond to an existing file. If you have assigned a MainPageSuffix, cloud storage only returns the error page if there is neither a file with the requested name nor an applicable index page.

When returning the error page, the http response code is 404. The property that controls which file acts the error page is NotFoundPage, users receive a generic error page.

Setting MainPageSuffix and NotFoundPage
In the following sample, the MainPage Suffix is set to index.html and NotFoundPage is set to 404.html:

CONSOLE
Open the cloud storage browser in the Google cloud platform console.
In the list of buckets, search the bucket you made.
Click on the More actions icon and then move next to the bucket. Also, choose the Edit website configuration.
In the configure website dialog, Indicate the Main Page and the 404 (Not Found) Page.
Click on Save.

GSUTIL
Use the gsutil web set command to set the MainPageSuffix property with the -mflag and the NotFoundPage with the -e flag:

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

If successful, the command returns:

Setting the website config on gs://www.xyz.com/...

Testing the website
Verify the content is served from the bucket by requesting the domain name in a browser. You can do this using a path to an object or with just the domain name if you set the MainPageSuffix property.

For instance, if you have an object named test.html stored in a bucket named www.xyz.com, check that it’s accessible by going to www.xyz.com/test.html in your browser.

Wrapping up
Hence, now you have enough knowledge on how to create a website using google cloud. However, there are certain web development companies that can create visually appealing and fully functional websites for your project.

Discover and read more posts from Roger James
get started
post commentsBe the first to share your opinion
Show more replies