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
posta 4 mesi fa250 visualizzazioni
1 Risposta
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
ESPERTO
con risposta 4 mesi fa
  • 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 - -

Accesso non effettuato. Accedi per postare una risposta.

Una buona risposta soddisfa chiaramente la domanda, fornisce un feedback costruttivo e incoraggia la crescita professionale del richiedente.

Linee guida per rispondere alle domande