Integración de Bubble.io y Amazon S3: Guía paso a paso 2024

Paso 1: Configurar Amazon S3

Antes de comenzar a integrar Bubble.io con Amazon S3, asegúrese de tener una cuenta AWS(S3). Regístrese y navegue hasta el servicio S3.

• Haga clic en el botón Create Bucket.
• Proporcione un nombre único para su bucket y seleccione una región.
• En la configuración Properties del bucket, debe habilitar Cross-origin resource sharing (CORS).
• En el cuadro CORS, ingrese la siguiente configuración:

  [
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
  ]
  

• Haga clic en Save.
• Vaya a la pestaña Permissions y en la sección Bucket Policy pegue esta política:

  {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:DeleteObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::[bucket-name]/*",
                "arn:aws:s3:::[bucket-name]"
            ]
         }
     ]
  }
  

• Reemplace [bucket-name] con el nombre de su bucket. Haga clic en Save.

Paso 2: Crear un usuario IAM

• Navegue hasta el panel de IAM.
• Haga clic en Users, y luego en Add user.
• Proporcione un nombre para su usuario y seleccione Programmatic access.
• En la pantalla Set Permissions, elija Attach existing policies directly.
• Busque AmazonS3FullAccess y selecciónelo. Haga clic en Next.
• Revise su configuración y haga clic en Create User.
• Verá una pantalla de Success. Registre el Access Key ID y el Secret access key. Los necesitará para Bubble.io.

Paso 3: Integrar con Bubble.io

• Inicie sesión en su panel de Bubble.io.
• Elija su aplicación y navegue a la pestaña Plugins y haga clic en Add plugins.
• Busque Amazon S3 Uploader e instálelo.
• Después de la instalación exitosa, regrese a su aplicación y vaya a la pestaña Plugins. Verá el S3 Uploader en la lista.
• Ingrese su Access Key ID, Secret Access Key, y Bucket Name que obtuvo de AWS.
• Guarde la configuración. Su integración está ahora completa.

Paso 4: Use File Uploader

Para probar si su integración es exitosa, use un elemento File Uploader en Bubble.

• Arrastre un elemento File Uploader a su página desde la pestaña Design.
• Haga clic en el elemento, y en el Inspector, verá S3 Uploader como una opción de tipo.
• Seleccione y previsualice su aplicación. Ahora puede probar la carga de un archivo a su bucket S3.

Ahora, Amazon S3 está integrado exitosamente con su aplicación Bubble.io, y debería poder cargar y almacenar archivos en el bucket S3 directamente desde su aplicación Bubble.io.