Cloudformation S3 bucket principal for Cloudfront

Question

I'm trying to create a Yaml template for cloudfront distribution on S3 bucket. I'm stuck on how to add principal on BucketPolicy.

I want to know how to replace the XXXXXXXXXXX on CloudFront Origin Access Identity XXXXXXXXXXX in principal for a cloudfront that will be generate by deploying the template.

Also is there a way to add the html, css sync procedure (which I'm doing through aws cli now) on yaml template?

Please let me know. TIA

 AWSTemplateFormatVersion: 2010-09-09
 Resources:
   Bucket:
     Type: 'AWS::S3::Bucket'
     Properties:
       BucketName: pridesys.webbucket
       AccessControl: Private 
       WebsiteConfiguration:
         IndexDocument: index.html

   BucketPolicy:
     Type: AWS::S3::BucketPolicy
     Properties:
       Bucket: !Ref Bucket
       PolicyDocument:
         Id: ReportPolicy
         Version: "2012-10-17"
         Statement:
           - Sid: "1"
             Effect: Allow
             Action: "s3:GetObject"
             Principal:
               AWS: "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXX"
             Resource: !Join ['', ['arn:aws:s3:::', !Ref Bucket, '/*']]

   Distro:
     Type: 'AWS::CloudFront::Distribution'
     Properties:
       DistributionConfig:
         Origins:
           - DomainName: !GetAtt Bucket.DomainName
             Id: foo
             S3OriginConfig: {}
          Enabled: True
         DefaultRootObject: index.html
         DefaultCacheBehavior:
           ForwardedValues:
             QueryString: False
           TargetOriginId: foo
           ViewerProtocolPolicy: allow-all

Answer 1

Here is a valid sample of an S3 origin identity configuration for CloudFront:

  WebUIBucket:
    Type: AWS::S3::Bucket
  CloudFrontOriginIdentity:
    Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
    Properties:
      CloudFrontOriginAccessIdentityConfig:
        Comment: "origin identity"
  WebUIPolicy:
    Type: AWS::S3::BucketPolicy
    Properties: 
      Bucket:
        Ref: WebUIBucket
      PolicyDocument:
        Version: "2012-10-17"
        Statement:
          - Effect: Allow
            Principal:
              CanonicalUser:
                Fn::GetAtt: [ CloudFrontOriginIdentity , S3CanonicalUserId ]
            Action: "s3:GetObject"
            Resource: !Sub "${WebUIBucket.Arn}/*"
  WebpageCDN:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Origins:
          - DomainName: !Sub "${WebUIBucket}.s3.amazonaws.com"
            Id: webpage
            S3OriginConfig:
              OriginAccessIdentity: !Sub "origin-access-identity/cloudfront/${CloudFrontOriginIdentity}"

As for the syncing your assets into the S3 bucket, that cannot be provided with CloudFormation functionality. You either have to implement a CustomResource or keep using the CLI.