amazon-web-services - 放大 S3 图像 - 404 未找到

Question

我正在尝试访问已上传到 S3 存储桶的图像。我使用 Amplify CLI ( amplify add storage ) 创建了我的存储桶，并授予了对我所有认知组的访问权限。我还授予了我的 AuthRole AmazonS3FullAccess。 My Bucket 也设置为允许所有公共(public)访问。
我已经尝试了所有可以在网上找到的不同方法来访问此图像，目前唯一有效的方法是将其向公众开放并直接使用图像 url。但即使我使用 Amplify 工具访问图像的公共(public)方法，我也会收到 404 错误。下面是我的代码，我的 url 生成有问题吗？
资源:

https://docs.amplify.aws/ui/storage/s3-image/q/framework/react

https://docs.amplify.aws/lib/storage/getting-started/q/platform/js#using-amazon-s3

import React, { Component} from 'react'
import Amplify, { Auth, Storage } from 'aws-amplify';
import { AmplifyS3Image} from "@aws-amplify/ui-react";
import { Card } from 'reactstrap';

// FYI, this all matches my aws-exports and matches what I see online in the console
Amplify.configure({
    Auth: {
        identityPoolId: 'us-east-1:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX', //REQUIRED - Amazon Cognito Identity Pool ID
        region: 'us-east-1', // REQUIRED - Amazon Cognito Region
        userPoolId: 'us-east-1_XXXXXXXXX', //OPTIONAL - Amazon Cognito User Pool ID
        userPoolWebClientId: 'XXXXXXXXXXXXXXXXX', //OPTIONAL - Amazon Cognito Web Client ID
    },
    Storage: {
        AWSS3: {
            bucket: 'xxxxxxxxx-storage123456-prod', //REQUIRED -  Amazon S3 bucket name
            region: 'us-east-1', //OPTIONAL -  Amazon service region
        }
    }
});

class TestPage extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    };

    async componentDidMount() {
        const user = await Auth.currentAuthenticatedUser();
        const deviceKey = user.signInUserSession.accessToken.payload['device_key']
        console.log( deviceKey, user );

        const storageGetPicUrl = await Storage.get('test_public.png', {
            level: 'protected',
            bucket: 'xxxxxxxxx-storage123456-prod',
            region: 'us-east-1',
          });
        console.log(storageGetPicUrl);
        
        this.setState({
            user,
            deviceKey,
            profilePicImg: <img height="40px" src={'https://xxxxxxxxx-storage123456-prod.s3.amazonaws.com/test_public.png'} />,
            profilePicPrivate: <AmplifyS3Image imgKey={"test_default.png"} />,
            profilePicPublic: <AmplifyS3Image imgKey={"test_public.png"} />,
            profilePicPrivate2: <AmplifyS3Image imgKey={"test_default.png"} level="protected" identityId={deviceKey} />,
            profilePicPublic2: <AmplifyS3Image imgKey={"test_public.png"} level="protected" identityId={deviceKey} />,
            profilePicStorage: <img src={storageGetPicUrl} />,
          });
    };

    render() { 
        return ( 
            <table>
                <tbody>
                    <tr><td><Card>{this.state.profilePicImg}</Card></td></tr>
                    <tr><td><Card>{this.state.profilePicPrivate}</Card></td></tr>
                    <tr><td><Card>{this.state.profilePicPublic}</Card></td></tr>
                    <tr><td><Card>{this.state.profilePicPrivate2}</Card></td></tr>
                    <tr><td><Card>{this.state.profilePicPublic2}</Card></td></tr>
                    <tr><td><Card>{this.state.profilePicStorage}</Card></td></tr>
                </tbody>
            </table>
        );
    };
};
 
export default TestPage;

Answer 1

好的，我已经想通了!有2个问题。一，AWS 存储要求您以某种方式组织存储桶中的文件夹结构以供访问。第二，我必须更新我的存储桶策略以指向我的 AuthRole。

当您配置您的存储桶时，Amplify CLI 将设置您的 S3 存储桶并授予访问权限，这样所有登录您的应用程序的人都可以访问“public”文件夹中的内容。用户特定内容为“私有(private)”，用户特定内容为“ protected ”，平台中的其他用户可以访问。 SOURCE

存储桶策略本身需要更新，以对您在网页登录时使用的 AuthRole 进行身份验证。对我来说，这是我的 Cognito 用户链接到的 AuthRole。 This link helped me set the Actions in my policy, but I think it's an old policy format. This link helped me with getting the policy right.

我的图片位于: public/test.png在我的桶里。必须使用文件夹名称“public”才能与下面的存储调用中指定的级别相匹配。我通过设置所有权限阻止公共(public)访问对此进行了测试。我在没有更改策略的情况下运行了我的代码，并且图像无法加载，因此它们肯定被阻止了。更新策略后，图像完美加载。
我的代码中重要部分的简化版本:

import { Storage } from 'aws-amplify';

// image name should be relative to the public folder
// example: public/images/test.png => Storage.get('images/test.png' ...
const picUrl= await Storage.get('test.png', {
  level: 'public',
  bucket: 'bucket-name',
  region: 'us-east-1',
});
const img = <img width="40px" name="test" src={picUrl} alt="testImg" />

我的桶策略:

{
    "Version": "2012-10-17",
    "Id": "Policy1234",
    "Statement": [
        {
            "Sid": "AllowReadWriteObjects",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::the-rest-of-my-authrole-arn"
            },
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::bucket-name/*"
            ]
        }
    ]
}