Skip to content

Instantly share code, notes, and snippets.

@phi-line
Last active August 16, 2021 19:20
Show Gist options
  • Select an option

  • Save phi-line/4565221e20def02ce6dd085b0d577c3e to your computer and use it in GitHub Desktop.

Select an option

Save phi-line/4565221e20def02ce6dd085b0d577c3e to your computer and use it in GitHub Desktop.

Revisions

  1. phi-line revised this gist Aug 16, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    I dug into it tonight and got it working. Here's the CloudFormation setup I'm using. I ordered the properties in the same order you'd find them on the console GUI if you were setting it up that way:

    Thank you to @yvele, this is essentially his set up with a few added details.
    Thank you to https://github.com/yvele, this is essentially his set up with a few added details.

    Note 1: The ForwardedValues property is deprecated and it seems that eventually we'll have to change to a CachePolicy and OriginRequestPolicy. I tried a few different setups but unfortunately I couldn't get it to work using those.

  2. phi-line revised this gist Aug 16, 2021. No changes.
  3. phi-line created this gist Aug 16, 2021.
    50 changes: 50 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    I dug into it tonight and got it working. Here's the CloudFormation setup I'm using. I ordered the properties in the same order you'd find them on the console GUI if you were setting it up that way:

    Thank you to @yvele, this is essentially his set up with a few added details.

    Note 1: The ForwardedValues property is deprecated and it seems that eventually we'll have to change to a CachePolicy and OriginRequestPolicy. I tried a few different setups but unfortunately I couldn't get it to work using those.

    Note 2: After you get the CloudFront Distribution up and running, don't forget to change your app to switch to the new endpoint! i.e. fetching from https://something.appsync-api.region.amazonaws.com/graphql -> https://something.cloudfront.net/graphql

    ```
    AWSTemplateFormatVersion: 2010-09-09
    Description: >-
    ### Your description here ###
    Resources:
    CloudFrontDistribution:
    Type: AWS::CloudFront::Distribution
    Properties:
    DistributionConfig:
    Enabled: true
    HttpVersion: http2
    Origins:
    - Id: AppSyncGraphQLApi
    DomainName: ### Your GraphQL endpoint here (no "https://" prefix and no "/graphql" postfix) ###
    CustomOriginConfig:
    OriginProtocolPolicy: https-only
    HTTPSPort: 443
    OriginSSLProtocols:
    - TLSv1
    DefaultCacheBehavior:
    TargetOriginId: AppSyncGraphQLApi
    Compress: true
    ViewerProtocolPolicy: https-only
    AllowedMethods: [GET, HEAD, OPTIONS, PUT, PATCH, POST, DELETE]
    ForwardedValues:
    Headers:
    - Origin
    - Referer
    QueryString: true
    MinTTL: 0
    MaxTTL: 0
    DefaultTTL: 0
    PriceClass: PriceClass_100
    Tags:
    - Key: Application
    Value: !Ref AWS::StackName
    Outputs:
    CloudFrontDistributionDomain:
    Value: !GetAtt CloudFrontDistribution.DomainName
    Export:
    Name: CloudFront-CloudFrontDistributionDomain
    ```