Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Deploying front-end websites to S3 with CloudFront

ilhicas.com

Post reply on HN
Print view View original

21–30 of 33 posts

Re: Deploying front-end websites to S3 with CloudFront

#21

Post by cyberferret »

I've always wondered why Amazon's own CodePipeline service could not deploy a commit of a HTML/CSS static sites straight to S3. They can deploy from CodeCommit straight to Elastic Beanstalk easily enough, but for years I have been asking for an S3 bucket as a destination which would make deploying our static website a piece of cake.

As it is, we have had to use BitBucket as the repo for our website, and we use the Pipelines feature on there to deploy to S3. Would be nice not to have to use a third party service to do something that AWS's own infrastructure makes unreasonably complex and difficult.

Re: Deploying front-end websites to S3 with CloudFront

#23

Post by hkchad »

irjoe wrote: post #6
wefarrell wrote: post #5

Configuring CORS is probably the biggest pain about this approach and is necessary if you want to send data to and from an API. This guide should probably mention it or link another guide.

I've found a fairly workable solution is to have an origin for the API in CloudFront and a behaviour to route /api/* to that origin. Saves any CORS headaches. Obviously this won't work in all cases.

Here's a writeup on the details. https://medium.com/@chad.h.dalton/how-we-reduced-our-api-cal...

Re: Deploying front-end websites to S3 with CloudFront

#25

Post by saidmasoud »

irjoe wrote: post #6
wefarrell wrote: post #5

Configuring CORS is probably the biggest pain about this approach and is necessary if you want to send data to and from an API. This guide should probably mention it or link another guide.

I've found a fairly workable solution is to have an origin for the API in CloudFront and a behaviour to route /api/* to that origin. Saves any CORS headaches. Obviously this won't work in all cases.

Just remember, the route prefix you use to define the CloudFront behavior will also be added to the request sent to the origin server. So in this case, all routes defined by the API must be prefixed with `/api/`. This makes it hard to refactor existing APIs with many routes and dependencies, but works great in a greenfield scenario.

(Of course, you can rewrite the URL on the fly via Lambda@Edge but that's a PITA to maintain)

Re: Deploying front-end websites to S3 with CloudFront

#26

Post by viklove »

cyberferret wrote: post #21

I've always wondered why Amazon's own CodePipeline service could not deploy a commit of a HTML/CSS static sites straight to S3. They can deploy from CodeCommit straight to Elastic Beanstalk easily enough, but for years I have been asking for an S3 bucket as a destination which would make deploying our static website a piece of cake. As it is, we have had to use BitBucket as the repo for our website, and we use the Pi…

I'm not sure I understand this comment. I have a simple script (under 100 lines) using the aws sdk that pushes my assets to an s3 bucket where my site is hosted. I'm able to trigger it with an npm script with a command `npm run deploy`.

Re: Deploying front-end websites to S3 with CloudFront

#27

Post by procinct »

maest wrote: post #14
cordite wrote: post #13

A problem my team hits with micro projects with this is: virtual routes like `/login` doesn’t map to a file. What can be done about that?

/login makes me think your website isn't really static. Regardless, you can use extensionless links with your static website if you rename the file from login.html to login, then change the file metadata to Content-Type: 'text/html'

Why would it not be static? It could be a static site making a request to an API to log in?

Re: Deploying front-end websites to S3 with CloudFront

#28

Post by throwbackThurs »

bunsenhoneydew wrote: post #18

You should have a look at AWS Amplify Console https://aws.amazon.com/amplify/console/ It’s specifically designed to do most of this for you. I’ve been using it for static site work recently and it’s awesome. It also does plenty more and can be used for full stack dev but it’s great if you just need static site hosting and build pipelines. No need to have the build locally and uses gitops for build and auto generates…

I second this, it's excellent

Re: Deploying front-end websites to S3 with CloudFront

#29

Post by bett3513 »

cyberferret wrote: post #21

I've always wondered why Amazon's own CodePipeline service could not deploy a commit of a HTML/CSS static sites straight to S3. They can deploy from CodeCommit straight to Elastic Beanstalk easily enough, but for years I have been asking for an S3 bucket as a destination which would make deploying our static website a piece of cake. As it is, we have had to use BitBucket as the repo for our website, and we use the Pi…

AWS Amplify is the service that works as you’ve described.

Re: Deploying front-end websites to S3 with CloudFront

#30

Post by bett3513 »

cordite wrote: post #13

A problem my team hits with micro projects with this is: virtual routes like `/login` doesn’t map to a file. What can be done about that?

You can add an error behaviour in cloudfront that defaults the 404 behaviours to the index page. If you also add the index and error of the S3 config to the same index page it all works perfectly.

We have multiple React sites deployed this way to S3/Cloudfront with react-router and experience no issues.

Post reply on HN