CloudFront settings reverting on each deploy

[StephaneBischoff]

Please describe which feature you have a question about? I am deploying AWS Amplify NextJS app using Git deployment. I also apply specific configuration headers manually in AWS Console for the CloudFront distribution. I set "Accept-Language" as a cache key header under Behaviors for Default (*) route in CloudFront .

But, these settings keep reverting. I believe this happens each time I deploy a new version of my site with Amplify. Is there a way to set this config somewhere in Amplify so that its applied on each deploy? Or maybe even better, make sure Amplify does not update CloudFront?

Region: ca-central

[github-actions[bot]]

Hi :wave:, thanks for opening! While we look into this...

If this issue is related to custom domains, be sure to check the custom domains troubleshooting guide to see if that helps. Also, there is a more general troubleshooting FAQ that may be helpful for other questions.

Lastly, please make sure you've specified the App ID and Region in the issue!

[ghost]

Hi @StephaneBischoff have you tried adding that header directly in the Amplify Console? Here is a guide for adding the headers: https://docs.aws.amazon.com/amplify/latest/userguide/custom-headers.html#setting-custom-headers

[calavera]

Hi @StephaneBischoff 👋

Do you want to use the Accept-Language as part of the cache key because your application uses internationalization to display content in multiple languages under the same URL?

[StephaneBischoff]

Hi @calavera @hloriana

In my particular case, I need my website to use the Accept-Language header to detect the user's browser language on the root of the website https://mywebsite.com and then redirect (HTTP 307) to the correct path. example https://mywebsite.com/fr I am using NextJs with next-i18next.

The only way I got this to work is by adding the "Accept-Language" header to the CloudFront behavior entry for Default(*). I added the header under Cache key and origin requests (see screenshot)

Unfortunately, each time I deploy my AWS Amplify app (using GitLab integration), my CloudFront Behavior settings are removed and reset to the default. Is there a way to control the CloudFront settings via Amplify? Or is there any other solution?

[yassinecc]

@StephaneBischoff I have managed to update the Cloudfront distribution through a Lambda function that is triggered on deployment, there still is some downtime on deployment but at least recovery is automated. I can post more details if you are interested

[tmosmant]

I am interested @yassinecc 😁

[StephaneBischoff]

Hi @yassinecc I am interested thank you

[BJSummerfield]

I have the same problem. I set the Cloudfront distribution to use a cache policy and it reverts to using legacy settings every deploy. I cannot for the life of me figure out how to tell amplify to use the cache policy every deploy.

[yassinecc]

The TLDR of how I did it:

• Figure out what elements of the Cloudfront configuration should be reverted post deployment with the AWS CLI
• Set up a Lambda function that corrects the Cloudfront configuration with the information from above using the AWS SDK
• Set up an SNS notification that triggers that Lambda function on Amplify deployment

---

The main idea is to use some AWS SDK commands to programmatically reset the Cloudfront configuration post deployment. First go to the Amplify console > App settings > Notifications and create an email notification, we will need it later. You can delete the email notification afterwards but I recommend keeping it for a while if you need to debug Amplify notifications

A simple way to call the AWS SDK from Lambda functions is to use a NodeJS runtime. You will need to setup a specific Lambda layer to include the AWS JS SDK within the Lambda function's runtime

Once you have created a Lambda function with this layer, add a trigger to your Lambda function and choose the SNS topic that was created when setting up the Amplify email notification. Now your Lambda function will get called on build success / failure

Now you will need to figure out what to reset in the Cloudfront configuration. You can for example locally run aws cloudfront get-distribution-config --id $DISTRIBUTION_ID before / after a deployment to see what changes you need to make. You can then use something like the following in your Lambda function:

const { CloudFrontClient, ListCachePoliciesCommand, GetDistributionConfigCommand, UpdateDistributionCommand } = require("@aws-sdk/client-cloudfront");

async function updateCloudfrontDistribution(distributionId) {
    const client = new CloudFrontClient({ region: process.env.AWS_REGION });

    const distributionCommand = new GetDistributionConfigCommand({Id: distributionId});
    const distributionResponse = await client.send(distributionCommand);
    const etag = distributionResponse.ETag;
    const newConfig = { ...distributionResponse.DistributionConfig };
    // Change newConfig as you need
    const updateCommand = new UpdateDistributionCommand({Id: distributionId, DistributionConfig: newConfig, IfMatch: etag});
    await client.send(updateCommand);
}

Refer to the AWS Cloudfront client documentation for how the commands used above work. Also see this article for screenshots on how to set up the Lambda / Amplify connection

Let me know if it helps, I can provide more details if needed

[github-actions[bot]]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see. If you need more assistance, please either tag a team member or open a new issue that references this one. If you wish to keep having a conversation with other community members under this issue feel free to do so.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.