cdk-construct: the updated files under `public/` not updated in deployment (cloudfront)

[azhong-git]

Issue Summary

Hello, I am using the following script to deploy a NextJS site to CloudFront. However I came across the following two issues regarding statically served files under /public:

• ~~Blocking despite updating a file (without changing filename) in /public, the file in the deployed site does not get updated while local dev or deploy test works. In my case, I was updating public/favicon/favicon.ico.~~

  • Clarification: the updated files did get uploaded to s3 bucket, it is just that the cloudfront cache needs invalidation (explanation and how to invalidate using aws cli)

• Not blocking but not ideal: a newly added file is not accessible until 10 minutes later after the npm run cdk deploy finishes.

Is any of the two issues expected? I have included my script (pretty standard) below:

import { Stack, StackProps } from "aws-cdk-lib";
import { Construct } from "constructs";
import { NextJSLambdaEdge } from "@sls-next/cdk-construct";

// Followed the examples below to run deploy NextJS with CDK
// https://github.com/serverless-nextjs/serverless-next.js/blob/master/documentation/docs/cdkconstruct.md
// https://github.com/serverless-nextjs/serverless-next.js/tree/master/packages/serverless-components/nextjs-cdk-construct/examples/basic
export class MyStack extends Stack {
  constructor(scope: Construct, id: string, props: StackProps) {
    super(scope, id, props);
    new NextJSLambdaEdge(this, "NextJSApp", {
      serverlessBuildOutDir: "./build",
    });
  }
}

#!/usr/bin/env node
import { App } from "aws-cdk-lib";
import { Builder } from "@sls-next/lambda-at-edge";
import { MyStack } from "../stack";

const builder = new Builder(".", "./build", { args: ["build"] });

builder
  .build(true)
  .then(() => {
    const app = new App();
    new MyStack(app, "AppStack", {
      env: {
        // Only us-east-1 supports lambda edge
        region: "us-east-1",
      },
      analyticsReporting: true,
    });
  })
  .catch((e) => {
    console.error(e);
    process.exit(1);
  });

Expected behavior

Local changes in /public gets updated in the deployed site right away after npm run cdk deploy.

Versions

"@sls-next/cdk-construct": "^3.7.0", "@sls-next/lambda-at-edge": "^3.7.0",

• OS/Environment: MacOS 12.4
• @sls-next/serverless-component version: 3.7.0
• Next.js version: 12.2.3

Checklist

• [x] You have reviewed the README and FAQs, which answers several common questions.
• [x] You have reviewed our DEBUGGING wiki and have tried your best to include complete information and reproduction steps (including your configuration) as is possible. As there is only one maintainer (who maintains this in his free time) and thus very limited resources, if you have time, please try to debug the issue a bit yourself if possible.
• [x] You have first tried using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

[azhong-git]

No longer a blocking issue for me and it seems that the behavior is expected according to CloudFront docs included in the clarification of issue 1 above.

However I am still looking for advice on best practice updating static files:

• Use different names
• Or update with the same name and run on-off invalidate after deployment
• Or other ways preferably handled automatically by cdk?

[andrewdavidcostello]

I just came looking for this exact issue. I think the 10 minute times you are experiencing could be considered lucky as we are seeing anything from 10 minutes to a few days for everything to clear out depending on how cloudfront handles things.

I have not tried this yet but you may just be able to set invalidationPaths: ["/*"] as per the docs or define this manually.