Deploy React App to CloudFront with HTTPS Custom Domain

Learn how to deploy a react app, or any static website, to a Cloud Front distribution custom domain name and SSL Certificate.
Chapters:
0:00​ Intro
0:59 Building the react app
1:35 Create an S3 bucket
2:37 Create CloudFront Distribution
4:16 Custom Domain Name
5:19 SSL Certificate
7:08 DNS Record in Route 53
8:26 Custom Error Page for React
10:46 Updating the Website
12:05 CloudFront Invalidate Files
13:06 AWS CLI
aws s3 sync directory-path "s3://your-bucket-name/"
aws cloudfront create-invalidation --distribution-id your-distribution-id --paths '/*'
🔗Route 53 Domain Name
• AWS Route 53 Domain Name
🔗 AWS CLI
• Setting Up The AWS CLI
🔗S3 Static Website AWS CLI
sammeechward.com/aws-cli-s3-s...
🔗Moar Links
My Website: www.sammeechward.com
Instagram: / meech_ward
Github: github.com/orgs/Sam-Meech-Ward

[@PurelyDef]

Thank you for this video. For anyone following along, as of 3/24/23 they've replaced "Origin Access Identity" with "Origin access control settings (recommended)". The steps are roughly the same, but you have to copy the bucket policy, then go into your s3 bucket and paste it in yourself, because of course aws can't just leave things the way they are for longer than a few months

[@brunoaustin9756]

do i really need an ssl certificate? because its taking too long to be issued. plus i want the url to be custom

[@mikefdorst]

@@brunoaustin9756 If you don't have an SSL certificate, when people go to your website it will notify them that it's not secure. So it's nice to have it. It shouldn't take longer than 3 days to get issued.

[@morph442]

Awesome tutorial, very hands-on. Thanks a lot! No open questions

[@jackmu3603]

Thanks Sam, this video was a great help. Love how you explain all of the steps

[@totachava6235]

U have the best real world tutorials,thank you very much :)

[@SamMeechWard]

Thank you 🤗

[@nicholasfray9193]

Helped out a ton, and learned a lot. Thanks my dude.

[@maksymchumak6583]

Great tutorial, very helpful!

[@GauravSingh-747]

Thankyou so much for this video it really helps me to deploy my company project on AWS…thank you once again

[@austinejose1516]

Very well explainer, Thank you!

[@manfung6333]

Really thanks to what you did! it really helps!

[@user-pb3nv7id8g]

@6:40 I had to change the "Default root object" to index.html instead of /index.html else you may get an "Access denied" error. Awesome explanation of course!

[@user-yo2xq1rq3u]

I still get the "Access denied" error after removing the "/". By the way, the previous domains work well the `/index.html`.

[@EddieMao]

Great great video, thanks a lot, subscribed!

[@renao_]

awesome video, thank you

[@excelpowerg9559]

Gracias, video helped me fixed two issues i was having. One with Route 53, couldn't find my CloudFront resource after i created my simple policy record, which was a by product of the second issue, i failed to assign CloudFront my SSL certificate within the distribution settings. After doing those two things everything else was smooth.

[@javv1748]

Excelente video

[@lukagamulin9496]

this was awesome!

[@SamMeechWard]

🤗

[@user-wd4cq4mp9o]

so thanks of u bro it's very helpful

[@SushilSharma-vp8cx]

Good work mate. I saw configure it through legacy OAI option is there any other way to implement cloudfront for you buckets ?

[@ellmango]

i got it working thank you. only thing i dont have working is that www doesnt direct to the cloudfront distribution

[@fiddler-dv4or]

Yeah. I'm having the same problem too. Did you get this working, Corkpop?

[@ashishwaykar2838]

at 11:49 the reaction for quote with se* noticable 😂😂

[@matthewigbinehi1610]

For the problem of stressful update, is it not more efficient to use Amplify instead of S3 bucket? Then continuous deployment is possible using Github as connection to Amplify

[@kyoukai9379]

does the domain name has to be from route53 or any domain name from any provider would be fine ? also what would be the cost of all that excluded the s3

[@cdialpha]

Not sure if this matters, should you use a lower S3 storage class (e.g. Standard-IA, One Zone-IA) for the build files? Assuming that (1) you're relying on free teir and (2) it's for a personal site, you might not update them that frequently ?

[@SamMeechWard]

I guess it really depends on each use case. If you know how your data will be accessed and you have specific needs, then a different storage class would be good. So if your personal site was rarely accessed by anyone Standard-IA might be good. But i've never tested these out thoroughly so I can't make any good recommendations.

[@pelaoinfo]

it doesn't work when I refresh the page any suggestions?

[@fullViewJay]

I tried this process but I am getting a 405 error. I built a full-stack app with mongoDb as the backend

[@wonderkiev]

Any ideas how add www redirect? Thanks

[@babytoystv1909]

what happens if the server is restarted, how can i do it? my website is not showing up after restarted

[@sitefleek]

I am getting served this error when i try to access my domain: This XML file does not appear to have any style information associated with it. The document tree is shown below. AccessDenied Access Denied PH0W267ETFMT2Y4H ckUFCC1qH8/wYNJR5HmrKV7bCkHLjkMto7ov7mVnhufdIdKFLMI1aETc0d09S9scmlVwRKsquC0=

[@krish420]

same, have you found any fix?

[@sitefleek]

@@krish420 yes, I had to change the permissions to the s3 bucket. For some reason if i only allowed cloudfront the access to my bucket, it gave this error. when I allowed open to all access to the s3 bucket, the error went away.

[@krish420]

@@sitefleek I also have some env elements do you know how to implement them?

[@marcosmli]

How do you invalidate browser cache?

[@marcosmli]

Dumb question, why two Route53 records?

[@dmitrymatio]

All for me

[@SamMeechWard]

Look at that nice community badge thing

[@ursnj]

Getting 403 access denied, anything im missing ???

[@bwanamaina]

go to cloudfront settings, add custom error messages, add error 403 , redirect it to /index.html with status code 200 ok. This should fix your issue.

[@thanosavg9273]

Update the bucket policy provided by CloudFront after creating the distribution

[@quentinepitech]

@@thanosavg9273 even after this i still have the forbiden... any ideas ??

[@andrewd.1118]

@@quentinepitech kzbin.info/www/bejne/Y4vMmqV8bMaja7c

[@prerakhere]

@@bwanamaina worst advice ever.

[@hash510]

today , aws cloudfront has other options to create distribution... It's useless