Lab 1. Provisioning Durable Storage with S3


in this lab we are going to shift our local product details and codes to AWS S3 buckets and make dinostoredegraded bucket act as a static web host.


Amazon Simple Storage Service is storage for the Internet. It is designed to make web-scale computing easier for developers. Amazon S3 has a simple web services interface that you can use to store and retrieve any amount of data, at any time, from anywhere on the web.

In this Lab you will learn:

  • How to create a S3 bucket and how to store objects in them.
  • How to make the folders and the objects Public.
  • How to change the local storage database path and replace it with the cloud storage path.

As mentioned above we will create a S3 bucket in Amazon Web Services in order to store objects that needs to complete this lab and some configuration files that needed to be edited such as Jquery file, bootstrap file, css files.

The image shown below is the architecture for this lab.


First to create a S3 bucket you have to sign-in to your AWS account and click on services and select S3 service.

After selecting S3 service click on +Create bucket and create two S3 buckets and name them as follows:

  • dinostoreresourcesskr
  • dinostoredegradedskr

Note: the bucket names must be unique as for me i have used my name initials at the end of each name.

Click on dinostoreresourcesskr bucket you created and create folders inside it, to create folders click on +Create folder. the folders that should contain inside the bucket are :

  • Siteimages
  • productimages
  • css(for style sheets)
  • js(for java script)
  • configurations (for config files)


Inside product images click on Upload add the product images from the folder which contains the images. for me the local path in my computer is:

  • NET702.DinoStore\ NET702.DinoStore\Content\images\product*.png files(Upload it in productimages).
  • NET702.DinoStore\ NET702.DinoStore\Content\images\glyph*.png and logo.png files(Upload it siteimages).

Upload the all the images files in the same exact way as mentioned above.


Find the bootstrap.css file from your local computer and open it in visual studio find the ‘background-image:url’ and change the link to point to the appropriate cloud S3 based image [glyphicon-halflings image].


The image below shows the code line that have to change in the bootstrap.css file. replace the url with the following url which is provided by S3 services. click on save all.



Now the saved bootstrap.css file should be uploaded to the css folder you created on cloud, Upload the bootstrap.js and jquery-2.0.2.js files to the js folder as well.


When you are done uploading the above files to their respected folders, Go to visual studio and click on the ‘index.html’. you can find this file in your solution explore in the right hand side.

In the ‘index.html’ edit the href link of the bootstrap.css with the appropriate S3 cloud file link and do the same steps to the jquery-2.0.2.js script and for the bootstrap.js script get the appropriate links from the S3 cloud, edit.


To get the appropriate link click on the css folder to get the bootstrap.css click on the file you uploaded, you can get the link from the overview tab copy and paste the link in the correct line.


For the jquery script and the bootstrap.js click on the js folder, click on the files and go to the overview tab and get the link and edit the correct line.


When you are done editing the ‘index.html’ file save it and upload it to the dinostoredegraded bucket and make the file public.


To make the fine public> click on the file > go to permissions in the manage group permissions give the read and write permissions to everyone.


To make the dinostoredegraded bucket act as a website > click on the bucket and click on the properties tab click on Static website hosting.


Click on use this bucket to host a website, Under index document type ‘index.html’ and in error document type ‘error.html’. Click on save.


To make the dinostoreresources folder public tick all the folders.


Go to permission tab and click on everyone under manage group permissions. Give read and write permissions and click on save.


To check if the folders are public > go to product images > click on a image you uploaded > click the link which is provided on the overview tab and you will able to see the image in a new tab in your browser. if not check the permission and change the permission if it hasn’t been changed.


To switch your code to use S3 objects in visual studio click on site1.master change the link to point at the cloud bootstrap.css file and do the same steps to jquery and bootstrap.js.


Replace the site logo link with the cloud link.


Go to your mySQL work bench, in the query window type and run:’select*from products’ and it will bring up the product table. Edit the image reference field for each dinosaur and give the S3 cloud link.


Once its done click on apply.


Once its applied go to your visual studio and click on build and right click on Default.aspx and click on view in browser.

when the site appears on the broswer right click on the image and click on inspect. you will able to see if the element is from local database or from the cloud.


When all of these steps are done you have completed the lab successfully.


By the end of this lab you have learned:

  • How to create a S3 bucket and how to store objects in them.
  • How to make the folders and the objects Public.
  • How to change the local storage database path and replace it with the cloud storage path.

Budget Plan

When you are using amazon S3 pay only for what you use. There is no minimun fee for this service, As a part of the AWS free usage tier you can get started with the amazon S3 for free. The new customers will receive up to 5GB of S3 storage and 20,000 requests. The price varies from region to region, I created my S3 services in US West (Oregon) the standard price of S3 bucket in oregon is $0.023 per GB.

There is Glacier storage too its the price is very low, but it’s kind of slow when comparing to the standard storage and the price varies according to the regions.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s