Looking for a direction and suggestion: Implementing App created by Unity Webgl in IFrame

Your approach to hosting Unity WebGL apps within your Vue application using Amplify is on the right track, but there are some improvements we can suggest to make it more efficient and scalable.

1. Using Amazon S3 to store your Unity WebGL files is indeed a good practice, especially for a production environment. It's more scalable and manageable than storing everything in your public folder. However, to optimize performance and reduce latency, it's highly recommended to use Amazon CloudFront in conjunction with S3.

CloudFront is a content delivery network (CDN) that can significantly improve the loading speed of your Unity WebGL apps by caching content at edge locations around the world. This is particularly beneficial for web-based games or applications where performance is crucial.

2. For loading the Unity WebGL files into an iframe, you don't actually need to download the files to the browser first. Instead, you can point the iframe directly to the CloudFront URL of your Unity WebGL index file.

Here's a general approach you could follow:

1. Upload your Unity WebGL build files (including the index.html and all associated files) to an S3 bucket.

2. Create a CloudFront distribution with your S3 bucket as the origin.

3. In your Vue component, create an iframe that points to the CloudFront URL of your Unity WebGL index file.

For example, your Vue component might look something like this:

<template>
  <div>
    <iframe :src="unityAppUrl" width="800" height="600"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      unityAppUrl: 'https://your-cloudfront-distribution.cloudfront.net/path-to-unity-app/index.html'
    }
  }
}
</script>

This approach allows you to serve your Unity WebGL apps efficiently without needing to manually download files to the browser. CloudFront will handle caching and fast content delivery, while S3 provides reliable storage for your files.

Remember to set up proper CORS (Cross-Origin Resource Sharing) configurations on your S3 bucket and CloudFront distribution to ensure your Vue app can access the Unity WebGL content without issues.

This solution provides a scalable, performant way to serve multiple Unity WebGL apps within your Vue application, leveraging AWS services for optimal delivery.
Sources
Hosting a maintenance page on s3 | AWS re:Post
Tutorial: Hosting on-demand streaming video with Amazon S3, Amazon CloudFront, and Amazon Route 53 - Amazon Simple Storage Service