
Deploying front-end websites to S3 with CloudFront - ilhicas
https://ilhicas.com/2020/02/15/Serving-Javascript-S3.html
======
bunsenhoneydew
You should have a look at AWS Amplify Console
[https://aws.amazon.com/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 environments based off branch name patterns.

------
snazz
If it's just a personal website, you might find it easier to use GitHub Pages
(or GitLab's equivalent) and Cloudflare. Both are free for any reasonable
personal website usage.

If you don't want to run a build of your static site generator on your
computer and upload the result to GitHub every time you make a change, you can
just use Jekyll and GitHub will build it for you. I think GitLab supports
other static site generators as well. This technique is how
[https://www.snazz.xyz](https://www.snazz.xyz) works.

~~~
judge2020
CF is not necessary anymore for SSL since GH can issue LetsEncrypt
certificates automatically. [https://help.github.com/en/github/working-with-
github-pages/...](https://help.github.com/en/github/working-with-github-
pages/securing-your-github-pages-site-with-https)

~~~
snazz
True. I find that the other features (analytics, better DNS interface,
caching) make it worthwhile for me. Also, the original article mentioned
CloudFront.

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

~~~
viklove
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`.

~~~
cyberferret
I've found lots of scripts online to do it, but the issue is that we shouldn't
really resort to scripting for this. CodePipeline already has a nice interface
where I can choose the Elastic Beanstalk environment where I wish to deploy
the code. Zero scripting required. Why can't they have a drop down where I can
specify S3, and the Bucket name to deploy to as well?

After all, they offer S3 as a service where we can deploy static sites, so why
not in their pipeline service offer an S3 bucket as a valid destination for
the code?

My BitBucket pipeline I described above has less than 10 lines of YAML to
define which S3 bucket to push the committed changes to, so already, a 3rd
party workaround is 10x less code than your 'AWS only' workaround. This
shouldn't be the case.

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

~~~
irjoe
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.

~~~
saidmasoud
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)

------
tobilg
If you want to do this with one command, check out
[https://github.com/tobilg/serverless-aws-static-
websites](https://github.com/tobilg/serverless-aws-static-websites) or, if you
want to host an API with Lambda as well, [https://github.com/tobilg/aws-
fullstack-website](https://github.com/tobilg/aws-fullstack-website)

------
veeralpatel979
Netlify ([http://netlify.com/](http://netlify.com/)) works great for static
sites as well!

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

~~~
maest
/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'

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

------
throw03172019
I just use s3_website. It works well if you have Java installed.

[https://github.com/laurilehmijoki/s3_website](https://github.com/laurilehmijoki/s3_website)

