Cannot Create S3Bucket with serverless-single-page-app-plugin

Serverless Framework
,
1

I have deployed the angular app to cloudfront use serverless serverless-single-page-app-plugin. But I always give the issue permission denied. I use my customer account with the role

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "*",
            "Resource": "*"
        }
    ]
}

but I tried to reproduce this in my account which is the same config. It’s still OK! Please help me to resolve it!!! My serverless.yaml

service: serviceName

plugins:
  - serverless-single-page-app-plugin

custom:
  s3Bucket: s3Bucket
  s3LocalPath: app/
  region: ap-northeast-1

provider:
  name: aws
  iam:
    role:
      statements:
        - Effect: "Allow"
          Action:
            - s3:CreateBucket
            - s3:PutBucketAcl
            - s3:GetBucketAcl
            - s3:PutBucketPolicy
          Resource: arn:aws:s3::*
  runtime: nodejs14.x
  stage: dev
  region: ap-northeast-1
  profile: default
  stackName: StackName
  tags:
    owner: me
    project: serverless-learning
    env: dev
resources:
  Resources:
    cloudfrontoriginaccessidentity:
      Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
      Properties:
        CloudFrontOriginAccessIdentityConfig:
          Comment: "Test"
    ## Specifying the S3 Bucket
    WebAppS3Bucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: ${self:custom.s3Bucket}
        AccessControl: PublicRead
        WebsiteConfiguration:
          IndexDocument: index.html
          ErrorDocument: index.html
    ## Specifying the CloudFront Distribution to server your Web Application
    WebAppCloudFrontDistribution:
      Type: AWS::CloudFront::Distribution
      Properties:
        DistributionConfig:
          Origins:
            - DomainName: ${self:custom.s3Bucket}.s3.amazonaws.com
              ## An identifier for the origin which must be unique within the distribution
              Id: WebApp
              # CustomOriginConfig:
              #   HTTPPort: 80
              #   HTTPSPort: 443
              #   OriginProtocolPolicy: https-only
              ## In case you want to restrict the bucket access use S3OriginConfig and remove CustomOriginConfig
              S3OriginConfig:
                OriginAccessIdentity:
                  Fn::Join:
                    - ''
                    -
                      - 'origin-access-identity/cloudfront/'
                      - Ref: cloudfrontoriginaccessidentity
          Enabled: 'true'
          ## Uncomment the following section in case you are using a custom domain
          # Aliases:
          # - mysite.example.com
          DefaultRootObject: index.html
          ## Since the Single Page App is taking care of the routing we need to make sure ever path is served with index.html
          ## The only exception are files that actually exist e.h. app.js, reset.css
          CustomErrorResponses:
            - ErrorCode: 404
              ResponseCode: 200
              ResponsePagePath: /index.html
          DefaultCacheBehavior:
            AllowedMethods:
              - DELETE
              - GET
              - HEAD
              - OPTIONS
              - PATCH
              - POST
              - PUT
            ## The origin id defined above
            TargetOriginId: WebApp
            ## Defining if and how the QueryString and Cookies are forwarded to the origin which in this case is S3
            ForwardedValues:
              QueryString: 'false'
              Cookies:
                Forward: none
            ## The protocol that users can use to access the files in the origin. To allow HTTP use `allow-all`
            ViewerProtocolPolicy: redirect-to-https
          ## The certificate to use when viewers use HTTPS to request objects.
          ViewerCertificate:
            CloudFrontDefaultCertificate: 'true'
          ## Uncomment the following section in case you want to enable logging for CloudFront requests
          # Logging:
          #   IncludeCookies: 'false'
          #   Bucket: mylogs.s3.amazonaws.com
          #   Prefix: myprefix
    ## Specifying the policies to make sure all files inside the Bucket are avaialble to CloudFront
    WebAppS3BucketPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket:
          Ref: WebAppS3Bucket
        PolicyDocument:
          Statement:
              Effect: "Allow"
              Principal: "*"
              Action:
                - s3:GetObject
              Resource: arn:aws:s3:::${self:custom.s3Bucket}/*



  # In order to print out the hosted domain via `serverless info` we need to define the DomainName output for CloudFormation
  Outputs:
    WebAppS3BucketOutput:
      Value:
        'Ref': WebAppS3Bucket
    WebAppCloudFrontDistributionOutput:
      Value:
        'Fn::GetAtt': [ WebAppCloudFrontDistribution, DomainName ]

and the detail error:
error

2

I don’t use the serverless-single-page-app-plugin, but in having a look at my own S3 yaml config for S3, i noticed that you may need to add a 3rd colon : to your Resource value. See below:

- Effect: 'Allow'
  Action:
    - 's3:GetObject'
  Resource:
    - 'arn:aws:s3:::los-data-config/*'

I think you’ve only got 2 colons and then the *. What i think might be the necessary value for your Resource:
arn:aws:s3:::*

3

I tried to debug and see it not work when create S3 bucketACL