"Hey there! 👋 If my tutorials have made your tech life a little easier (or a lot less confusing), consider buying me a virtual coffee! ☕️ Retirement means more time to help you, but sadly, less income for snacks. Click the Donation button 🙌 and thanks for the love!"

I'd like to Donate

More and more 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 an S3 bucket, upload and publish the tour.

Note: This tutorial was created using the Chrome Browser.

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;

Project Folder - the files you will be uploading
Login to Amazon S3 - opening the Console
Create your first Bucket - the steps required to name and create your bucket
Set Properties - define the bucket as a Static website hosting
Set Permissions - configure the bucket to allow web browsing
Uploading the Project Files - uploading and setting permissions on your project files
Viewing the Project - using iFrame code to display the panorama from Amazon S3

Step 1. Project Folder

1. Make sure you have a working Pano2VR, Krpano or 3DVista 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)

Step 2. Login to Amazon S3

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

Note: AWS are changing the UI of the Sign In page. If you see a page similar to the one below Click on the ‘Sign in using root user email’ button. (figure #3)

2. Select ‘Root user’ and enter the email address you used when you created your AWS account. Click on 'Next' (figure #4)

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

Note: AWS have introduced new security measures, Multi-factor Authentication MFA, to keep your account secure. If you haven’t already implemented them simply click on ‘Skip for Now’ button. You can always come back to them later. (figure #6)

Step 3. Create your first Bucket

Note: if you haven’t done so already make sure you have a AWS Region near you selected. In Australia the region is Sydney ap-southeast-2 (figure #7)

FYI: An AWS Region is a geographical area where Amazon Web Services (AWS) has multiple data centers, known as Availability Zones (AZs). Each AWS Region is designed to be isolated from the others to ensure fault tolerance and stability. This isolation helps in minimizing the risk of a single event affecting the availability of services across multiple regions.
By strategically selecting regions, businesses can optimize for performance, cost, and compliance, ensuring that their applications and data are both efficient and secure.

1. In the AWS Console Home, click on the 'S3' button. (figure #8)

Note: if you cannot see ‘S3’ click on the ‘View all services’ button where you will find it listed under ‘Storage’.

Note: if this is your first bucket you will see the S3 “Create a Bucket” page. If you have already created a bucket you will see the page listing all previous buckets. (figure #9)
FYI: An AWS S3 bucket is a cloud storage container for saving and organizing files like photos, videos, and documents. It’s secure, scalable, and accessible from anywhere. You can store, retrieve, and share data easily, with options to control access and manage storage costs. Think of it as a digital filing cabinet!

2. Click on the ‘Create bucket’ button to open the Create bucket page.

Note: The Create bucket page has several sections that have to be configured in order to create a bucket while some sections remain at the default settings.

General configuration - configure
Object Ownership - default
Block Public Access settings for this bucket - configure
Bucket versioning - default
Tags - default
Default encryption - configure
Advanced settings - default (figure #10)

3. General configuration: Click in the Bucket name field and add the name of your bucket. In my example, I've added the name ‘s3360firstbucket’.

FYI: 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.

4. Block Public Access settings for this bucket: Uncheck the box ‘Block all public access’ and check the box acknowledging the fact that objects within the bucket will become public

FYI: 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

5. Default encryption: Leave the Encryption type at the default setting ‘Server-side encryption with 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’. 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).

6. Click on ‘Create Bucket’

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

Step 4. Set Properties

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

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

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

3. Scroll all the way to the bottom to the Static website Hosting section and then click on Edit (figure #14)

4. In the Static website hosting section

Click on the Radio button next to Enable
Click on the Radio button next to Host a static website
In the Index document section enter ‘index.html’
In the Error document section enter ‘error.html’ (figure #15)

Note: If you are developing in 3DVista you will need to use index.htm as they don’t support index.html
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.

5. Click on the ‘Save changes’ button at the bottom of the page (figure #16)

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

Figure #17: 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 #18)

2. Click on the Bucket Policy ‘Edit’ button to open the Edit panel (figure #19)

FYI: A bucket policy is a resource-based policy that you can use to grant access permissions to your Amazon S3 bucket and the objects in it. Only the bucket owner can associate a policy with a bucket. The permissions attached to the bucket apply to all of the objects in the bucket that are owned by the bucket owner. These permissions don't apply to objects that are owned by other AWS accounts.
AWS Bucket Policies

FYI: To make the objects in your bucket publicly readable, you must add a bucket policy that grants everyone s3:GetObject permission. 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 below, s3360firstbucket 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.

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

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

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 tab to return to the Objects page

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 #24)

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# 25)

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 #26)

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 and what .

Figure #27: Successful Upload and Close button

4. To continue click on the ‘Close’ button. (figure #27)

Step 7. Viewing the Project

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

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

Note: The index.html info 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 #29: Open the index.html Object URL

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

FYI: 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;

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.