Why my angular app is not loading my S3 Bucket?

0

i have angular app deployed to AWS S3 bucket that is not showing the S3 bucket files. environment file:

export const environment = {
    aws: {
        production: true,
        accessKeyId: process.env.accessKeyId,
        secretAccessKey: process.env.secretAccessKey,
        region: 'ap-south-1'
    }
}

and my service.ts has this code:

AWS.config.update({
        accessKeyId: process.env.accessKeyId,
        secretAccessKey: process.env.secretAccessKey,
        region: 'ap-south-1'
});

const bucket = new S3(AWS.config);

@Injectable({
  providedIn: 'root'
})

export class S3Service {

  bucketName: string = 'angular-upload-files-2023-2024';
  loader: EventEmitter<boolean> = new EventEmitter<boolean>();
  currentFolder: string = 'properties2023';

  constructor() {}

  getFolderContent(): Observable<any> {
    return new Observable((observer) => {
      this.loader.next(true);
      bucket.listObjectsV2({ Bucket: this.bucketName, Prefix: this.currentFolder, Delimiter: '/' }, (err: AWS.AWSError, data: S3.ListObjectsV2Output) => {
        this.loader.next(true);
        console.log(data)
        if (err) {
          observer.error(err);
        }
        else {
          let list: any[] = [];
          list = list.concat(data.CommonPrefixes?.map(m => { return { name: m.Prefix, contentType: 'folder' } }));
          list = list.concat(data.Contents?.filter(m => m.Key != this.currentFolder).map(m => { return { name: m.Key, contentType: 'file', modifiedTime: m.LastModified?.toDateString() } }));
          observer.next(list);
        }

      });
    })

  }
}

in bucket permissions I have public access and I have:

bucket policy:

{
    "Version": "2012-10-17",
    "Id": "Policy1637840001466",
    "Statement": [
        {
            "Sid": "Stmt1637839995898",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::angular-upload-files-2023-2024/*"
        }
    ]
}

and I have CORS:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "HEAD",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

It is showing enpty site: ScreenShot

rami
질문됨 4달 전250회 조회
1개 답변
0

Hi,

I would strongly suggest you to activate S3 access logging: https://docs.aws.amazon.com/AmazonS3/latest/userguide/enable-server-access-logging.html

It will allow you to see how your browser is querying S3 to obtain the Angular code and you will then probably discover which requests are incorrect. If you don't see any access log in S3, then it's probably that the DNS name used to access the S3 bucket is incorrect. You have to check this point via the Developer tools (request traces, etc.) available in Chrome or your favorite browser.

Best,

Didier

profile pictureAWS
전문가
답변함 4달 전
  • I am getting this error if I press F12: main.31fee5403cb9775f.js:1 ERROR CredentialsError: Missing credentials in config, if using AWS_CONFIG_FILE, set AWS_SDK_LOAD_CONFIG=1 at v (main.31fee5403cb9775f.js:1:259510) at constructor.getCredentials (main.31fee5403cb9775f.js:1:260035) at constructor.<anonymous> (main.31fee5403cb9775f.js:1:282754) at constructor.callListeners (main.31fee5403cb9775f.js:1:346028) at constructor.emit (main.31fee5403cb9775f.js:1:345767) at constructor.emitEvent (main.31fee5403cb9775f.js:1:331693) at constructor.g (main.31fee5403cb9775f.js:1:327199) at F.runTo (main.31fee5403cb9775f.js:1:393723) at constructor.runTo (main.31fee5403cb9775f.js:1:328969) at constructor.send (main.31fee5403cb9775f.js:1:328862)

  • I am getting this log: 83900f54effed0ac5e6ecc408f79057e2454b7ed833568de9795042d405a1bdf angular-upload-files-2023-2024 [07/Jan/2024:08:17:26 +0000] - svc:s3.amazonaws.com GV1H7FNF4N55YD5C REST.PUT.OBJECT 2024-01-07-08-17-26-0DCED4D1BCB18B46 "PUT /angular-upload-files-2023-2024/2024-01-07-08-17-26-0DCED4D1BCB18B46 HTTP/1.1" 200 - - 687 37 14 "-" "-" - HxlhtL+Zm0wgCxOmlznfEXcJfo6ePk0eHPrccRkiSn/29yobpZcR2U2WGMeZ0JTVKgrbEfafmac= SigV4 ECDHE-RSA-AES128-GCM-SHA256 AuthHeader s3.ap-south-1.amazonaws.com TLSv1.2 - -

로그인하지 않았습니다. 로그인해야 답변을 게시할 수 있습니다.

좋은 답변은 질문에 명확하게 답하고 건설적인 피드백을 제공하며 질문자의 전문적인 성장을 장려합니다.

질문 답변하기에 대한 가이드라인

관련 콘텐츠