Memo 2022-10-12¶

参加者: K,G,S
17:00～30

■ 概要¶

• 学習用AWSアカウント作成
• create-react-appの紹介
• Reactアプリ(初期テンプレート)をS3+CloudFrontで公開

サンプルWebアプリケーションの構築

aws s3 cp ./build s3://バケット名 --recursive

目的：自分でReactアプリを動かして公開できる環境とやり方をゲットする

■ CloudFormationテンプレート¶

ダウンロードurl: https://redmine.apps.kinocoffeeblack.net/attachments/download/236/template_s3_cf.yaml

AWSTemplateFormatVersion: '2010-09-09'
Description: Sample template for S3Origin CloudFront

Parameters:
  CloudFrontPriceClass:
    Type: String
    Default: PriceClass_200
    AllowedValues: [PriceClass_100, PriceClass_200, PriceClass_All]

Resources:

  OriginS3Bucket:
    Type: AWS::S3::Bucket
    DeletionPolicy: Retain
    UpdateReplacePolicy: Retain
    Properties:
      BucketName: !Sub ${AWS::StackName}-${AWS::AccountId}
      AccessControl: Private
      PublicAccessBlockConfiguration:
        BlockPublicAcls: True
        BlockPublicPolicy: True
        IgnorePublicAcls: True
        RestrictPublicBuckets: True

  OriginS3BucketPolicy:
    Type: AWS::S3::BucketPolicy
    Properties:
      Bucket: !Ref OriginS3Bucket
      PolicyDocument:
        Statement:
          - Action: s3:GetObject
            Effect: Allow
            Resource: !Sub arn:${AWS::Partition}:s3:::${OriginS3Bucket}/*
            Principal:
              Service: cloudfront.amazonaws.com
            Condition:
              StringEquals:
                AWS:SourceArn: !Sub arn:${AWS::Partition}:cloudfront::${AWS::AccountId}:distribution/${CloudFrontDistribution}
          - Action: s3:ListBucket
            Effect: Allow
            Resource: !Sub arn:${AWS::Partition}:s3:::${OriginS3Bucket}
            Principal:
              Service: cloudfront.amazonaws.com
            Condition:
              StringEquals:
                AWS:SourceArn: !Sub arn:${AWS::Partition}:cloudfront::${AWS::AccountId}:distribution/${CloudFrontDistribution}

  CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        Comment: !Sub 'Created by ${AWS::StackName}'
        DefaultCacheBehavior:
          TargetOriginId: myS3Origin
          ForwardedValues:
            QueryString: false
            Cookies:
              Forward: 'none'
          ViewerProtocolPolicy: redirect-to-https
          CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6 # CachingOptimized
          OriginRequestPolicyId: acba4595-bd28-49b8-b9fe-13317c0390fa # UserAgentRefererHeaders
          Compress: true
        DefaultRootObject: index.html
        Enabled: true
        Origins:
          - DomainName: !Sub ${OriginS3Bucket}.s3.amazonaws.com
            Id: myS3Origin
            S3OriginConfig:
              OriginAccessIdentity: ''
            OriginAccessControlId: !GetAtt OriginAccessControl.Id
        PriceClass: !Ref CloudFrontPriceClass
        Restrictions:
          GeoRestriction:
            RestrictionType: whitelist
            Locations:
              - JP

  OriginAccessControl:
    Type: AWS::CloudFront::OriginAccessControl
    Properties:
      OriginAccessControlConfig:
        Description: !Sub 'OAC of ${OriginS3Bucket}. Created by ${AWS::StackName}'
        Name: !Sub 'OAC-${OriginS3Bucket}'
        OriginAccessControlOriginType: s3
        SigningBehavior: always
        SigningProtocol: sigv4

Outputs:
  OriginS3BucketName:
    Value: !Ref OriginS3Bucket
    Export:
      Name: !Sub ${AWS::StackName}-OriginS3Bucket
  CloudfrontDomainName:
    Value: !GetAtt CloudFrontDistribution.DomainName
    Export:
      Name: !Sub ${AWS::StackName}-CloudfrontDomainName

（コマンドでのデプロイ例）

aws cloudformation deploy --stack-name $STACK_NAME --template-file ./template_s3_cf.yaml

※"--no-execute-changeset"をつけることで直デプロイではなく変更内容を確認できる（消せば直デプロイ）

参考¶

SPAアプリケーションをCloudFrontで公開