Installation on existing S3 CloudFront CI/CD

[cjkeatley]

I would like to implement this as a solution for my current site, however I'm not certain how to use the example as it sits. Is there a installation guide that would walk me through implementing on an existing S3 CloudFront hosted site?

[acabreragnz]

@cjkeatley Were you able to do it? Let me know and I can guide you.

[cjkeatley]

@acabreragnz After trying to make it work for a couple of days I switched to a service-based solution > headless-render-api. It's been working mostly, but I believe doing it within the AWS ecosystem would be more performant. I would be willing to give it another shot if you've got time to walk me through it.

[acabreragnz]

@cjkeatley there we go, let me know if you have any doubts.

Change the CloudFront distribution behaviors

Go to the CloudFront distribution, Behaviors tab, and edit the existing behavior

Change to Legacy cache settings and add these custom headers

On the same page at the bottom

• change the viewer request

  • in the ARN you have to go to the lambda function and copy the ARN of the lambda prerender-io-example-SetPrerenderHeader

• change the origin request

  • in the ARN you have to go to the lambda function and copy the ARN of the lambda prerender-io-example-RedirectToPrerender

This an example of how to copy the ARN of the prerender-io-example-SetPrerenderHeader function

Go to the lambda functions in Virginia

Enter each of the functions and copy the arn

You don't need this at the start point:

Some extra notes:

• to update a lambda function: you have to deploy and publish a new version, then you should update the ARN again in the CloudFront distribution behavior (the ARN of the lambda function change with the version)
• the user-agent is always set as Cloudfront (which is wrong), in case you need the viewer user-agent, you should follow the same strategy of the lambda function saving the user agent in a custom header X-User-Agent. (I can give more details if somebody needs them)

[ysabri]

@acabreragnz I was able to do this for the the React SPA we're serving through an s3 static site bucket. Our SPA handles the routing on the client side.

So if someone loads any page but the homepage, they'll get a 404 cause we don't have static index.html files for all the pages.

Have you been able to handle this, cause it cases a cache miss and Prerender doesn't cache the page due to the 404 response.

[acabreragnz]

Hey @ysabri, mine is a Vue SPA

Do you have these error pages in place?

[ysabri]

@acabreragnz This worked! Thank you so much.

Trying to figure out images from S3, only one loads from behind my CloudFront dist. I removed all the origin access constraints.

[acabreragnz]

@ysabri Glad to hear it worked!

Judging by this line, assets in general (so images) should be ignored and served as usual, I didn't have that issue 🤔

[ysabri]

@acabreragnz You're right, assets served from the CloudFront website distribution are working just fine. Its other images that we retrieve after loading an API call, they're in a different bucket. I tried setting the window.prerenderReady = true once they load, but still for some reason, the captured html has only one every time.

Not sure if its the right place to ask anymore but you've been so helpful, so thank you again.

[ysabri]

I found the solution, there is a setting where you tell the bot to wait for images, it works now.

[10Bude10]

@acabreragnz: Thanks for your step-by-step guide to integrate it in an existing project. Most pages of my Angular application will be perfectly rendered - except my landing page. When accessing this page with user agen GoogleBot - I receive a 504 error from cloudfront: The request could not be satisfied. CloudFront attempted to establish a connection with the origin, but either the attempt failed or the origin closed the connection. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner. If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation. Do you have any idea what can cause this error?