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 - -

您尚未登入。 登入 去張貼答案。

一個好的回答可以清楚地回答問題並提供建設性的意見回饋,同時有助於提問者的專業成長。

回答問題指南