Installation on existing S3 CloudFront CI/CD about prerender-cloudfront HOT 11 OPEN

@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)

from prerender-cloudfront.

@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.

from prerender-cloudfront.

@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.

from prerender-cloudfront.

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

from prerender-cloudfront.

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

from prerender-cloudfront.

@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.

from prerender-cloudfront.

@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.

from prerender-cloudfront.

Hey @ysabri, mine is a Vue SPA

Do you have these error pages in place?

from prerender-cloudfront.

@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 🤔

from prerender-cloudfront.

@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?

from prerender-cloudfront.