Configure S3 for 360˚ Panoramas

Hey, if this tutorial has helped you, click on the “I’d like to Donate” button at the end of the page.

Update 23 September 2023: As of January 5 2023, Amazon S3 now applies server-side encryption with Amazon S3 managed keys (SSE-S3) as the base level of encryption for every bucket in Amazon S3.

https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucket-encryption.html

I have updated Step 3. Create your first Bucket to reflect the changes, primarily in the Default Encryption section.

Update 29 January 2022: Screenshots updated to reflect changes on the AWS S3 platform.

Update 5 January 2021: On November 11th, 2020, Amazon announced the release of the new S3 Console. The change is wide-ranging and has several significant changes regarding the interface.

Amazon announcement: https://aws.amazon.com/about-aws/whats-new/2020/11/new-amazon-s3-console-improves-upload-speed-common-tasks-easier-manage-storage/

This tutorial has been updated to reflect the User Interface and workflow changes.

An increasing number of 360˚ Panorama photographers are hosting their final project files on the Amazon S3 platform. This tutorial provides step-by-step instructions on how to configure, upload and publish Pano2VR or Krpano project folders on S3.

Note: When I was writing the "Create an AWS Account" tutorial I use the latest version of the Firefox browser. I continued using the Firefox browser in this tutorial but ran into loading issue with the pano.xml file after uploading Pano2VR projects via Firefox. Switching to Google Chrome resolved the issue so I would highly recommend that you use an alternative browser for the publishing tutorial.

The panorama below is the final result of the tutorial and is embedded using the S3 Link URL in an iFrame.

The tutorial is broken down in 6 steps;

  1. Project Folder - the files you will be uploading

  2. Login to Amazon S3 - opening the Console

  3. Create your first Bucket - the steps required to name and create your bucket

  4. Set Permissions - configure the bucket to allow web browsing

  5. Upload the Project Files - uploading and setting permissions on your project files

  6. Displaying the Panorama - using iFrame code to display the panorama from Amazon S3

Step 1. Project Folder

1. Make sure you have a working Pano2VR or Krpano project in a folder that you can upload during the tutorial. My project is a panorama taken in the small village at Wasisi Bay on the Vanuatu island of Tana. (figure #1)

 

Figure #1: Pano2VR Project Folder

 

Step 2. Login to Amazon S3

1. log in to your AWS account by browsing to https://aws.amazon.com/s3/ and clicking on 'Sign In to the Console' (figure #2)

Figure #2: Amazon S3 Homepage

Figure #2: Amazon S3 Homepage

2. If you see two user options select ‘Root user’ and enter the email address you used when you created your AWS account. Click on 'Next' (figure #3)

Figure #3: Sign In email address

3. Enter the Password you used when you created your AWS account and click on 'Sign In' (figure #4)

Figure #4: Sign In password

4. In the AWS Management Console, click on 'All services' dropdown menu (figure #5)

Figure #5: AWS Management Console

5. In the dropdown options click on ‘S3’ in the Storage section (figure #6)

Figure #6: Select S3 in Storage

Step 3. Create your first Bucket

If you haven't created any S3 buckets yet the page will indicate there are 0 buckets (figure #7)

Note: Amazon S3 buckets are like containers for your files. You can name your buckets anyway you like but it must be unique across the Amazon system. There are a number of schemes for naming but in this example I'm going to use a simple name ‘s3360panos’.

1. To start, click on 'Create bucket' button to open the Create bucket page.

Figure #7: S3 buckets page

The Create bucket page has several sections that have to be completed in order to create a bucket. (figure #8)

  • General configuration

  • Bucket settings for Block Public Access

  • Bucket versioning

  • Default encryption

  • Advanced settings

Figure #8: Create bucket popup

1. General configuration: In this section, we will name the bucket and assign it to a region.

1a. Click in the Bucket name field and add the name of your bucket. In my example, I've added the name s3360panos (figure #8)

Note: Bucket names must be at least 3 and no more than 63 characters long and can contain lowercase letters, numbers, and hyphens. Bucket names must be a series of one or more labels. Adjacent labels are separated by a single period (.) Each label must start and end with a lowercase letter or a number.

After creating your first bucket the option to "Copy settings from an existing bucket" will be available to you.

There are Bucket Restrictions and Limitations and if you'd like more information I'd recommend you read the Amazon developer guide article on the subject.

There are also a number of articles on the web related to naming buckets including this one from the Digital Inspiration website Amazon S3 Buckets Described in Plain English.

1b. Click in the Region field and select the region of your bucket from the dropdown menu. In my example, I've selected Asia Pacific (Sydney) (figure #9)

Note: Amazon S3 creates buckets in a region you specify. You can choose any AWS Region that is geographically close to you to optimize latency, minimize costs, or address regulatory requirements. For example, if you reside in Australia, as I do, I find it advantageous to create buckets in the Asia Pacific (Sydney) region

2. Bucket settings for Block Public Access: when using S3 Storage as a static website, we need to have Public access available. In this section, we will set the bucket so it’s accessible to the public

2a. Uncheck the box ‘Block all public access’ and check the box acknowledging the fact that objects within the bucket will become public (figure #8)

3. Bucket versioning: In this example, I have left all at the default setting ‘Disabled’. (figure #8)

4. Default encryption: An Amazon S3 bucket configuration is always enabled and is, at a minimum, set to server-side encryption with Amazon S3 managed keys (SSE-S3).

4a. Leave the Encryption type at the default setting ‘Amazon s3 managed keys (SSE-S3)’ and set the Bucket Key to ‘Disabled’ (figure #8)

Note: for more information on any of these sections use the embedded links ‘Info’ or ‘Learn more’.

5. Click on ‘Create Bucket’

6. Congratulations, you have successfully created your first S3 Bucket! (figure #9)

Figure #9: First S3 bucket

Step 4. Set Properties

Under the Access heading, it shows ‘Objects can be public’. If you click on the message a popup window provides more information, and we can see that the bucket is not public yet. (figure #10)

The next step is to set properties that define the bucket as a Static website hosting.

Figure #10: Objects can be public

1. Click on the name of the bucket you just created to open the bucket management window (figure #11)

Figure #11: Bucket name link

2. Click on the ‘Properties’ tab. (figure #12)

Figure #12: Properties Tab

Figure #12: Properties Tab

3. In the Properties page scroll to the bottom of the page to the section Static website hosting and click on the ‘Edit’ button. (figures #13a/b)

Figure #13a: Properties Page

Figure #13a: Properties Page scrolled to bottom

4. In the Edit static website hosting page click on the Radio button next to Enable to expand the page and show more options (figure #14)

Figure #14: Enable Static website hosting

Figure #14: Enable Static website hosting

5. When the page expands the Hosting type should automatically be configured to ‘Host a static website’, if not click on the radio button to activate it.

6. Enter index.html and error.html in the Index document and Error document text fields

Note: This setting points to index.html and error.html documents that may be placed at the root level of the bucket at any time. It is not required to successfully finish this tutorial. These settings can be updated at any time.

7. Click on the ‘Save changes’ button (figure #15)

Figure #15: Edit static website hosting

8. After saving the changes you will return to the Properties page and a notification will say you have successfully edited static website hosting (figure #16)

Figure #16: Successful edited static website hosting

Step 5. Set Permissions

1. Click on the ‘Permissions’ tab and scroll down the page to the Bucket Policy section (figure #17)

Figure #17: Permissions page

2. Click on the Edit button (figure #18)

setup_18.jpg

Figure #18: Edit Bucket Policy

3. If there is existing code in the Policy window delete it if not move on to step #4. (figure #19)

Figure #19: Delete existing policy code

4. Copy and paste the following policy into the Bucket Policy field (figure #20)

 
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::s3360panos/*"
            ]
        }
    ]
}
 

Figure #20: Adding the Bucket Policy

Note: To make the objects in your bucket publicly readable, you must write a bucket policy that grants everyone s3:GetObject permission.

After you edit S3 Block Public Access settings, you can add a bucket policy to grant public read access to your bucket. When you grant public read access, anyone on the internet can access your bucket.

IMPORTANT: Update the Resource to your bucket name.

In the example bucket policy above, s3360panos is the bucket name I’ve assigned to this bucket. To use this bucket policy with your own bucket, you must update this name to match your bucket name.

4. Click on the ‘Save changes’ button to return to the main permissions section (figure #21)

Note: A message appears indicating that the bucket policy has been successfully added and under the name of the bucket it will display a ‘Publicly accessible’ banner.

Figure #21: Bucket hosting enabled

Note; If you see an error that says Policy has invalid resource, confirm that the bucket name in the bucket policy matches your bucket name. For information about adding a bucket policy, see How do I add an S3 bucket policy?

If you get an error message and cannot save the bucket policy, check your account and bucket Block Public Access settings to confirm that you allow public access to the bucket.

If you Permission overview > Access = Objects can be public and your Policy doesn’t show any errors, try refreshing the browser window.

Step 6. Uploading the Project Files

1. Click on the Objects button to return to the Objects page and

2, Click on the ‘Upload’ button (figure #22)

Figure #22: Object page and Upload button

Note: The Upload page gives you the option to drag and drop your project folder or locate it on your desktop using the ‘Add folder’ button. In this example, I will drag and drop my project folder

3. Drag the project folder to the Drag and drop area on the Upload page (figure #23)

Figure #23: Drag and drop to upload

Note: After a minute or two the Upload page updates to list all of the files located within the project folder.

On upload S3 will retain all of the file structure within the project folder

3. To initiate the upload click on the ‘Upload’ button (figure# 24)

Figure #23: List of files to upload

Figure #24: List of files to upload

Note: During the upload, the Upload page refreshes to show you the status of the upload including, the Files remaining to be uploaded, estimated upload time, and transfer rate.

In the Files and folders section, it will highlight and indicate which files have been uploaded successfully during the upload (figure #25)

Figure #25: Upload status

Note: When the files have been successfully loaded a message to that effect is displayed. The Summary is also updated to reflect the status of the upload.

4. To continue click on the ‘Exit’ button (figure #26)

Figure #26: Successful Upload and Exit button

Step 7. Viewing the Project

  1. Click on the Name link to view the project folder files (figure #27)

Figure #27: Click on name link

2. Click on the index.html link to open the Object Overview page (figure #28)

Figure #28: Click on index.html

Note: The object overview window provides information about the object including its Object URL and has several options for actions that can be applied to the object.

3. To view the project right-click on the Object URL and select ‘Open Link in New Window’ from the dropdown menu (figure #29)

Figure #28: Open the index.html Object URL

Figure #29: Open the index.html Object URL

Note: a new window will open and the project will be loaded into it (figure #30)

Figure #30: Link preview

4. Using an iFrame to embed the project into a web page is a great option.

At the start of this tutorial, the panorama example has been embedded into this Squarespace page using a code block and the following code;

<IFRAME src="https://s3360panos.s3-ap-southeast-2.amazonaws.com/VA-WA-Local-Kids-Lizard/index.html" width="100%" height="490" frameborder="no" scrolling="no" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></IFRAME>

Note: For more information on embedding S3 tours into Squarespace web pages check out my Squarespace tutorial ‘Hosting External Files’

Would you like to Donate?

I hope you have enjoyed the tutorial and it helped you achieve the best possible project outcome. If it has, please take a second to consider a donation so I can continue adding more tutorials.

I'd like to Donate

Tony Redhead

Subscribe to the blog, enter your email address:

  

Cart (0)