Deploy React App to CloudFront with HTTPS Custom Domain

No video

Deploy React App to CloudFront with HTTPS Custom Domain

Рет қаралды 15,716

Күн бұрын

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

Пікірлер: 51

@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 11 ай бұрын

@@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 6 ай бұрын

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

@totachava6235 2 жыл бұрын

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

@SamMeechWard 2 жыл бұрын

Thank you 🤗

@GauravSingh-747 Жыл бұрын

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

@maksymchumak6583 2 жыл бұрын

Great tutorial, very helpful!

@nicholasfray9193 Жыл бұрын

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

@user-pb3nv7id8g 10 ай бұрын

@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 9 ай бұрын

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

@monkeque911 Ай бұрын

Thank you very much! I spent literraly the whole day figuring it out why I'm still getting 403 ...

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

@austinejose1516 10 ай бұрын

Very well explainer, Thank you!

@manfung6333 Жыл бұрын

Really thanks to what you did! it really helps!

@user-wd4cq4mp9o Жыл бұрын

so thanks of u bro it's very helpful

@EddieMao 5 ай бұрын

Great great video, thanks a lot, subscribed!

@renao_ 5 ай бұрын

awesome video, thank you

@javv1748 4 ай бұрын

Excelente video

@lukagamulin9496 Жыл бұрын

this was awesome!

@SamMeechWard Жыл бұрын

🤗

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

@SushilSharma-vp8cx Жыл бұрын

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

@ashishwaykar2838 8 ай бұрын

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

@matthewigbinehi1610 5 ай бұрын

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

@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 2 жыл бұрын

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

@wonderkiev Жыл бұрын

Any ideas how add www redirect? Thanks

@fullViewJay Жыл бұрын

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

@babytoystv1909 4 ай бұрын

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

@marcosmli 10 ай бұрын

How do you invalidate browser cache?

@kyoukai9379 6 ай бұрын

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

@nihal9372 7 күн бұрын

Domain was verified and connected with router 53 in previous video, any domain name is fine but need to be verified

@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 10 ай бұрын

Dumb question, why two Route53 records?