Panoee S3 Hosting Tutorial

Step 1 – Create your AWS Credential

Create your AWS Account

CleanShot 2023 11 17 at 23.06.25%402x scaled
1.1.1. Click button “Create an AWS Account”
CleanShot 2023 11 17 at 23.07.37%402x scaled
1.1.2. Follow AWS guide to create new account with your email address.

1.1.3. After signing up, please login AWS console with your account.

Setup AWS S3

CleanShot 2023 11 17 at 23.10.27%402x scaled
1.2.1. In AWS Console, search for service “S3”
CleanShot 2023 11 17 at 23.11.27%402x scaled
1.2.2. Click button “Create bucket” to create your very first Bucket – Bucket is the Storage where you create & manage folders. Each folder can be used to host one Virtual Tours.
Create S3 bucket S3 Global create bucket scaled
1.2.3. Following all above steps to create & intial setup your bucket. Please notice that your bucket needs to be set “public” & allow enough permission so we can manage it remotely & viewers can access files in your project to view the Virtual Tours.
CleanShot 2023 11 17 at 23.20.30%402x scaled
After create new bucket, you will be redirect back to Bucket listing page. Please notice that your bucket should display like above.
CleanShot 2023 11 17 at 23.23.37%402x scaled
1.2.5. Click the Bucket to go inside, switch to tab “Properties” and click button “Edit” in panel “Static website hosting”. This options allows files in bucket can be served under specific URLs so viewers can view your Virtual Tours via file “index.html”.
Edit static website hosting S3 bucket mypanoeesample S3 Globa
1.2.6. Follow steps above to setup “Static Website Hosting” options.
CleanShot 2023 11 17 at 23.24.54%402x scaled
After config, you will see above information in panel “Static website Hosting”
mypanoeesample S3 bucket S3 Global scaled
1.2.7. Follow steps to configure Bucket Policy & CORS rule in tab “Permission”. For each section, you need to click button “Edit” to start editing. Please copy below code and paste into corresponding area.
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:DeleteObject",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:PutObject"
            ],
            "Resource": [
                "arn:aws:s3:::mypanoeesample/*",
                "arn:aws:s3:::mypanoeesample"
            ]
        }
    ]
}

For bucket policy, please notice that you needs to insert your bucket name in codeblock “Resources”

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "ETag"
        ],
        "MaxAgeSeconds": 86400
    }
]

Setup AWS IAM

After setup S3 service, you need to setup IAM service to create the Credential.

CleanShot 2023 11 17 at 23.28.36%402x iam scaled
1.3.1. In AWS console, search “IAM” and find the service “IAM”
CleanShot 2023 11 17 at 23.30.03%402x scaled
1.3.2. In IAM dashboard, click area “Users” to go to users management, in which you will create new user.
CleanShot 2023 11 17 at 23.30.40%402x scaled
1.3.3. Click button “Create user”
CleanShot 2023 11 17 at 23.31.06%402x scaled
1.3.4. Specify the user name and click button “Next”
CleanShot 2023 11 17 at 23.32.30%402x scaled
1.3.5. Now you need to setup permission for this user. Please select “Attach policies directly”, then find and check “AmazonS3FullAccess” rule. Finally click button “Next”
CleanShot 2023 11 17 at 23.33.29%402x scaled
1.3.6. Click to the new user to start creating necessary credential.
CleanShot 2023 11 17 at 23.34.06%402x scaled
1.3.7. Switch to tab “Security credentials”, then click button “Create access key”
CleanShot 2023 11 17 at 23.35.12%402x scaled
1.3.8. Please choose the option “Third-party service” – because you will grant the permission for website hosting.panoee.com to use the credential to access & manage your S3 resource.
CleanShot 2023 11 17 at 23.35.54%402x scaled
1.3.9. Your Credential is finally created. Please store the key pair in safe place.

Step 2 – Setup on Panoee Hosting

Authenticate with panoee.com

CleanShot 2023 11 17 at 23.37.54%402x scaled
2.1.1. Go to website https://hosting.panoee.com and click button “Enter S3 Credential Key”
CleanShot 2023 11 17 at 23.38.20%402x scaled
2.1.2. You will need to be Panoee user in order to use this Hosting service (for free of course). You can login with Google or Facebook to fasten this process.

Enter your AWS Credential

CleanShot 2023 11 17 at 23.39.57%402x scaled
2.2.1. After authentication, now you can enter your Credential to start using Hosting service. In the mean time, you can test with our demo Credential. Please notice that your Credential is stored in your browser locally and it will never be sent anywhere else.

Step 3 – Managing your Virtual Tours

After enter the proper AWS Credential key pair, you can now upload & manage your Virtual Tours easily via the software.

Create your Project & upload Virtual Tour

CleanShot 2023 11 17 at 23.41.19%402x scaled
3.1.1. Select your bucket to manage all the folder (projects) inside. If you don’t have one, just click button “New Project” to create one.
CleanShot 2023 11 17 at 23.42.26%402x scaled
3.1.2. Set your project name (folder name), choose the upload method & just drag your folder or .zip file into the uploading area…
CleanShot 2023 11 17 at 23.44.08%402x scaled
3.1.3. After uploading succeeds, you can see all files in your folders. Now you can preview the file or image, manage your folders with supporting tools and click button “View Tour 360” to go to your published Virtual Tours.

Manage your Projects

The dashboard is super clean & simple to user. You can switch to any bucket or manage all the projects / folders in any bucket.

CleanShot 2023 11 17 at 23.45.56%402x scaled
Panoee S3 Hosting Tutorial 27