Lab 1: Provisioning Durable Storage with S3

Provisioning durable storage
The first action in this lab is to create two S3 buckets. As bucket names are unique, I cannot call them what the lab script suggests, so I have added my initials at the end of the names in order to make them unique.
The two buckets created are: dinostoreresources-kc and dinostoredegraded-kc.

-First Bucket Cropped-Second Bucket Cropped

Within the dinostoreresources-kc, the following files are created:
> siteimages
> productimages
> css
> js
> configurations
001 Create Folders

Into the productimages file, all of the png files that start with product are uploaded from the local DinoStore\content folder.
002 Upload Files to productimages

Into the siteimages files, all of the png files that start with glyph, and the logo image, are uploaded from the local DinoStore\content folder.
004 Upload Files to siteimages

In Visual Studio, in the bootstrap.css file, the ‘background-image:url’ the link needs to be changed  to point to the S3 image. This is done by copying the full S3 link and replacing the background image URL with this link.
Inked005 Changing Background Image URL

In the css file in dinostoreresources, the bootstrap.css file from the local DinoStore\content folder.
In the js file, the bootstrap.js and jquery-2.0.2.js files are uploaded from the local DinoStore\scripts folder.

In Visual Studio, in the Solution Items window, the ‘index.html’ text can be personalized, I have personalized the h2 string. The href of bootstrap css is adjusted to link to my S3 css file, as also, are the jquery-2.0.2.js and bootstrap.js script links.
Inked008 Editing Index_HTML in VS

In the dinostoredegraded-kc bucket, the local index.html file is uploaded and then made public.

This slideshow requires JavaScript.

The dinostoredegraded-kc can act as a website by changing the bucket’s properties and enabling ‘Static Web Hosting’. The lab script makes mention that the index settings need to be pointed to the appropriate html file.
011 Static Web Hosting

In order to make the code use the S3 files, the following adjustments in MySQL and Visual Studio need to be made.
>  In Visual Studio, in the site1.master page:
-bootstrap.css link to point to respective cloud file
-jquery-2.0.2.js link to point to respective cloud file
-bootstrap.js link to point to respective cloud file
-site logo link to cloud logo image
Inked015 Master page Transfer link to Cloud

>  In MySQL workbench:
-The image reference field in the product table needs to be changed to the link of the images in the S3 cloud file.
016 Changing MySQL Image Location

The final steps are to build the project and open it in my web browser, then inspect the image elements to determine whether they are being sourced from the cloud or locally.
017 Image Domain for Dinostore
They are sourced from the S3 domain, which means that I’ve been successful in changing the storage and pointer to my S3 buckets.

Challenges
I didn’t find this lab to be challenging. However, as I was unfamiliar with enabling the static web hosting, I only filled out what I understood needed to be input. This may be a source of problems within later labs. If so, then I will adjust the static web hosting settings accordingly and update this blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s