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
feita há 4 meses250 visualizações
1 Resposta
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
ESPECIALISTA
respondido há 4 meses
  • 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 - -

Você não está conectado. Fazer login para postar uma resposta.

Uma boa resposta responde claramente à pergunta, dá feedback construtivo e incentiva o crescimento profissional de quem perguntou.

Diretrizes para responder a perguntas